Android 开发 UI 新技能，你 get 这个新技能了吗？(附源码详解)

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

约束条件

=======================================================================

1. Android Studio: 4.0 及以上

2. 支持安卓版本:Android API 21(即 5.0)及以上

3. 必须使用 kotlin 语言

优点

=====================================================================

1. 代码更少

少了 xml,少了 activity 和 xml 之间的关联.

2. 双向绑定

数据变化了,UI 就自动变化.

缺点

=====================================================================

1. 含有参数的 Composable 函数不能直接预览.

2. Composable 函数必须添加 @Preview 注解才能预览.

3. 代码修改后,需要重新编译才能预览.

4. 目前还不完善,相比于 Flutter,还处于幼儿园水平.

5. 相比于 xml 画页面布局,效率会有降低.

常见控件使用样例

===========================================================================

1. 文本显示

Text(text = "众鸟高飞尽，孤云独去闲。相看两不厌，只有敬亭山。")

2. 文本输入框

val state = +state { "Text Field to input" }

TextField(

value = state.value,

onValueChange = { state.value = it }

)

3. 按钮

Button(text = "咬我啊", onClick = { Log.v("test", "被咬了") })

4.弹出框

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

)

}

}

}

5. 开关