閱讀前請點擊右上角“關注”,每天免費獲取Android知識解析及面試解答。Android架構解析,只做職場乾貨,完全免費分享!
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畫頁面佈局,效率會有降低.
常見控件使用樣例
1. 文本顯示
<code>Text(text = "眾鳥高飛盡,孤雲獨去閒。相看兩不厭,只有敬亭山。")
/<code>
2. 文本輸入框
<code>val state = +state { "Text Field to input" }
TextField(
value = state.value,
onValueChange = { state.value = it }
)
/<code>
3. 按鈕
<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>
5. 開關
<code>MaterialTheme {
val checkedState = +state { true }
Switch(
checked = checkedState.value,
onCheckedChange = { checkedState.value = it }
)
}
/<code>
6. 單選框
<code>MaterialTheme {
RadioButton(selected = true,
onSelect = { }
)
}
/<code>
7. 複選框
<code>MaterialTheme {
val checkedState = +state { true }
Checkbox(
checked = checkedState.value,
onCheckedChange = { checkedState.value = it }
)
}
/<code>
8. 單選框組
<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
閱讀更多 Android架構解析 的文章