知是行的主意,行是知的功夫。这篇文章主要讲述阿里大牛又一波骚操作,安卓UI开发新技能-Jetpack Compose,绝了相关的知识,希望能为你提供帮助。
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画页面布局,效率会有降低.
- 文本显示
Text(text = "众鸟高飞尽,孤云独去闲。相看两不厌,只有敬亭山。")
文章图片
- 文本输入框
val state = +state { "Text Field to input" }
TextField(
value = https://www.songbingjia.com/android/state.value,
onValueChange = { state.value = it }
)
文章图片
- 按钮
Button(text = "咬我啊", onClick = { Log.v("test", "被咬了") })
文章图片
4.弹出框
MaterialTheme {
Column {
val openDialog = +state { false }Button("Click me", onClick = {
openDialog.value = https://www.songbingjia.com/android/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 = https://www.songbingjia.com/android/false
})
},
dismissButton = {
Button("Cancel",
onClick = {
openDialog.value = https://www.songbingjia.com/android/false
})
},
buttonLayout = AlertDialogButtonLayout.Stacked
)
}
}
}
文章图片
- 开关
MaterialTheme {
val checkedState = +state { true }
Switch(
checked = checkedState.value,
onCheckedChange = { checkedState.value = https://www.songbingjia.com/android/it }
)
}
【阿里大牛又一波骚操作,安卓UI开发新技能-Jetpack Compose,绝了】
文章图片
- 单选框
MaterialTheme {
RadioButton(selected = true,
onSelect = { }
)
}
文章图片
- 复选框
MaterialTheme {
val checkedState = +state { true }
Checkbox(
checked = checkedState.value,
onCheckedChange = { checkedState.value = https://www.songbingjia.com/android/it }
)
}
文章图片
- 单选框组
MaterialTheme {
val radioOptions = listOf("A", "B", "C")
val (selectedOption, onOptionSelected) = +state { radioOptions[0] }
RadioGroup(
options = radioOptions,
selectedOption = selectedOption,
onSelectedChange = onOptionSelected
)
}
文章图片
9.图片
Container(modifier = Height(300.dp) wraps Expanded) {
Clip(shape = RoundedCornerShape(4.dp)) {
DrawImage(+imageResource(R.drawable.img_0))
}
}
文章图片
源代码https://github.com/cxyzy1/Jetpack-Compose-Demos
文章不易,如果大家喜欢这篇文章,或者对你有帮助希望大家多多,点赞,转发,关注?哦。文章会持续更新的。绝对干货!!!
推荐阅读
- ionic app 热更新
- 移动APP设备锁功能开发中的问题
- 掌握使用gitlab ci构建Android包的正确方式
- 简单的android计分器(使用view modulelive datadata binding)
- hibernate.cfg.xml 中如何设置 hbm.xml 和 Annotations 的 mapping
- google play store的app数据分析
- 安卓逆向之Java学习-03
- Android 多线程3秒执行一次
- Android项目——HttpUrlConnection上传文件(图片)