【Compose multiplatform教程14】【组件】LazyColumn组件

查看全部组件https://blog.csdn.net/b275518834/article/details/144751353

LazyColumn

功能说明:针对需要显示大量列表数据的情况进行优化,它会根据屏幕的可见区域动态地加载和显示内容,避免一次性加载所有数据,从而显著提高性能和内存使用效率,确保界面的流畅性和响应性。

示例场景:在社交媒体应用中,动态列表可能包含大量的帖子,使用 LazyColumn 可以让用户在滚动浏览时快速加载可见区域的内容;在新闻客户端,长长的新闻列表也能通过此组件高效展示。

垂直的列表:

Kotlin 复制代码
@Composable
    fun SimpleLazyRowExample() {
        LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            val items = listOf("苹果", "香蕉", "橙子", "葡萄")
            items.forEach { item ->
                item {
                    Text(
                        text = item,
                        modifier = Modifier
                            .padding(horizontal = 8.dp)
                    )
                }
            }
        }
    }

运行效果;

垂直的列表

Kotlin 复制代码
@Composable
    fun SimpleLazyColumnExample() {
        LazyColumn(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            val items = listOf("苹果", "香蕉", "橙子", "葡萄")
            items.forEach { item ->
                item {
                    Text(
                        text = item,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(vertical = 8.dp)
                    )
                }
            }
        }
    }

运行效果;

Grid网格效果

Kotlin 复制代码
 @Composable
    fun GridViewLikeLazyColumnExample() {
        LazyVerticalGrid(
            columns = GridCells.Fixed(3), // 设置为3列
            contentPadding = PaddingValues(16.dp), // 内容的内边距
            verticalArrangement = Arrangement.spacedBy(8.dp), // 垂直方向上列表项的间距
            horizontalArrangement = Arrangement.spacedBy(8.dp) // 水平方向上列表项的间距
        ) {
            val items = listOf("苹果", "香蕉", "橙子", "葡萄", "芒果", "草莓", "西瓜", "菠萝")
            items.forEach { item ->
                item {
                    Text(
                        text = item,
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(8.dp)
                    )
                }
            }
        }
    }

运行效果

相关推荐
青皮桔21 分钟前
CSS实现百分比水柱图
前端·css
影子信息26 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月27 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201831 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿32 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说2 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
androidwork2 小时前
深入解析内存抖动:定位与修复实战(Kotlin版)
android·kotlin
梦天20152 小时前
android核心技术摘要
android