企业官网建设流程全解析

一、Compose 重组

1、基本介绍

1. 重组是 Compose 更新的唯一方式，当状态变化时，Compose 会重新执行受影响的 Composable 函数，生成新的 UI 描述

2. MutableState<T>是一个可观察的状态容器，它持有一个值，当这个值改变时，会通知所有订阅它的 Composable 函数进行重组

3. remember 是一个 Composable 函数，用于在 Composable 函数重组时记住一个值

2、演示

（1）演示 1

@ComposablefunCounterDemo(){varcountbyremember{mutableStateOf(0)}println("CounterDemo 重组，count:$count")Button(onClick={count++}){Text("点击了$count次")}}

1. 启动应用，输出结果如下

CounterDemo 重组，count: 0

2. 点击按钮，按钮文本发生变化，输出结果如下

CounterDemo 重组，count: 1

（2）演示 2

varnum=10@ComposablefunCounterDemo2(){println("CounterDemo2 重组，num:$num")Column{Button(onClick={num++}){Text("点击了$num次")}Button(onClick={println("[查看] 点击了$num次")}){Text("查看 num")}}}

1. 启动应用，输出结果如下

CounterDemo2 重组，num: 10

2. 点击第一个按钮，按钮文本未发生变化，无输出结果

3. 点击第二个按钮，输出结果如下

[查看] 点击了 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")}}}

1. 启动应用，输出结果如下

CounterDemo3 重组，num: 10

2. 点击第一个按钮，按钮文本发生变化，输出结果如下

CounterDemo3 重组，num: 11

3. 点击第二个按钮，输出结果如下

[查看] 点击了 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、演示

1. 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)}}

2. 动态数据的 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)}}

3. 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)}}

4. 带有列表头部的列表

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 的替代

1. Column 用于垂直方向排列子组件，即从上到下

2. Row 用于水平方向排列子组件，即从左到右

2、演示

1. 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))}

2. 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))}