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

运行效果

相关推荐
游戏开发爱好者825 分钟前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Jimmmmmmm31 分钟前
pnpm如何避免幻影依赖:从node_modules演进史说起
前端
拾光拾趣录32 分钟前
如何优雅地实现每 5 秒轮询请求?
前端·javascript
snowbitx40 分钟前
Vue开发尝试一下
前端
前端缘梦44 分钟前
JavaScript 高频面试题精讲:var、let、const 与类型系统全解析
前端·面试
阿慧勇闯大前端44 分钟前
TypeScript 从入门到放弃any:老大说再写 any 就扣钱!
前端
AI悦创Python辅导1 小时前
路径分析到底怎么玩?一文搞懂!
前端
mrsk1 小时前
用魔塔来体验一把NLP(机械学习)
前端·机器学习·面试
袋鱼不重1 小时前
Vue3 Effect源码解析
前端·javascript·vue.js
福娃B1 小时前
【React】React 状态管理与组件通信:Zustand vs Redux📦
前端·react.js·前端框架