Android Jetpack Compose - Compose 重组、AlertDialog、LazyColumn、Column 与 Row
一、Compose 重组
1、基本介绍
重组是 Compose 更新的唯一方式，当状态变化时，Compose 会重新执行受影响的 Composable 函数，生成新的 UI 描述
MutableState<T>是一个可观察的状态容器，它持有一个值，当这个值改变时，会通知所有订阅它的 Composable 函数进行重组remember 是一个 Composable 函数，用于在 Composable 函数重组时记住一个值
2、演示
（1）演示 1
@ComposablefunCounterDemo(){varcountbyremember{mutableStateOf(0)}println("CounterDemo 重组，count:$count")Button(onClick={count++}){Text("点击了$count次")}}- 启动应用，输出结果如下
CounterDemo 重组，count: 0- 点击按钮，按钮文本发生变化，输出结果如下
CounterDemo 重组，count: 1（2）演示 2
varnum=10@ComposablefunCounterDemo2(){println("CounterDemo2 重组，num:$num")Column{Button(onClick={num++}){Text("点击了$num次")}Button(onClick={println("[查看] 点击了$num次")}){Text("查看 num")}}}- 启动应用，输出结果如下
CounterDemo2 重组，num: 10点击第一个按钮，按钮文本未发生变化，无输出结果
点击第二个按钮，输出结果如下
[查看] 点击了 12 次（3）演示 3
valcount:MutableState<Int>=mutableStateOf(10)@ComposablefunCounterDemo3(){println("CounterDemo3 重组，num:${count.value}")Column{Button(onClick={count.value++}){Text("点击了${count.value}次")}Button(onClick={println("[查看] 点击了${count.value}次")}){Text("查看 count")}}}- 启动应用，输出结果如下
CounterDemo3 重组，num: 10- 点击第一个按钮，按钮文本发生变化，输出结果如下
CounterDemo3 重组，num: 11- 点击第二个按钮，输出结果如下
[查看] 点击了 11 次二、AlertDialog
varshowDialogbyremember{mutableStateOf(false)}Button(onClick={showDialog=true}){Text("显示对话框")}if(showDialog){AlertDialog(onDismissRequest={showDialog=false},title={Text("确认删除")},text={Text("确定要删除这条记录吗？")},confirmButton={Button(onClick={showDialog=false}){Text("确定")}},dismissButton={Button(onClick={showDialog=false}){Text("取消")}})}三、LazyColumn
1、基本介绍
LazyColumn 是 Compose 中用于显示垂直滚动列表的组件，它只渲染当前屏幕可见的列表项，适用于大量数据列表的显示
2、演示
- LazyColumn 的基本使用
valitems=listOf("Item 1","Item 2","Item 3","Item 4","Item 5")LazyColumn{items(items.size){index->Text(text=items[index],modifier=Modifier.padding(16.dp),fontSize=18.sp)}}valdataList=listOf("苹果","香蕉","橙子","葡萄")LazyColumn{itemsIndexed(dataList){index,item->Text(text="第${index+1}项：$item",modifier=Modifier.padding(16.dp),fontSize=18.sp)}}- 动态数据的 LazyColumn
valdataList=remember{mutableStateListOf("苹果","香蕉","橙子","葡萄")}Column{LazyColumn{itemsIndexed(dataList){index,item->Text(text="第${index+1}项：$item",modifier=Modifier.padding(16.dp),fontSize=18.sp)}}Button(onClick={dataList.add("西瓜")}){Text(text="添加",fontSize=18.sp)}}vardataListbyremember{mutableStateOf(listOf("苹果","香蕉","橙子","葡萄"))}Column{LazyColumn{itemsIndexed(dataList){index,item->Text(text="第${index+1}项：$item",modifier=Modifier.padding(16.dp),fontSize=18.sp)}}Button(onClick={dataList=dataList+"西瓜"}){Text(text="添加",fontSize=18.sp)}}- LazyColumn 的点击事件
valdataList=remember{mutableStateListOf("苹果","香蕉","橙子","葡萄")}LazyColumn{itemsIndexed(dataList){index,item->Text(text="第${index+1}项：$item",modifier=Modifier.padding(16.dp).clickable{dataList.remove(item)},fontSize=18.sp)}}- 带有列表头部的列表
valdataList=remember{mutableStateListOf("苹果","香蕉","橙子","葡萄")}LazyColumn{item{Text(text="列表头部",modifier=Modifier.padding(16.dp),fontSize=20.sp,fontWeight=FontWeight.Bold)Divider()}itemsIndexed(dataList){index,item->Text(text="第${index+1}项：$item",modifier=Modifier.padding(16.dp).clickable{dataList.remove(item)},fontSize=18.sp)}}四、Column 与 Row
1、基本介绍
- Column 和 Row 是 Compose 中用于线性排列子组件的核心布局容器，本质上是 Android 传统布局中 LinearLayout 的替代
Column 用于垂直方向排列子组件，即从上到下
Row 用于水平方向排列子组件，即从左到右
2、演示
- Column 的基本使用
Column(modifier=Modifier.background(Color.LightGray).padding(16.dp)){Text(text="第一个垂直子组件",modifier=Modifier.padding(4.dp))Text(text="第二个垂直子组件",modifier=Modifier.padding(4.dp))Text(text="第三个垂直子组件",modifier=Modifier.padding(4.dp))}- Row 的基本使用
Row(modifier=Modifier.background(Color.LightGray).padding(16.dp)){Text(text="第一个水平子组件",modifier=Modifier.padding(4.dp))Text(text="第二个水平子组件",modifier=Modifier.padding(4.dp))Text(text="第三个水平子组件",modifier=Modifier.padding(4.dp))}