一、概念

1.1 Compose優(yōu)勢(shì)

• 由一個(gè)個(gè)可以組合的Composable函數(shù)拼成界面，方便維護(hù)和復(fù)用。
• 布局模型不允許多次測量，提升了性能。
• Compose可以和View互操作（相互包含對(duì)方）。

1.2 聲明式UI

APP展示的數(shù)據(jù)絕大多數(shù)不是靜態(tài)數(shù)據(jù)而是會(huì)實(shí)時(shí)更新，傳統(tǒng)的命令式UI寫法更新界面繁瑣且容易同步錯(cuò)誤。Compose會(huì)對(duì)界面用到的數(shù)據(jù)自動(dòng)進(jìn)行訂閱（屬性委托），當(dāng)數(shù)據(jù)變化時(shí)界面會(huì)自動(dòng)更新（同為數(shù)據(jù)和界面關(guān)聯(lián)，databinding只能更新組件的值，Compose可以控制組件切換顯示）。

?

聲明式UI	只需要把界面寫出來，不需要再手動(dòng)寫代碼去刷新界面。重新生成整個(gè)屏幕界面成本高昂，Compose生成界面后，數(shù)據(jù)變動(dòng)只執(zhí)行必要的重組（局部刷新）。
命令式UI	xml寫的界面，當(dāng)數(shù)據(jù)變了就需要Java/Kotlin手動(dòng)（命令指揮）刷新，即 findViewById( ) 遍歷樹拿到控件，再 setText( ) 設(shè)置數(shù)據(jù)改變節(jié)點(diǎn)。

二、使用

2.1?添加依賴

查看官方最新版本

兼容性對(duì)應(yīng)關(guān)系

????????BoM物料清單：隨著依賴的庫越來越多，為了保證不同庫不同版本之間能正常配合，引入依賴時(shí)具體的庫不指定版本，而是由BoM管理。

????????最低版本：Kotlin ≥ 1.5.10、Android ≥ 5.0（API21）、AndroidStudio ≥ Arctic Fox 2020.3.1。

android {buildFeatures {compose true    //啟用Compose功能}composeOptions {//見上方鏈接，此處定義的Kotlin編譯器擴(kuò)展版本需要對(duì)應(yīng)兼容的Kotlin版本kotlinCompilerExtensionVersion = "1.4.2"}
}

dependencies {//Composedef composeBom = platform('androidx.compose:compose-bom:2023.01.00')implementation composeBomandroidTestImplementation composeBom//主題implementation 'androidx.compose.material3:material3'//預(yù)覽implementation 'androidx.compose.ui:ui-tooling-preview'debugImplementation 'androidx.compose.ui:ui-tooling'//UI測試androidTestImplementation 'androidx.compose.ui:ui-test-junit4'debugImplementation 'androidx.compose.ui:ui-test-manifest'//可選搭配implementation 'androidx.activity:activity-compose:1.7.0'   //Activityimplementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'   //ViewModelimplementation 'androidx.compose.runtime:runtime-livedata'  //LiveDataimplementation 'androidx.constraintlayout:constraintlayout-compose:1.0.1'   //ConstraintLayoutimplementation 'io.coil-kt:coil-compose:2.3.0' //Coilimplementation 'androidx.navigation:navigation-compose:2.5.3'   //Navigation//    implementation "com.google.accompanist:accompanist-appcompat-theme:0.28.0"  //AppCompatTheme
}

?2.2 Activity調(diào)用

需要繼承的是ComponentActivity，使用 setContent { } 替換 setContentView( )。

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {    // 設(shè)置顯示內(nèi)容，用來替換setContentViewShow("Hello World!")}}
}

三、預(yù)覽效果 @Preview

使用該注解的組合函數(shù)可以在AndroidStudio右上角直接預(yù)覽效果和點(diǎn)擊交互，也能直接部署該預(yù)覽在真機(jī)或模擬器上查看效果和點(diǎn)擊交互。AS按出prev能快速打出模板代碼。

• ?只能修飾無參可組合函數(shù)：可以用無參函數(shù)包裹有參函數(shù)傳個(gè)值給它來預(yù)覽。?

neme	設(shè)置的該名稱會(huì)在布局預(yù)覽中顯示。
showBackground	預(yù)覽默認(rèn)是不顯示背景色的，設(shè)為true才顯示。
backgroundColor	設(shè)置背景顏色。
showDecoration	是否顯示Statusbar和Toolbar，true為顯示。
group	為該P(yáng)review設(shè)置group名字，可以在UI中以group為單位顯示。
fontScale	可以在預(yù)覽中對(duì)字體放大，范圍是從0.01。
showSystemUi	設(shè)為?true 顯示系統(tǒng)界面（狀態(tài)欄，屏幕按鍵）。
widthDp heightDp	預(yù)覽區(qū)域的大小（單位為dp），和?showSystemUI 互斥。
device	預(yù)覽機(jī)型（Devices.DESKTOP、Devices.PIXEL_4、Devices.NEXUS_6）。
apiLevel	預(yù)覽不同版本的效果

@Preview
@Composable
fun WrapperShow() {Show("Word")    //包裹一層再傳個(gè)值
}@Composable
fun Show(str: String) {Text(text = "Hello ${str}!")
}

3.1?對(duì)屏幕級(jí)組合函數(shù)使用預(yù)覽失敗

原因：系統(tǒng)無法正確實(shí)例化?ViewModel?因?yàn)樗蕾囉谶\(yùn)行中的?Android?系統(tǒng)，而預(yù)覽系統(tǒng)只有UI相關(guān)代碼。

解決：抽離出一個(gè)只依賴于狀態(tài)類的組合函數(shù)。

@Composable
fun DemoScreen(viewModel: DemoViewModel = viewModel(),
){DemoContent(viewModel.demoState)
}@Composable
private fun DemoContent(demoState:DemoState
){/* ... */
}@Composable
@Preview
private fun PreviewDemoContent(){DemoContent(remember{DemoState()})
}

3.2?引用了Android運(yùn)行時(shí)才能獲取的類預(yù)覽失敗

原因：像 Application 類在預(yù)覽系統(tǒng)中是不存在的。

解決：通過?LocalInspectionMode.current?來判斷當(dāng)前是否運(yùn)行于預(yù)覽系統(tǒng)中，true就使用固定字符串。

@Composable
fun MyTest(){Text(text=if(LocalInspectionMode.current) "預(yù)覽中" else MyClass.getDesc())
}