Android Jetpack Compose - Compose 重组、AlertDialog、LazyColumn、Column 与 Row

一、Compose 重组

1、基本介绍

重组是 Compose 更新的唯一方式，当状态变化时，Compose 会重新执行受影响的 Composable 函数，生成新的 UI 描述
MutableState<T> 是一个可观察的状态容器，它持有一个值，当这个值改变时，会通知所有订阅它的 Composable 函数进行重组
remember 是一个 Composable 函数，用于在 Composable 函数重组时记住一个值

2、演示

（1）演示 1

kotlin 复制代码

@Composable
fun CounterDemo() {
    var count by remember { mutableStateOf(0) }

    println("CounterDemo 重组，count: $count")

    Button(onClick = { count++ }) {
        Text("点击了 $count  次")
    }
}

启动应用，输出结果如下

CounterDemo 重组，count: 0
点击按钮，按钮文本发生变化，输出结果如下

CounterDemo 重组，count: 1

（2）演示 2

kotlin 复制代码

var num = 10

@Composable
fun CounterDemo2() {
    println("CounterDemo2 重组，num: $num")

    Column {
        Button(onClick = { num++ }) {
            Text("点击了 $num  次")
        }

        Button(onClick = {
            println("[查看] 点击了 $num 次")
        }) {
            Text("查看 num")
        }
    }
}

启动应用，输出结果如下

CounterDemo2 重组，num: 10
点击第一个按钮，按钮文本未发生变化，无输出结果
点击第二个按钮，输出结果如下

[查看] 点击了 12 次

（3）演示 3

kotlin 复制代码

val count: MutableState<Int> = mutableStateOf(10)

@Composable
fun CounterDemo3() {
    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

kotlin 复制代码

var showDialog by remember { 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 的基本使用

kotlin 复制代码

val items = 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
        )
    }
}

kotlin 复制代码

val dataList = listOf("苹果", "香蕉", "橙子", "葡萄")

LazyColumn {
    itemsIndexed(dataList) { index, item ->
        Text(
            text = "第 ${index + 1} 项：$item",
            modifier = Modifier.padding(16.dp),
            fontSize = 18.sp
        )
    }
}

动态数据的 LazyColumn

kotlin 复制代码

val dataList = 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
        )
    }
}

kotlin 复制代码

var dataList by remember { 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 的点击事件

kotlin 复制代码

val dataList = remember { mutableStateListOf("苹果", "香蕉", "橙子", "葡萄") }

LazyColumn {
    itemsIndexed(dataList) { index, item ->
        Text(
            text = "第 ${index + 1} 项：$item",
            modifier = Modifier
                .padding(16.dp)
                .clickable { dataList.remove(item) },
            fontSize = 18.sp
        )
    }
}

带有列表头部的列表

kotlin 复制代码

val dataList = 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 的基本使用

kotlin 复制代码

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 的基本使用

kotlin 复制代码

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