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

运行效果如下：

相关推荐
独自破碎E33 分钟前
【BISHI9】田忌赛马
android·java·开发语言
代码s贝多芬的音符2 小时前
android 两个人脸对比 mlkit
android
darkb1rd4 小时前
五、PHP类型转换与类型安全
android·安全·php
gjxDaniel4 小时前
Kotlin编程语言入门与常见问题
android·开发语言·kotlin
csj504 小时前
安卓基础之《（22）—高级控件（4）碎片Fragment》
android
峥嵘life5 小时前
Android16 【CTS】CtsMediaCodecTestCases等一些列Media测试存在Failed项
android·linux·学习
stevenzqzq6 小时前
Compose 中的状态可变性体系
android·compose
似霰6 小时前
Linux timerfd 的基本使用
android·linux·c++
darling3318 小时前
mysql 自动备份以及远程传输脚本，异地备份
android·数据库·mysql·adb
你刷碗8 小时前
基于S32K144 CESc生成随机数
android·java·数据库
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03Vue-skills的中文文档04让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南05Claude Code Skills 实用使用手册06UV安装并设置国内源07一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示08OpenClaw Chrome扩展使用教程 - 浏览器中继控制09AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南10Linux下V2Ray安装配置指南