Compose竖向列表LazyColumn

2023-10-19 03:04
文章标签 compose 列表 竖向 lazycolumn

本文主要是介绍Compose竖向列表LazyColumn，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

基础列表一

LazyColumn组件中用items加载数据，rememberLazyListState()结合rememberCoroutineScope()实现返回顶部。

/*** 基础列表一*/
@Composable
fun Items() {Box(modifier = Modifier.fillMaxSize()) {val context = LocalContext.currentval dataList = arrayListOf<Int>()for (index in 1..50) {dataList.add(index)}val listState = rememberLazyListState()LazyColumn(state = listState) {items(dataList) { data ->Text(text = "第${data}条数据",textAlign = TextAlign.Center,//属性设置先后顺序不一样运行效果会不一样modifier = Modifier.fillMaxWidth().padding(top = 1.dp).background(Color.White).clickable {Toast.makeText(context, "$data", Toast.LENGTH_SHORT).show()}.padding(10.dp))}}//返回顶部val coroutineScope = rememberCoroutineScope()Image(modifier = Modifier.padding(end = 10.dp, bottom = 10.dp).width(45.dp).height(45.dp).clip(CircleShape).align(Alignment.BottomEnd).background(Color.Blue).clickable {coroutineScope.launch {listState.animateScrollToItem(index = 0)}},painter = painterResource(id = R.drawable.top),contentDescription = "返回顶部图标")}
}

基础列表二

LazyColumn中通过itemsIndexed属性加载数据。

/*** 基础列表二*/
@Composable
fun ItemsIndexed() {val context = LocalContext.currentval stringList = arrayListOf<String>()for (index in 1..50) {stringList.add(index.toString())}LazyColumn {//stringList.toArray()方法可以通过List的toArray方法将List转为ArrayitemsIndexed(stringList) { index, data ->Text(text = "我的下标是：${index}，我的数据为：$data",textAlign = TextAlign.Center,modifier = Modifier.fillMaxWidth().padding(top = 1.dp).background(Color.White).clickable {Toast.makeText(context, data, Toast.LENGTH_SHORT).show()})}}
}

多Type列表

 根据不同数据类型加载不同布局。

/*** 多Type列表*/
@Composable
fun AnyTypeList() {val charList = arrayListOf<Chat>()charList.apply {add(Chat("你好啊"))add(Chat("你在干啥呢"))add(Chat("想问你个事"))add(Chat("没干啥，还在写代码啊！", false))add(Chat("啥事啊大哥？", false))add(Chat("没事。。。"))add(Chat("好吧。。。", false))}LazyColumn {items(charList) { data ->if (data.isLeft) {Column(modifier = Modifier.fillMaxWidth().padding(start = 10.dp)) {//间隔设置Spacer(modifier = Modifier.height(10.dp))Row(verticalAlignment = Alignment.CenterVertically) {Image(modifier = Modifier.width(35.dp).height(35.dp)//裁剪圆形.clip(CircleShape),painter = painterResource(id = R.drawable.ic_launcher_background),contentDescription = "左头像")Spacer(modifier = Modifier.width(10.dp))Text(data.content,modifier = Modifier.wrapContentWidth().background(Color.Yellow).padding(10.dp),)}}} else {Column(modifier = Modifier.fillMaxWidth().padding(end = 10.dp),horizontalAlignment = Alignment.End) {Spacer(modifier = Modifier.height(10.dp))Row(verticalAlignment = Alignment.CenterVertically) {Text(data.content,modifier = Modifier.wrapContentWidth().background(Color.Green).padding(10.dp))Spacer(modifier = Modifier.width(10.dp))Image(modifier = Modifier.width(35.dp).height(35.dp).clip(CircleShape),painter = painterResource(id = R.drawable.ic_launcher_background),contentDescription = "右头像")}}}}}
}

数据类：

/*** created by cwj on 2023-10-16* Description:多类型列表类*/
data class Chat(val content: String, val isLeft: Boolean = true)

粘性标题列表

使用粘性标题stickyHeader组件。滑动列表，一级标题悬浮顶部，随着列表滑动顶部一级列表滑出被替换，顶部一直保持一项一级标题悬浮。

/*** 粘性标题列表*/
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun StickyHeaderTest() {val context = LocalContext.currentval letters = arrayListOf("类型一", "类型二", "类型三", "类型四", "类型五")val contactList = arrayListOf<Contact>()val nameList = arrayListOf<String>()for (index in 1..5) {nameList.add("子项$index")}for (index in letters.iterator()) {contactList.add(Contact(letters = index, nameList))}LazyColumn {contactList.forEach { (letter, nameList) ->stickyHeader {Text(text = letter,modifier = Modifier.background(Color.LightGray).padding(start = 10.dp).fillMaxWidth(),fontSize = 25.sp)}items(nameList) { contact ->Text(text = contact,modifier = Modifier.padding(10.dp).background(Color.White).fillMaxWidth().clickable {Toast.makeText(context, contact, Toast.LENGTH_SHORT).show()},textAlign = TextAlign.Center,fontSize = 25.sp)}}}
}

黏性标题和列表数据能对应起来的数据类：

/*** created by cwj on 2023-10-17* Description:黏性标题和列表数据能对应起来的数据类*/
data class Contact(val letters: String, val nameList: List<String>)

完整代码：

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.cwj.composedemo.ui.theme.ComposeDemoTheme
import kotlinx.coroutines.launchclass MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeDemoTheme {// A surface container using the 'background' color from the themeSurface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {Greeting()}}}}
}@Composable
fun Greeting() {
//    Items()
//    ItemsIndexed()
//    AnyTypeList()StickyHeaderTest()
}/*** 粘性标题列表*/
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun StickyHeaderTest() {val context = LocalContext.currentval letters = arrayListOf("类型一", "类型二", "类型三", "类型四", "类型五")val contactList = arrayListOf<Contact>()val nameList = arrayListOf<String>()for (index in 1..5) {nameList.add("子项$index")}for (index in letters.iterator()) {contactList.add(Contact(letters = index, nameList))}LazyColumn {contactList.forEach { (letter, nameList) ->stickyHeader {Text(text = letter,modifier = Modifier.background(Color.LightGray).padding(start = 10.dp).fillMaxWidth(),fontSize = 25.sp)}items(nameList) { contact ->Text(text = contact,modifier = Modifier.padding(10.dp).background(Color.White).fillMaxWidth().clickable {Toast.makeText(context, contact, Toast.LENGTH_SHORT).show()},textAlign = TextAlign.Center,fontSize = 25.sp)}}}
}/*** 多Type列表*/
@Composable
fun AnyTypeList() {val charList = arrayListOf<Chat>()charList.apply {add(Chat("你好啊"))add(Chat("你在干啥呢"))add(Chat("想问你个事"))add(Chat("没干啥，还在写代码啊！", false))add(Chat("啥事啊大哥？", false))add(Chat("没事。。。"))add(Chat("好吧。。。", false))}LazyColumn {items(charList) { data ->if (data.isLeft) {Column(modifier = Modifier.fillMaxWidth().padding(start = 10.dp)) {//间隔设置Spacer(modifier = Modifier.height(10.dp))Row(verticalAlignment = Alignment.CenterVertically) {Image(modifier = Modifier.width(35.dp).height(35.dp)//裁剪圆形.clip(CircleShape),painter = painterResource(id = R.drawable.ic_launcher_background),contentDescription = "左头像")Spacer(modifier = Modifier.width(10.dp))Text(data.content,modifier = Modifier.wrapContentWidth().background(Color.Yellow).padding(10.dp),)}}} else {Column(modifier = Modifier.fillMaxWidth().padding(end = 10.dp),horizontalAlignment = Alignment.End) {Spacer(modifier = Modifier.height(10.dp))Row(verticalAlignment = Alignment.CenterVertically) {Text(data.content,modifier = Modifier.wrapContentWidth().background(Color.Green).padding(10.dp))Spacer(modifier = Modifier.width(10.dp))Image(modifier = Modifier.width(35.dp).height(35.dp).clip(CircleShape),painter = painterResource(id = R.drawable.ic_launcher_background),contentDescription = "右头像")}}}}}
}/*** 基础列表二*/
@Composable
fun ItemsIndexed() {val context = LocalContext.currentval stringList = arrayListOf<String>()for (index in 1..50) {stringList.add(index.toString())}LazyColumn {//stringList.toArray()方法可以通过List的toArray方法将List转为ArrayitemsIndexed(stringList) { index, data ->Text(text = "我的下标是：${index}，我的数据为：$data",textAlign = TextAlign.Center,modifier = Modifier.fillMaxWidth().padding(top = 1.dp).background(Color.White).clickable {Toast.makeText(context, data, Toast.LENGTH_SHORT).show()})}}
}/*** 基础列表一*/
@Composable
fun Items() {Box(modifier = Modifier.fillMaxSize()) {val context = LocalContext.currentval dataList = arrayListOf<Int>()for (index in 1..50) {dataList.add(index)}val listState = rememberLazyListState()LazyColumn(state = listState) {items(dataList) { data ->Text(text = "第${data}条数据",textAlign = TextAlign.Center,//属性设置先后顺序不一样运行效果会不一样modifier = Modifier.fillMaxWidth().padding(top = 1.dp).background(Color.White).clickable {Toast.makeText(context, "$data", Toast.LENGTH_SHORT).show()}.padding(10.dp))}}//返回顶部val coroutineScope = rememberCoroutineScope()Image(modifier = Modifier.padding(end = 10.dp, bottom = 10.dp).width(45.dp).height(45.dp).clip(CircleShape).align(Alignment.BottomEnd).background(Color.Blue).clickable {coroutineScope.launch {listState.animateScrollToItem(index = 0)}},painter = painterResource(id = R.drawable.top),contentDescription = "返回顶部图标")}
}@Preview(showBackground = true, showSystemUi = true)
@Composable
fun GreetingPreview() {ComposeDemoTheme {Greeting()}
}

这篇关于Compose竖向列表LazyColumn的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/236866。

相关文章

Python列表的创建与删除的操作指南

Python列表的创建与删除的操作指南

《Python列表的创建与删除的操作指南》列表（list）是Python中最常用、最灵活的内置数据结构之一,它支持动态扩容、混合类型、嵌套结构,几乎无处不在,但你真的会创建和删除列表吗,本文给大家介绍... 目录一、前言二、列表的创建方式1. 字面量语法（最常用）2. 使用list()构造器3. 列表推导式
阅读更多...
Python列表去重的9种方法终极指南

Python列表去重的9种方法终极指南

《Python列表去重的9种方法终极指南》在Python开发中,列表去重是一个常见需求,尤其当需要保留元素原始顺序时,本文为大家详细介绍了Python列表去重的9种方法,感兴趣的小伙伴可以了解下... 目录第一章：python列表去重保持顺序方法概述使用字典去重（Python 3.7+）使用集合辅助遍历性能
阅读更多...
Python 常用数据类型详解之字符串、列表、字典操作方法

Python 常用数据类型详解之字符串、列表、字典操作方法

《Python常用数据类型详解之字符串、列表、字典操作方法》在Python中,字符串、列表和字典是最常用的数据类型,它们在数据处理、程序设计和算法实现中扮演着重要角色,接下来通过本文给大家介绍这三种... 目录一、字符串（String）（一）创建字符串（二）字符串操作1. 字符串连接2. 字符串重复3. 字
阅读更多...
Python进阶之列表推导式的10个核心技巧

Python进阶之列表推导式的10个核心技巧

《Python进阶之列表推导式的10个核心技巧》在Python编程中,列表推导式（ListComprehension）是提升代码效率的瑞士军刀,本文将通过真实场景案例,揭示列表推导式的进阶用法,希望对... 目录一、基础语法重构：理解推导式的底层逻辑二、嵌套循环：破解多维数据处理难题三、条件表达式：实现分支
阅读更多...
把Python列表中的元素移动到开头的三种方法

把Python列表中的元素移动到开头的三种方法

《把Python列表中的元素移动到开头的三种方法》在Python编程中,我们经常需要对列表（list）进行操作,有时,我们希望将列表中的某个元素移动到最前面,使其成为第一项,本文给大家介绍了把Pyth... 目录一、查找删除插入法1. 找到元素的索引2. 移除元素3. 插入到列表开头二、使用列表切片（Lis
阅读更多...
python中列表应用和扩展性实用详解

python中列表应用和扩展性实用详解

《python中列表应用和扩展性实用详解》文章介绍了Python列表的核心特性：有序数据集合,用[]定义,元素类型可不同,支持迭代、循环、切片,可执行增删改查、排序、推导式及嵌套操作,是常用的数据处理... 目录1、列表定义2、格式3、列表是可迭代对象4、列表的常见操作总结1、列表定义是处理一组有序项目的
阅读更多...
C++11范围for初始化列表auto decltype详解

C++11范围for初始化列表auto decltype详解

《C++11范围for初始化列表autodecltype详解》C++11引入auto类型推导、decltype类型推断、统一列表初始化、范围for循环及智能指针,提升代码简洁性、类型安全与资源管理效... 目录C++11新特性1. 自动类型推导auto1.1 基本语法2. decltype3. 列表初始化3
阅读更多...
Python中将嵌套列表扁平化的多种实现方法

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表（即列表中包含列表）转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert
阅读更多...
Python中合并列表(list)的六种方法小结

Python中合并列表(list)的六种方法小结

《Python中合并列表(list)的六种方法小结》本文主要介绍了Python中合并列表(list)的六种方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录一、直接用 + 合并列表二、用 extend() js方法三、用 zip() 函数交叉合并四、用
阅读更多...
Spring Boot中的YML配置列表及应用小结

Spring Boot中的YML配置列表及应用小结

《SpringBoot中的YML配置列表及应用小结》在SpringBoot中使用YAML进行列表的配置不仅简洁明了,还能提高代码的可读性和可维护性,：本文主要介绍SpringBoot中的YML配... 目录YAML列表的基础语法在Spring Boot中的应用从YAML读取列表列表中的复杂对象其他注意事项总
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2