一、概念

1.1 Compose優(yōu)勢

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

1.2 聲明式UI

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

?

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

二、使用

2.1?添加依賴

查看官方最新版本

兼容性對應關系

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

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

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

dependencies {//Composedef composeBom = platform('androidx.compose:compose-bom:2023.01.00')implementation composeBomandroidTestImplementation composeBom//主題implementation 'androidx.compose.material3:material3'//預覽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調用

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

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

三、預覽效果 @Preview

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

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

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

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

3.1?對屏幕級組合函數使用預覽失敗

原因：系統(tǒng)無法正確實例化?ViewModel?因為它依賴于運行中的?Android?系統(tǒng)，而預覽系統(tǒng)只有UI相關代碼。

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

@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運行時才能獲取的類預覽失敗

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

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

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