Compose列表与LazyColumn性能优化实战 - 第3节 📋 基本签名

🧩 核心概念 LazyColumn 骨架

LazyColumn 是 Compose 中实现垂直滚动列表的核心组件，只组合可见项，性能优异。通过 items()、item() 及其混合使用，可以灵活构建列表、分隔线、头部尾部，并优雅处理空状态。

📦 1. items() 函数数据集合

📋 基本签名

items(count) 或 items(list) 基于数据源生成列表项。

items(5) – 渲染 5 个索引项
items(fruits) – 遍历集合，提供 item 上下文
支持 key 参数优化重组

🧪 代码示例

@Composable
fun FruitList() {
    val fruits = listOf("🍎苹果", "🍌香蕉", "🍇葡萄", "🍊橙子")
    LazyColumn {
        items(fruits) { fruit ->
            Text(text = fruit, modifier = Modifier.padding(12.dp))
        }
    }
}

🧩 2. item() 函数单一项

📌 用途

插入单个静态或动态组件，常用于标题、分隔线、加载更多、广告位。

item { Header() }
item { Divider() }
可多次调用，按顺序排列

🧪 代码示例

LazyColumn {
    item { 
        Text("🎯 今日推荐", 
             style = MaterialTheme.typography.h5)
    }
    items(recommendList) { item ->
        ListRow(item)
    }
    item {
        Divider(thickness = 2.dp)
    }
}

🔀 3. 混合使用 item + items 组合

将 item() 与 items() 按任意顺序组合，构建复杂列表布局。

组合模式	典型场景	示例
item + items	标题 + 列表	item{Header()} → items(data){...}
items + item	列表 + 底部按钮	items(list){...} → item{Footer()}
item + items + item	头部 + 列表 + 尾部	最常用混合结构
多个 item 穿插	分隔线、广告、加载指示器	item{AdBanner()} → items(...)

🧪 混合代码实战

LazyColumn {
    item { 
        Text("📚 课程列表", 
             modifier = Modifier.padding(16.dp))
    }
    items(courses) { course ->
        CourseCard(course)
    }
    item {
        Text("— 没有更多了 —",
             modifier = Modifier.padding(16.dp))
    }
    // 也可以插入空状态判断
}

🫙 4. 空状态处理当列表为空

📐 推荐模式

使用 if-else 在 LazyColumn 内容中判断，或包裹 Box 展示空占位。

✅ 方式一：if (list.isEmpty()) item { EmptyView() }
✅ 方式二：LazyColumn 外包裹条件渲染
💡 空状态建议使用生动插画 + 提示文字

🧪 空状态代码

@Composable
fun NoteList(notes: List<String>) {
    LazyColumn {
        if (notes.isEmpty()) {
            item {
                EmptyStateView(
                    message = "📭 还没有笔记，点击 + 添加"
                )
            }
        } else {
            items(notes) { note ->
                NoteItem(note)
            }
        }
    }
}

空状态示意 · 可自定义占位图

⚡ 性能小贴士最佳实践

✅ 为 items() 指定 key 提升 diff 效率
✅ 避免在 LazyColumn 内嵌套 Column 或 LazyColumn
✅ 使用 remember + 不可变数据
✅ 空状态使用 item 而非外部 if，保持列表稳定

📋 LazyColumn 基本用法 items() · item() · 混合 · 空状态

📋 基本签名

🧪 代码示例

📌 用途

🧪 代码示例

🧪 混合代码实战

📐 推荐模式

🧪 空状态代码