1.為什么要學？

?1.命令式和聲明式 UI大戰,個人認為命令式UI自定義程度較高,能更深入到性能,內存優化方面,而申明式UI 是現在主流的設計,比如React,React Native,Flutter,Swift UI等等,現在性能也逐漸在變得更好
2.還有一個原因compose 是KMM 是完整跨平臺的UI基礎
3.聲明式UI 個人覺得是非常適合MVVM的設計的,比android databinding 實現的xml 里面綁定vm 更適合,聲明式UI一般都是基于狀態管理的,只需要處理狀態,至于怎么組合,怎么刷新比對 是框架給處理好的,開發不需要關心,所以邏輯稍微簡單些

2.前景?

1.RN官方放棄,Flutter 官方宣停,Flutter也是Google ,同樣compose 和kmm也是google搞的,說明google 目前是把KMM放在第一梯隊的,極大成為后期的主力推薦,現在最新的Android Studio 創建的模版工程就是compose的，而且還支持iOS;
2.我的建立認知是KMM>Flutter>RN;kotlin的的語言優勢較大,和Java 無縫通用

hello word

下載最新的Android Studio,(具體是從哪個版本開始沒必要深糾,我的版本是Android Studio Giraffe | 2022.3.1)

?

?

List列表組建(LazyColum)

class LazyColumnActivity: ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {MyLazyList()}}}@Composablefun MyLazyList(){val state= rememberLazyListState();LazyColumn(state=state){items(100){Text(text="item $it")}}}
}

?確實比寫Adapter,和CollectionViewDelegate簡單

Compose函數

"Jetpack Compose 是圍繞可組合函數構建的。這些函數可讓您以程序化方式定義應用的界面，只需描述應用界面的外觀并提供數據依賴項，而不必關注界面的構建過程（初始化元素、將其附加到父項等）。如需創建可組合函數，只需將 @Composable 注解添加到函數名稱中即可。" 官話

 @Composablefun MyText(){Text(text = "00000");return Text(text = "xfdft");}

上面這段代碼 執行結果顯示 兩個重疊的文字, 其實這個return 是無效的,內嵌的兩個text函數都會執行，@Composable函數的返回值是UNIT

 @Composablefun MyText():Int{Text(text = "00000FFF");return 1;}

這樣改造成返回值int 類型 在實際的結果中依舊是展示了這個text 也不報錯,這尼瑪就有點神奇了？

Kotlin 中間代碼(intermediate representation, IR),
這個是kotlin插件,是編譯時的,比較深奧,參考
?

預覽函數

基于xml的布局都提供預覽,Android layout ios storeboard 等,同樣compose 也具備這個特性

@Preview(name = "第一個預覽區域")@Composablefun preview(){Text(text="Hello,my name is jack,What's your name");}@Preview(name = "第二個預覽區域")@Composablefun preview2(){Text(text="停車坐愛楓林晚,窗前明月光");}

在android studio 的預覽區域就會顯示出來了,可以支持多個,但是在編輯的時候不是很流暢,官方還有很大的優化空間

Compose 組件清單大全

Text：用于顯示文本內容。
Image：用于顯示圖片。
Button：用于創建按鈕。
TextField：用于接收用戶輸入的文本。
Column：用于垂直排列多個組件。
Row：用于水平排列多個組件。
Box：用于在屏幕上創建一個矩形的區域。
Surface：用于繪制一塊可交互的區域。
Card：用于顯示一個卡片式的 UI 元素。
Divider：用于在 UI 中添加分隔線。

Spacer:間距組件

例子:結合行列間距來實現簡單的列表樣式

class LazyColumnActivity2: ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {MyLazyList()}}}@Composablefun MyLazyList(){val state= rememberLazyListState();val items= listOf<Item>(Item("張三","我是中國的"),Item("李四","我是中國的"),Item("王武","我是中國的"))LazyColumn(state=state){items(items){MyItem(item = it)}}}@Composable@Previewfun MyItemPreview(){MyItem(item = Item("張三","我是中國的"))}@Composablefun MyItem(item:Item){return Row(modifier = Modifier.padding(10.dp)) {Image(painter = painterResource(id = R.drawable.ic_launcher_background), contentDescription ="這是頭顯",modifier = Modifier.size(40.dp).clip(CircleShape))Spacer(modifier = Modifier.width(8.dp))Column {Text(text = item.name);Spacer(modifier = Modifier.height(8.dp))Text(text = item.desc);}}}class Item(val name:String,val desc:String){}}

?