阅读前请点击右上角“关注”，每天免费获取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

约束条件

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. 文本显示

<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架構解析 的文章

關鍵字: DIALOG 新技能 Studio