這篇文章我看過覺得特別有感悟，現在推薦給大家，我在這篇文章中學習到很多，希望看完大家也能有所提升。

連結：https://www.jianshu.com/p/17bb1c36eacb

在今年的Google/IO大會上，亮相了一個全新的 Android 原生 UI 開發框架-Jetpack Compose, 與蘋果的SwiftIUI一樣，Jetpack Compose是一個宣告式的UI框架，隨著了今年安卓和蘋果兩大移動平臺相繼推出自己的UI開發框架Jetpack Compose 和SwiftIUI，標誌著移動作業系統正式全面擁抱宣告式 UI 開發模式。

一、宣告式 UI 的前世今生

其實宣告式 UI 並不是什麼新技術，早在 2006 年，微軟就已經發布了其新一代介面開發框架 WPF，其採用了 XAML 標記語言，支援雙向資料繫結、可複用模板等特性。

2010 年，由諾基亞領導的 Qt 團隊也正式釋出了其下一代介面解決方案 Qt Quick，同樣也是宣告式，甚至 Qt Quick 起初的名字就是 Qt Declarative。QML 語言同樣支援資料繫結、模組化等特性，此外還支援內建 JavaScript，開發者只用 QML 就可以開發出簡單的帶互動的原型應用。

宣告式 UI 框架近年來飛速發展，並且被 Web 開發帶向高潮。React 更是為宣告式 UI 奠定了堅實基礎並一直引領其未來的發展。隨後 Flutter 的釋出也將宣告式 UI 的思想成功帶到移動端開發領域...

宣告式UI的意思就是，描述你想要一個什麼樣的UI介面，狀態變化時，介面按照先前描述的重新“渲染”即可得到狀態絕對正確的介面，而不用像命令一樣，告訴程式一步一步該幹什麼，維護各種狀態。扯遠了，這個並不是今天文章的重點，稍微了解一下就好，其他的就不在本文延伸。關於宣告式的更多介紹，建議看看這篇文章：https://zhuanlan.zhihu.com/p/68275232

我們回到本文的重點Jetpack Compose。

二、Jetpack Compose 介紹

Jetpack Compose 是一個用於構建原生Android UI 的現代化工具包，它基於宣告式的程式設計模型，因此你可以簡單地描述UI的外觀，而Compose則負責其餘的工作-當狀態發生改變時，你的UI將自動更新。由於Compose基於Kotlin構建，因此可以與Java程式語言完全互操作，並且可以直接訪問所有Android和Jetpack API。它與現有的UI工具包也是完全相容的，因此你可以混合原來的View和現在新的View，並且從一開始就使用Material和動畫進行設計。

三、Jetpack Compose 環境準備和Hello World

每當我們學習一門新的語言，我們都是從一個hello world開始，今天我們也從一個hello world來開始Jetpack Compose 吧! 要想獲得Jetpack Compose 的最佳體驗，我們需要下載最新版本的Android Studio 預覽版本（即Android Studio 4.0）。因為Android Studio 4.0 添加了對Jetpack Compose 的支援，如新的Compose 模版和Compose 及時預覽。

使用Jetpack Compose 來開始你的開發工作有2種方式：

將Jetpack Compose 新增到現有專案建立一個支援Jetpack Compose的新應用

接下來分別介紹一下這兩種方式。

1. 將Jetpack Compose 新增到現有專案

如果你想在現有的專案中使用Jetpack Compose，你需要配置一些必須的設定和依賴：

（1）gradle 配置 在app目錄下的build.gradle 中將app支援的最低API 版本設定為21或更高，同時開啟Jetpack Compose enable開關，程式碼如下：

android { defaultConfig { ... minSdkVersion 21 } buildFeatures { // Enables Jetpack Compose for this module compose true } ... // Set both the Java and Kotlin compilers to target Java 8. compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } kotlinOptions { jvmTarget = "1.8" }}

(2) 使用試驗版Kotlin-Gradle 外掛 Jetpack Compose 需要試驗版的Kotlin-Gradle外掛,在根目錄下的build.gradle新增如下程式碼：

buildscript { repositories { google() jcenter() // To download the required version of the Kotlin-Gradle plugin, // add the following repository. maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' } ... dependencies { classpath 'com.android.tools.build:gradle:4.0.0-alpha01' classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.60-eap-25' }}allprojects { repositories { google() jcenter() maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' } }}

(3) 新增Jetpack Compose工具包依賴項 在app目錄下的build.gradle新增Jetpack Compose 工具包依賴項，程式碼如下：

dependencies { // You also need to include the following Compose toolkit dependencies. implementation 'androidx.ui:ui-tooling:0.1.0-dev02' implementation 'androidx.ui:ui-layout:0.1.0-dev02' implementation 'androidx.ui:ui-material:0.1.0-dev02' ...}

ok，到這兒準備工作就完畢，就可以開始寫程式碼了，但是前面說了，還有一種方式接入Jetpack Compose ,我們來一起看看。

2. 建立一個支援Jetpack Compose的新應用

比起在現有應用中接入Jetpack Compose ,建立一個支援Jetpack Compose 的新專案則簡單了許多，因為Android Studio 4.0 提供了一個新的Compose 模版，只要選擇這個模版建立應用，則所有上面的那些配置項都自動幫我們完成了。

建立一個支援Jetpack Compose 的應用，如下幾個步驟就可以了：

如果你在Android Studio的歡迎視窗，點選Start a new Android Studio project，如果你已經打開了Android Studio 專案，則在頂部選單欄選擇File > New > New Project在Select a Project Template 視窗，選擇Empty Compose Activity並且點選下一步在Configure your project 視窗，做如下幾步： a. 設定專案名稱, 包名和儲存位置 b. 注意，在語言下來選單中，Kotlin 是唯一一個可選項，因為Jetpack Compose 只能用Kotlin來寫的才能執行。 c. Minimum API level 下拉選單中，選擇21或者更高點選Finish

現在，你就可以使用Jetpack Compose 來編寫你的應用了。

3. Hello wold

在MainActivity.kt中新增如下程式碼：

Jetpack Compose是圍繞composable函式來構建的。這些函式使你可以通過描述應用程式的形狀和資料依賴，以程式設計方式定義應用程式的UI，而不是著眼於UI的構建過程。要建立composable函式，只需要在函式名前面加上一個@composable註解即可, 上面的Text就是一個composable函式。

4. 定義一個composable函式

一個composable函式只能在另一個composable函式的作用域裡北呼叫，要使一個函式變為composable函式，只需在函式名前加上@composable註解，我們把上面的程式碼中，setContent中的部分移到外面，抽取到一個composable函式中，然後傳遞一個引數name 給 text元素。

四、佈局

UI元素是分層級的，元素包含在其他元素中。在Jetpack Compose中，你可以通過從其他composable函式中調composable函式來構建UI層次結構。

在Android的xml佈局中，如果要顯示一個垂直結構的佈局，最長用的就是LinearLayout, 設定android:orientation 值為vertical, 子元素就會垂直排列，那麼，在Jetpack Compose 中，如何來實現垂直佈局呢？先新增幾個Text來看一下。

1. 新增多個Text

在上面的例子中，我們添加了一個Text顯示文字，現在我們新增三個文字，程式碼如下：

從上圖可以看到，我們添加了3個文字，但是，由於我們還沒有提供有關如何排列它們的任何資訊，因此三個文字元素相互重疊繪製，使得文字不可讀。

2. 使用Column

要使重疊繪製的Text文字能夠垂直排列，我們就需要使用到Column函式，寫過flutter的同學看起來是不是很眼熟？是的，跟flutter裡面的Column Widget 名字和功能完全一樣，甚至連他們的屬性都一摸一樣。

@Composablefun NewsStory() {    Column { //  新增Column，使佈局垂直排列        Text("我超❤️JetPack Compose的！")        Text("Android技術雜貨鋪")        Text("依然范特西")    }}

效果如下：

可以看到，前面重疊的佈局，現在已經垂直排列了，但是，預設情況下，從左上角開始，一個接一個的排列，沒有任何間距。接下來，我們給Column 設定一些樣式。

3. 給Column新增樣式

在呼叫Column（）時，可以傳遞引數給Column（）來配置Column的大小、位置以及設定子元素的排列方式。

如上圖所示，我們填充了padding，其他效果幾乎一摸一樣， 上面程式碼中的設定屬性解釋如下：

crossAxisSize: 指定Column元件（注：Compose中，所有的元件都是composable函式，文中的元件都是指代composable函式）在水平方向的大小，設定crossAxisSize為LayoutSize.Expand即表示Column寬度應為其父元件允許的最大寬度，相當於傳統佈局中的match_parant ，還有一個值為LayoutSize.Wrap，看名字就知道，包裹內容，相當於傳統佈局中的wrap_content。modifier:使你可以進行其他格式更改。在這種情況下，我們將應用一個Spacing修改器，該設定將Cloumn與周圍的檢視產生間距。4. 如何顯示一張圖片？

在原來的安卓原生布局中，顯示圖片有相應的控制元件ImageView,設定本地圖片地址或者Bitmap就能展示，在Jetpack Compose 中該如何顯示圖片呢？

我們先下載這張圖片到本地，新增到資源管理器中，命名為header.png, 我們更改一下上面的NewsStory ()方法，先從資原始檔夾獲取圖片image，然後通過DrawImage()將圖片繪製出來：

可以看到，圖片不會按正確的比列顯示，接下來，我們來修復它。

圖片已新增到佈局中，但會展開以填充整個檢視，並和文字是拼疊排列，文字顯示在上層。要設定圖形樣式，請將其放入Container(又一個和flutter中一樣的控制元件)

: 指定Container的大小，預設是false（Container的大小是子元件的大小，相當於wrap_content），如果將它設定為true，就指定Container的大小為父控制元件所允許的最大size, 相當於match_parent。height : 設定Container容器的高度，height屬性的優先順序高於expanded,因此會覆蓋expanded，如上面的例子，設定height為180dp,也就是容器寬為父控制元件寬度，高為180dp5. 新增間距Spacer

我們看到，圖片和文字之間沒有間距，傳統佈局中，我們可以新增Margin屬性，設定間距，在Jetpack Compose 中，我們可以使用HeightSpacer()和WidthSpacer() 來設定垂直和水平間距

 HeightSpacer(height = 20.dp) //設定垂直間距20dp WidthSpacer(width = 20.dp) // 設定水平間距20dp

在上面的例子中，我們來為圖片和文字之間新增20dp的間距：

五、使用Material design 設計

Compose 旨在支援Material Design 設計原則，許多元件都實現了Material Design 設計，可以開箱即用，在這一節中，將使用一些Material小元件來對app進行樣式設定

1. 新增Shape樣式

Shape是Material Design 系統中的支柱之一，我們來用clip函式對圖片進行圓角裁剪。

形狀是不可見的，但是我們的圖片已經被裁剪了成了設定的形狀樣式，因此如上圖，圖片已經有圓角了。

2. 給Text 新增一些樣式

通過Compose，可以輕鬆利用Material Design原則。將MaterialTheme（）應用於建立的元件

@Composablefun NewsStory() {    // 獲取圖片    val image = +imageResource(R.mipmap.header)    // 使用Material Design 設計    MaterialTheme() {        Column (            crossAxisSize = LayoutSize.Expand,            modifier = Spacing(16.dp)        ){ //  新增Column，使佈局垂直排列            // 放在容器中，設定大小            Container(expanded = true, height = 180.dp) {                Clip(shape = RoundedCornerShape(10.dp)) {                    // 顯示圖片                    DrawImage(image)                }            }            HeightSpacer(height = 20.dp) // 新增垂直方向間距20dp            Text("我超❤️JetPack Compose的！")            Text("Android技術雜貨鋪")            Text("依然范特西")        }      }}

如上面的程式碼，添加了MaterialTheme後，重新執行，效果沒有任何變化，文字現在使用了MaterialTheme的預設文字樣式。接下來，我們將特定的段落樣式應用於每個文字元素。

現在看看，我們的文字樣式已經有變化了，標題有6中樣式 h1-h6，其實HTML中的樣式很像，內容文字有body1和body22中樣式。

Material 調色版使用了一些基本顏色，如果要強調文字，可以調整文字的不透明度:

有些時候，標題很長，但是我們又不想長標題換行從而影響我們的app UI ,因此，我們可以設定文字的最大顯示行數,超過部分就截斷。

如本例所示，我們設定顯示最大行數為2，多於的部分截斷處理：

  Text("我超❤️JetPack Compose的！寫起來簡單，複用性又強，可以抽取很多元件來複用，不用管理複雜的狀態變更！",                maxLines = 2, overflow = TextOverflow.Ellipsis,                style = (+themeTextStyle { h5 }).withOpacity(0.87f))

可以看到，設定了maxLines 和overflow 之後，超出部分就截斷處理了，不會影響到整個佈局樣式。

六、Compose 佈局實時預覽

從Android Studio 4.0 開始，提供了在IDE中預覽composable函式的功能，不用像以前那樣，要先下載一個模擬器，然後將app狀態模擬器上，執行app才能看到效果。

但是有一個限制，那就是composable函式不能有引數

滿足下面兩個條件：

函式沒有引數在函式前面新增@Preview註解

預覽效果圖如下：

這真的是一個非常棒的功能，像其他宣告式佈局，如React 、flutter 是沒有這個功能的，佈局了之後，要重新執行才能看到效果，雖然可以熱啟動，但是還是沒有這個預覽來得直接。

還有一個非常牛逼的地方是，compose 的預覽可以同時預覽多個composable函式。

效果如下：

七、總結

Jetpack Compse 目前還是試驗版,所以肯定還存在很多問題，還不能現在將其用於商業專案中，但是這並不能妨礙我們學習和體驗它，宣告式 UI 框架近年來飛速發展，React 為宣告式 UI 奠定了堅實基礎並。 Flutter 的釋出將宣告式 UI 的思想成功帶到移動端開發領域，Apple和Google 分別先後釋出了自己的宣告式UI框架SwiftUI 和 Jetpack Compose , 以後，原生UI佈局，宣告式可能將會是主流。

以上就是文章的所有內容，希望它對你有用！