Jetpack Compose 1.0 終於要投入使用了！

前言

Jetpack Compose 是用於構建原生界面的「新款 Android 工具包」。2021 Google IO 大會上，Google宣布：「Jetpack Compose 1.0 即將面世」。

作為Android未來新的UI開發標准，Compose 會為 Android 開發帶來哪些變化呢？本文將帶來Jetpack Compose的特點及其跟傳統Android UI開發方式的分析：

1. 基於Kotlin

2. 聲明式開發

3. UI刷新機制

4. 狀態管理

5. UI組件類型

6. 實時預覽

7. 兼容性

8. Jetpack Compose 與 Flutter的關系

---

基於Kotlin

現行的 Andoird 開發體系：Java + xml，但近年來 Google已經宣布Kotlin是Android開發的第一語言。Jetpack Compose這套聲明式UI采用的底層DSL是Kotlin，即 你在使用Jetpack Compose開發UI時，實際上是使用Kotlin進行UI開發，「即 完全統一了Android開發語言。」

---

聲明式開發

現行的 Andoird 視圖體系屬於傳統的命令式開發方式：使用XML布局、通過 findViewById 獲取控件的引用，命令式地更新狀態、刷新UI。命令式UI開發的特點是：

• UI可變：接受命令后通過變化自身刷新UI

• UI持有狀態State：控件的變化通過改變自身狀態實現

Jetpack Compose使用的是聲明式UI開發方式，其特點相對於命令式UI開發有較大區別：

• UI不可變 : @Composable函數不返回任何可引用句柄，無法被外界改變；

• UI不持有State: @Composable函數無法持有狀態，顯示的數據都需要通過參數傳入；

總的來說，Jetpack Compose進行聲明式UI開發時：

1. 每個UI繪制會一個“純函數”的方式運行；

2. 當 狀態State 變化時函數重新執行刷新UI。

---

UI刷新機制

Jetpack Compose刷新UI的方式叫重組，即使用新數據再次調用UI繪制的函數。

@Composable  
fun ClickCounter(clicks: Int, onClick: () -> Unit) {  
    Button(onClick = onClick) {  
        Text("I've been clicked $clicks times")  
    }  
}  

如上述按鈕設置：每次點擊該按鈕時，調用方都會更新 clicks 的值。Compose 會再次調用 lambda 與 Text 函數以顯示新值。

當數據變化時就會觸發重組，如果每次都全量重組則會帶來很多性能損耗。「類似React那種聲明式UI， 每次繪制時都會通過diff算法精准更新 DOM從而實現局部刷新，最終保證React的刷新性能。」

Jetpack Compose 為了保證重組性能才使用了類似的思想：「局部刷新，也叫智能重組」。原理是：在 Gap Buffer 這樣線性結構上進行 diff。

「Gap Buffer 是一個樹形結構經 DFS 處理后的數組」，數組單元通過 key 標記其在樹上的位置信息。Compose 在編譯期為Composable 生成帶有位置信息的 key存入到 Gap Buffer 數組的對應位置。運行時根據 key 來識別 Composable 節點是否發生了位置變化，最終決定是否參與重組。同時，「Gap Buffer 還會記錄 Composable 對象關聯的狀態（State 或 Parameters）」：僅當關聯狀態變化時，Composable 才會參與重組。

---

狀態管理（State）

Jetpack Compose的UI變化本質是：「狀態(State) 驅動」，即控件UI的變化原因是控件UI的狀態發生了變化。

對於傳統的UI開發模式，狀態(State) 只是UI控件的一個屬性，僅此而已。

---

UI組件類型

雖然Jetpack Compose 1.0 才剛面世，但實際上其UI組件庫已經十分完備，幾乎完全覆蓋了Android現有視圖系統的所有組件及能力，主要包括：

• 基礎UI組件，如Button、TextView等，連Card、Fab、AppBar等Material Designe的控件都會涵蓋；

• 列表類組件，如List等，采用items{...} 中創建每條項目的 Composalbe，避免了額外的Adapter適配；

• 布局類組件，提供了多種容器類Composalbe，可以十分高效方便地對子組件進行布局；通過一系列鏈式調用的Modifier操作符來裝飾 Composable 的外觀。操作符的使用十分豐富，如size、backgrounds、padding等；

• 動畫組件，同樣是采用狀態（State）驅動進行動畫效果的實現。

---

實時預覽

Jetpack Compose 能做到開發過程中的「實時預覽」，預覽機制可以做到與真機無異，真正的所見所即得。

---

兼容性

Jetpack Compose 可以與Android現有的視圖View開發體系一起兼容使用，即不一定是新有項目才使用Compose，「而是可以對已有項目引入Compose。」

---

Jetpack Compose 與 Flutter的關系

同屬於UI開發框架，二者都是采用「聲明式UI開發」，但二者並不存在互斥或者競爭關系。

因為：「Jetpack Compose存在於Android的原生UI繪制體系、Flutter主要還是應用於跨平台的UI繪制范疇內。」

但二者都是代表未來Android UI繪制的開發方向：「聲明式UI開發」。

---

展望

• 正式發布：Compose 1.0 會在今年的7月正式發布，同時后續Android Studio 也將同步支持 Compose 開發。

• 功能庫支持越來越豐富：越來越多的 Jetpack 官方庫以及常用的三方庫開始加入對 Compose 的支持

• 生態完善：Jetpack Compose目前不僅應用於Android客戶端，同時最近也有Compose-Desktop、Compose-Web 等項目的發布，為 Compose 提供跨平台的能力，完善了整個Jetpack Compose的UI應用生態。

---

學習指南

1. 官方學習資料

https://goo.gle/compose-pathway https://goo.gle/compose-samples https://goo.gle/compose-docs

2. 中文學習項目

https://docs.compose.net.cn/

---