Jetpack Compose是什麼?
Jetpack Compose 是安卓用於構建UI的一種新方式,採用代碼而非xml文件方式，寫法與Flutter非常相似。
官方主頁：https://developer.android.google.cn/jetpack/compose
官方Demo：https://github.com/android/compose-samples/tree/master/JetNews
官方入門指導: https://developer.android.google.cn/jetpack/compose/tutorial
約束條件
Android Studio: 4.0及以上支持安卓版本:Android API 21(即5.0)及以上必須使用kotlin語言優點
代碼更少 少了xml,少了activity和xml之間的關聯.雙向綁定 數據變化了,UI就自動變化.缺點
含有參數的Composable函數不能直接預覽.Composable函數必須添加@Preview註解才能預覽.代碼修改後,需要重新編譯才能預覽.目前還不完善,相比於Flutter,還處於幼兒園水平.相比於xml畫頁面佈局,效率會有降低.常見控件使用樣例
文本顯示<code>Text(text = "眾鳥高飛盡，孤雲獨去閒。相看兩不厭，只有敬亭山。")/<code>
<code>val state = +state { "Text Field to input" }
TextField(
value = state.value,
onValueChange = { state.value = it }
)/<code>
<code>Button(text = "咬我啊", onClick = { Log.v("test", "被咬了") })/<code>
4.彈出框
<code>MaterialTheme {
Column {
val openDialog = +state { false }
Button("Click me", onClick = {
openDialog.value = true
})
if (openDialog.value) {
AlertDialog(
onCloseRequest = {
openDialog.value = false
},
title = {
Text(text = "Alert Dialog Title")
},
text = {
Text("Alert Dialog content")
},
confirmButton = {
Button(
"Confirm",
onClick = {
openDialog.value = false
})
},
dismissButton = {
Button(
"Cancel",
onClick = {
openDialog.value = false
})
},
buttonLayout = AlertDialogButtonLayout.Stacked
)
}
}
}/<code>
<code>MaterialTheme {
val checkedState = +state { true }
Switch(
checked = checkedState.value,
onCheckedChange = { checkedState.value = it }
)
}/<code>
<code>MaterialTheme {
RadioButton(selected = true,
onSelect = { }
)
}/<code>
<code>MaterialTheme {
val checkedState = +state { true }
Checkbox(
checked = checkedState.value,
onCheckedChange = { checkedState.value = it }
)
}/<code>
<code>MaterialTheme {
val radioOptions = listOf("A", "B", "C")
val (selectedOption, onOptionSelected) = +state { radioOptions[0] }
RadioGroup(
options = radioOptions,
selectedOption = selectedOption,
onSelectedChange = onOptionSelected
)
}/<code>
9.圖片
<code>Container(modifier = Height(300.dp) wraps Expanded) {
Clip(shape = RoundedCornerShape(4.dp)) {
DrawImage(+imageResource(R.drawable.img_0))
}
}/<code>
源代碼
https://github.com/cxyzy1/Jetpack-Compose-Demos
文章不易，如果大家喜歡這篇文章，或者對你有幫助希望大家多多，點贊，轉發，關注 哦。文章會持續更新的。絕對乾貨！！！