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

Myth丶恋晨 2023-07-10 11:20 14阅读 0赞

# Jetpack Compose是什么? #

Jetpack Compose 是安卓用于构建UI的一种新方式,采用代码而非xml文件方式，写法与Flutter非常相似。  
官方主页：[https://developer.android.google.cn/jetpack/compose][https_developer.android.google.cn_jetpack_compose]  
官方Demo：[https://github.com/android/compose-samples/tree/master/JetNews][https_github.com_android_compose-samples_tree_master_JetNews]  
官方入门指导: [https://developer.android.google.cn/jetpack/compose/tutorial][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 = "众鸟高飞尽，孤云独去闲。相看两不厌，只有敬亭山。")

![format_png][]

## 2. 文本输入框 ##

val state = +state { "Text Field to input" }
    TextField(
            value = state.value,
            onValueChange = { state.value = it }
    )

![format_png 1][]

## 3. 按钮 ##

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

![format_png 2][]

## 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
                )
            }
        }
    }

![format_png 3][]

## 5. 开关 ##

MaterialTheme {
        val checkedState = +state { true }
        Switch(
                checked = checkedState.value,
                onCheckedChange = { checkedState.value = it }
        )
    }

![format_png 4][]

## 6. 单选框 ##

MaterialTheme {
        RadioButton(selected = true,
                onSelect = { }
        )
    }

![format_png 5][]

## 7. 复选框 ##

MaterialTheme {
        val checkedState = +state { true }
        Checkbox(
                checked = checkedState.value,
                onCheckedChange = { checkedState.value = it }
        )
    }

![format_png 6][]

## 8. 单选框组 ##

MaterialTheme {
        val radioOptions = listOf("A", "B", "C")
        val (selectedOption, onOptionSelected) = +state { radioOptions[0] }
        RadioGroup(
                options = radioOptions,
                selectedOption = selectedOption,
                onSelectedChange = onOptionSelected
        )
    }

![format_png 7][]

## 9.图片 ##

Container(modifier = Height(300.dp) wraps Expanded) {
        Clip(shape = RoundedCornerShape(4.dp)) {
            DrawImage(+imageResource(R.drawable.img_0))
        }
    }

![format_png 8][]

# 源代码 #

[https://github.com/cxyzy1/Jetpack-Compose-Demos][https_github.com_cxyzy1_Jetpack-Compose-Demos]  
**推荐阅读：[37岁老码农现身说法：那些年，我走过的弯路][37]**

作者：程序园中猿  
链接：https://www.jianshu.com/p/4289c2271c95

[https_developer.android.google.cn_jetpack_compose]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.android.google.cn%2Fjetpack%2Fcompose
[https_github.com_android_compose-samples_tree_master_JetNews]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fandroid%2Fcompose-samples%2Ftree%2Fmaster%2FJetNews
[https_developer.android.google.cn_jetpack_compose_tutorial]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.android.google.cn%2Fjetpack%2Fcompose%2Ftutorial
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY5Nzg5LTNkYzkxMWFkOTI3MjM4YzA_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy8yNjQvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY5Nzg5LTIyZjZlMjdhMGRkMGRmNjM_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy8zMTcvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY5Nzg5LWM5ZDE0NmU4NGFiOThjZjE_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy8xMDUvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY5Nzg5LTE5ZGJkZTlhNTlhYzYzMTQ_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy8yNTgvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY5Nzg5LWRhMzM1NzkzMDNlYWYzMjc_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy8xMDEvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY5Nzg5LTk3ZTg2Y2U4NDhlZDYxZmQ_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy8zNC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY5Nzg5LWMzZTJiNTJhMmQwZGQ3ZTg_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy80MS9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY5Nzg5LTI4ZWRmNzA5MjA4MmIzMGI_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy84Ni9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY5Nzg5LWIyNzIzNjY3ZTE5OGZlZTE_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy8zMTYvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[https_github.com_cxyzy1_Jetpack-Compose-Demos]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fcxyzy1%2FJetpack-Compose-Demos
[37]: https://www.jianshu.com/p/8bab31550431