ComposeUI中的数组使用

数组声明

Kotlin中声明和初始化数组的几种方式。

Name
基本语法
Type
array-syntax
Description
- var array = listOf(element1, element2)
Name
数组类型
Type
array-types
Description
- 基本类型数组
- 对象数组
- 可空类型数组
- List和MutableList

数组声明示例

// 不同的数组声明方式
val numbers = arrayOf<Int>()
val fruits = listOf("苹果", "香蕉", "橙子")
val zeros = Array(3) { 0 }

// 自定义数据类
data class Item(
    val id: String = UUID.randomUUID().toString(),
    var name: String
)

val items = listOf(
    Item(name = "项目1"),
    Item(name = "项目2")
)

列表渲染

使用LazyColumn和LazyRow渲染列表内容。

Name
渲染方式
Type
rendering
Description
- LazyColumn垂直列表
- LazyRow水平列表
- items函数
- itemsIndexed函数
Name
常见用法
Type
usage
Description
- 简单列表
- 自定义样式
- 分组列表
- 列表交互

列表渲染示例

@Composable
fun FruitsList() {
    val fruits = listOf("苹果", "香蕉", "橙子", "葡萄")
    
    LazyColumn {
        items(fruits) { fruit ->
            Text(text = fruit)
        }
        
        // 使用itemsIndexed显示索引
        itemsIndexed(fruits) { index, fruit ->
            Text(text = "${index + 1}. $fruit")
        }
    }
}

数组操作

常见的数组和List操作方法。

Name
基础操作
Type
basic-operations
Description
- 添加元素(add)
- 删除元素(remove)
- 插入元素(add at index)
- 更新元素
Name
高级操作
Type
advanced-operations
Description
- 列表排序(sorted)
- 列表过滤(filter)
- 列表映射(map)
- 列表归约(reduce)

数组操作示例

@Composable
fun ArrayOperationsDemo() {
    var numbers by remember { mutableStateOf(mutableListOf(1, 2, 3, 4, 5)) }
    
    Column {
        // 显示原始数组
        Text("原始数组: ${numbers.joinToString()}")
        
        Button(onClick = { numbers.add(6) }) {
            Text("添加数字")
        }
        
        Button(onClick = { 
            if (numbers.isNotEmpty()) numbers.removeLast() 
        }) {
            Text("删除最后一个")
        }
        
        // 显示偶数
        val evenNumbers = numbers.filter { it % 2 == 0 }
        Text("偶数: ${evenNumbers.joinToString()}")
        
        // 所有数字乘2
        val doubled = numbers.map { it * 2 }
        Text("乘2: ${doubled.joinToString()}")
    }
}

实用技巧

Compose中列表使用的最佳实践。

Name
性能优化
Type
optimization
Description
- key的使用
- 状态提升
- remember优化
- LazyList性能
Name
常见陷阱
Type
pitfalls
Description
- 状态管理
- 重组问题
- 列表更新
- 内存管理

最佳实践示例

@Composable
fun TodoList() {
    var todos by remember { mutableStateOf(listOf(
        "学习Kotlin",
        "练习Compose",
        "完成项目"
    )) }
    var newTodo by remember { mutableStateOf("") }
    
    Column {
        LazyColumn {
            items(
                items = todos,
                key = { it } // 使用内容作为key
            ) { todo ->
                Text(
                    text = todo,
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable { /* 处理点击 */ }
                        .padding(16.dp)
                )
            }
        }
        
        Row(
            modifier = Modifier.padding(16.dp)
        ) {
            TextField(
                value = newTodo,
                onValueChange = { newTodo = it },
                placeholder = { Text("新任务") }
            )
            
            Button(
                onClick = {
                    if (newTodo.isNotEmpty()) {
                        todos = todos + newTodo
                        newTodo = ""
                    }
                }
            ) {
                Text("添加")
            }
        }
    }
}