Android-Compose 列表组件详解

袁震2025-10-21 19:32

目录

一，前言

二，LazyColumn和LazyRow的使用

[2.1 coil](#2.1 coil)

[2.2 viewmodel](#2.2 viewmodel)

[2.3 LazyColumn使用](#2.3 LazyColumn使用)

[2.4 LazyRow使用](#2.4 LazyRow使用)

[2.5 LazyVerticalGrid使用](#2.5 LazyVerticalGrid使用)

[2.6 LazyHorizontalGrid](#2.6 LazyHorizontalGrid)

三，添加外边距

四，添加间隙

五，自定义宽度span

六，粘性标题

一，前言

在传统android中我们使用的列表组件是RecyclerView，但是在Compose中是没有RecyclerView组件的，它把列表组件分为了四个：LazyColumn，LazyRow，LazyVerticalGrid,LazyHorizontalGrid。从名称可以看出，LazyColumn 和 LazyRow 之间的区别就在于它们的列表项布局和滚动方向不同。LazyColumn 生成的是垂直滚动列表，而 LazyRow 生成的是水平滚动列表。LazyVerticalGrid 和 LazyHorizontalGrid 可组合项为在网格中显示列表项提供支持。延迟垂直网格会在可垂直滚动容器中跨多个列显示其列表项，而延迟水平网格则会在水平轴上有相同的行为。

二，LazyColumn和LazyRow的使用

2.1 coil

在compose中加载图片一般使用的是coil，下面我们介绍下coil是如何使用的：

首先在app的build.gradle中添加依赖：

bash 复制代码 
implementation 'io.coil-kt:coil-compose:2.0.0-rc03'

在activity中加载网络图片：

Kotlin 复制代码 
class MainActivityNew : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            AsyncImage(model = "https://img2.baidu.com/it/u=1025320646,221016220&fm=253&app=138&f=JPEG?w=800&h=1421",
                "", 
                contentScale = ContentScale.Fit)

        }
    }
}

运行效果图：

2.2 viewmodel

viewmodel在compose中的使用与kotlin中有所不同，下面讲一下使用：

首先添加依赖：

bash 复制代码 
implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.4.0"

然后创建viewmodel：

Kotlin 复制代码 
class MyViewModel :ViewModel() {

    var chats by mutableStateOf(
        listOf(
            Student("伽罗","20","https://img2.baidu.com/it/u=1025320646,221016220&fm=253&app=138&f=JPEG?w=800&h=1421"),
            Student("妲己","22","https://pic.rmb.bdstatic.com/bjh/240119/081fe6fa14028b1831aa89f81a8b81191308.jpeg"),
            Student("李白","25","https://img1.baidu.com/it/u=986348615,2122549478&fm=253&app=138&f=JPEG?w=800&h=1423")
        )
    )

在activity中使用：

Kotlin 复制代码 
class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyComposeTheme {
               Column (){

                   var viewModel : MyViewModel =viewModel()
                   AsyncImage(model = viewModel.chats.get(1).image, contentDescription = "")
                 
               }
                
            }
        }
    }
}

运行效果：

2.3 LazyColumn使用

1.创建viewmodel：

Kotlin 复制代码 
class ListViewModel :ViewModel() {

    var student by mutableStateOf(
        listOf(
            Student("伽罗","20","https://img2.baidu.com/it/u=1025320646,221016220&fm=253&app=138&f=JPEG?w=800&h=1421"),
            Student("妲己","22","https://pic.rmb.bdstatic.com/bjh/240119/081fe6fa14028b1831aa89f81a8b81191308.jpeg"),
            Student("李白","25","https://img1.baidu.com/it/u=986348615,2122549478&fm=253&app=138&f=JPEG?w=800&h=1423")
        )
    )
}
Kotlin 复制代码 
data class Student(var name:String,var age:String,var image:String)

2.使用：

Kotlin 复制代码 
class ListDemoActivity: ComponentActivity()  {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            var viewModel : ListViewModel = viewModel()
            LazyColumn(){
              items(viewModel.student){
                  Column {
                      Text(text = it.name)
                      Text(text = it.age)
                      AsyncImage(model = it.image,"", modifier = Modifier
                          .width(100.dp)
                          .height(300.dp), contentScale = ContentScale.Fit)
                  }
              }
            }
        }
    }
}

3.运行如下：

2.4 LazyRow使用

在activity中使用：

Kotlin 复制代码 
class ListDemoActivity: ComponentActivity()  {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            var viewModel : ListViewModel = viewModel()
            LazyRow(){
              items(viewModel.student){
                  Column {
                      Text(text = it.name)
                      Text(text = it.age)
                      AsyncImage(model = it.image,"", modifier = Modifier
                          .width(100.dp)
                          .height(300.dp), contentScale = ContentScale.Fit)
                  }
              }
            }
        }
    }
}

运行效果如下：

2.5 LazyVerticalGrid使用

在activity中使用：

Kotlin 复制代码 
class ListDemoActivity: ComponentActivity()  {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            var viewModel : ListViewModel = viewModel()
           
            LazyVerticalGrid(columns = GridCells.Fixed(2), //固定两列
                content = {
                    items(viewModel.student){
                        Column {
                            Text(text = it.name)
                            Text(text = it.age)
                            AsyncImage(model = it.image,"", modifier = Modifier
                                .width(100.dp)
                                .height(300.dp), contentScale = ContentScale.Fit)
                        }
                    }
                }
            )
        }
    }
}

自适应大小宽度：

Kotlin 复制代码 
class ListDemoActivity: ComponentActivity()  {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            var viewModel : ListViewModel = viewModel()
            LazyVerticalGrid(columns = GridCells.Adaptive(100.dp),//自适应宽度
                         ){
              items(viewModel.student){
                  Column(Modifier.background(it.color)) {
                      Text(text = it.name)
                      Text(text = it.age)
                      AsyncImage(model = it.image,"", modifier = Modifier
                          .width(100.dp)
                          .height(300.dp), contentScale = ContentScale.Fit)
                  }
              }
            }
        }
    }
}

2.6 LazyHorizontalGrid

在activity中使用：

Kotlin 复制代码 
class ListDemoActivity: ComponentActivity()  {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            var viewModel : ListViewModel = viewModel()
           
            LazyHorizontalGrid(rows = GridCells.Fixed(2), //固定两行
                content = {
                    items(viewModel.student){
                        Column {
                            Text(text = it.name)
                            Text(text = it.age)
                            AsyncImage(model = it.image,"", modifier = Modifier
                                .width(100.dp)
                                .height(300.dp), contentScale = ContentScale.Fit)
                        }
                    }
                }
            )
        }
    }
}

三，添加外边距

可以使用**contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)**给组件整体设置外边距：

Kotlin 复制代码 
class ListDemoActivity: ComponentActivity()  {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            var viewModel : ListViewModel = viewModel()
            LazyVerticalGrid(contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp), columns = GridCells.Fixed(2)){
              items(viewModel.student){
                  Column(Modifier.background(it.color)) {
                      Text(text = it.name)
                      Text(text = it.age)
                      AsyncImage(model = it.image,"", modifier = Modifier
                          .width(100.dp)
                          .height(300.dp), contentScale = ContentScale.Fit)
                  }
              }
            }
        }
    }
}

效果如下：

四，添加间隙

要为子元素之间添加空隙也很简单，指定一下arrangemnt为spacedBy即可

Kotlin 复制代码 
horizontalArrangement = Arrangement.spacedBy(12.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
Kotlin 复制代码 
class ListDemoActivity: ComponentActivity()  {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            var viewModel : ListViewModel = viewModel()
            LazyVerticalGrid(columns = GridCells.Fixed(2),//固定两列
                             verticalArrangement = Arrangement.spacedBy(10.dp),//垂直间隙
                             horizontalArrangement = Arrangement.spacedBy(10.dp) //水平间隙
                         ){
              items(viewModel.student){
                  Column(Modifier.background(it.color)) {
                      Text(text = it.name)
                      Text(text = it.age)
                      AsyncImage(model = it.image,"", modifier = Modifier
                          .width(100.dp)
                          .height(300.dp), contentScale = ContentScale.Fit)
                  }
              }
            }
        }
    }
}

显示效果如下：

五，自定义宽度span

如果想让某一元素占满一行，可以使用span来实现，代码如下：

Kotlin 复制代码 
class ListDemoActivity: ComponentActivity()  {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            var viewModel : ListViewModel = viewModel()
            LazyVerticalGrid(columns = GridCells.Adaptive(100.dp),//自适应宽度
                             verticalArrangement = Arrangement.spacedBy(10.dp),//垂直间隙
                             horizontalArrangement = Arrangement.spacedBy(10.dp) //水平间隙
                         ){
                item(span = {
                    // 占据最大宽度
                    GridItemSpan(maxLineSpan)
                }){
                    Column(Modifier.background(viewModel.one.color)) {
                        Text(text = viewModel.one.name)
                        Text(text = viewModel.one.age)
                        AsyncImage(model = viewModel.one.image,"", modifier = Modifier
                            .width(100.dp)
                            .height(300.dp), contentScale = ContentScale.Fit)
                    }
                }
              items(viewModel.student){
                  Column(Modifier.background(it.color)) {
                      Text(text = it.name)
                      Text(text = it.age)
                      AsyncImage(model = it.image,"", modifier = Modifier
                          .width(100.dp)
                          .height(300.dp), contentScale = ContentScale.Fit)
                  }
              }
            }
        }
    }
}

效果如下：

六，粘性标题

使用stickyHeader可以实现粘性标题，实现代码如下：

Kotlin 复制代码 
class ListDemoActivity: ComponentActivity()  {


    @OptIn(ExperimentalFoundationApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            var viewModel : ListViewModel = viewModel()

            LazyColumn(){
                stickyHeader {
                    Row(Modifier.background(Color.Gray).width(100.dp).height(50.dp)){
                        Text(text = "标题1")
                    }
                }
                items(viewModel.student){
                    Column {
                        Text(text = it.name)
                        Text(text = it.age)
                        AsyncImage(model = it.image,"", modifier = Modifier
                            .width(100.dp)
                            .height(300.dp), contentScale = ContentScale.Fit)
                    }
                }
                stickyHeader {
                    Row(Modifier.background(Color.Gray).width(100.dp).height(50.dp)){
                        Text(text = "标题2")
                    }
                }
                items(viewModel.student){
                    Column {
                        Text(text = it.name)
                        Text(text = it.age)
                        AsyncImage(model = it.image,"", modifier = Modifier
                            .width(100.dp)
                            .height(300.dp), contentScale = ContentScale.Fit)
                    }
                }
            }
        }
    }
}

运行效果如下：

相关推荐
2501_915918413 分钟前
iOS 开发中证书创建与管理中的常见问题
android·ios·小程序·https·uni-app·iphone·webview
stevenzqzq5 分钟前
Compose基础入门
开发语言·compose
00后程序员张26 分钟前
IOScer 开发环境证书包括哪些，证书、描述文件与 App ID 的协同管理实践
android·ios·小程序·https·uni-app·iphone·webview
aningxiaoxixi2 小时前
android AV 之 SimpleC2Component
android
TAEHENGV2 小时前
导入导出模块 Cordova 与 OpenHarmony 混合开发实战
android·javascript·数据库
君莫啸ོ3 小时前
Android基础-SwitchCompat自定义样式
android
5980354153 小时前
【java工具类】小数、整数转中文小写
android·java·开发语言
csj503 小时前
安卓基础之《（8）—中级控件（2）选择按钮》
android
液态不合群3 小时前
【面试题】MySQL 中的索引数量是否越多越好？为什么？
android·数据库·mysql
QING6184 小时前
Kotlin协程：Job.cancel() 和 Scope.cancel() 的区别详解！！！
android·kotlin·android jetpack
热门推荐
01GitHub 镜像站点02从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击033D 圣诞树网页代码04UV安装并设置国内源05Linux下V2Ray安装配置指南06在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）07Gemini3 生成的基于手势控制3D粒子圣诞树08解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题09开源分享 | 超浪漫 3D 圣诞树立体动画（附零基础使用教程）10GLM-4.7 vs MiniMax-M2.1：代码工程理解