• Compose竖向列表LazyColumn

    基础列表一

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

    1. /**
    2.  * 基础列表一
    3.  */
    4. @Composable
    5. fun Items() {
    6.     Box(modifier = Modifier.fillMaxSize()) {
    7.         val context = LocalContext.current
    8.         val dataList = arrayListOf<Int>()
    9.         for (index in 1..50) {
    10.             dataList.add(index)
    11.         }
    12.  
    13.         val listState = rememberLazyListState()
    14.         LazyColumn(state = listState) {
    15.             items(dataList) { data ->
    16.                 Text(
    17.                     text = "第${data}条数据",
    18.                     textAlign = TextAlign.Center,
    19.                     //属性设置先后顺序不一样运行效果会不一样
    20.                     modifier = Modifier
    21.                         .fillMaxWidth()
    22.                         .padding(top = 1.dp)
    23.                         .background(Color.White)
    24.                         .clickable {
    25.                             Toast
    26.                                 .makeText(context, "$data", Toast.LENGTH_SHORT)
    27.                                 .show()
    28.                         }
    29.                         .padding(10.dp)
    30.                 )
    31.             }
    32.         }
    33.  
    34.         //返回顶部
    35.         val coroutineScope = rememberCoroutineScope()
    36.         Image(
    37.             modifier = Modifier
    38.                 .padding(end = 10.dp, bottom = 10.dp)
    39.                 .width(45.dp)
    40.                 .height(45.dp)
    41.                 .clip(CircleShape)
    42.                 .align(Alignment.BottomEnd)
    43.                 .background(Color.Blue)
    44.                 .clickable {
    45.                     coroutineScope.launch {
    46.                         listState.animateScrollToItem(index = 0)
    47.                     }
    48.                 },
    49.             painter = painterResource(id = R.drawable.top),
    50.             contentDescription = "返回顶部图标"
    51.         )
    52.     }
    53. }

    基础列表二

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

    1. /**
    2.  * 基础列表二
    3.  */
    4. @Composable
    5. fun ItemsIndexed() {
    6.     val context = LocalContext.current
    7.     val stringList = arrayListOf()
    8.     for (index in 1..50) {
    9.         stringList.add(index.toString())
    10.     }
    11.     LazyColumn {
    12.         //stringList.toArray()方法可以通过List的toArray方法将List转为Array
    13.         itemsIndexed(stringList) { index, data ->
    14.             Text(
    15.                 text = "我的下标是：${index}，我的数据为：$data",
    16.                 textAlign = TextAlign.Center,
    17.                 modifier = Modifier
    18.                     .fillMaxWidth()
    19.                     .padding(top = 1.dp)
    20.                     .background(Color.White)
    21.                     .clickable {
    22.                         Toast
    23.                             .makeText(context, data, Toast.LENGTH_SHORT)
    24.                             .show()
    25.                     }
    26.             )
    27.         }
    28.     }
    29. }

    多Type列表

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

    1. /**
    2.  * 多Type列表
    3.  */
    4. @Composable
    5. fun AnyTypeList() {
    6.     val charList = arrayListOf()
    7.     charList.apply {
    8.         add(Chat("你好啊"))
    9.         add(Chat("你在干啥呢"))
    10.         add(Chat("想问你个事"))
    11.         add(Chat("没干啥，还在写代码啊！", false))
    12.         add(Chat("啥事啊大哥？", false))
    13.         add(Chat("没事。。。"))
    14.         add(Chat("好吧。。。", false))
    15.     }
    16.  
    17.     LazyColumn {
    18.         items(charList) { data ->
    19.             if (data.isLeft) {
    20.                 Column(
    21.                     modifier = Modifier
    22.                         .fillMaxWidth()
    23.                         .padding(start = 10.dp)
    24.                 ) {
    25.                     //间隔设置
    26.                     Spacer(modifier = Modifier.height(10.dp))
    27.                     Row(
    28.                         verticalAlignment = Alignment.CenterVertically
    29.                     ) {
    30.                         Image(
    31.                             modifier = Modifier
    32.                                 .width(35.dp)
    33.                                 .height(35.dp)
    34.                                 //裁剪圆形
    35.                                 .clip(CircleShape),
    36.                             painter = painterResource(id = R.drawable.ic_launcher_background),
    37.                             contentDescription = "左头像"
    38.                         )
    39.                         Spacer(modifier = Modifier.width(10.dp))
    40.                         Text(
    41.                             data.content,
    42.                             modifier = Modifier
    43.                                 .wrapContentWidth()
    44.                                 .background(Color.Yellow)
    45.                                 .padding(10.dp),
    46.                         )
    47.                     }
    48.                 }
    49.             } else {
    50.                 Column(
    51.                     modifier = Modifier
    52.                         .fillMaxWidth()
    53.                         .padding(end = 10.dp),
    54.                     horizontalAlignment = Alignment.End
    55.                 ) {
    56.                     Spacer(modifier = Modifier.height(10.dp))
    57.                     Row(
    58.                         verticalAlignment = Alignment.CenterVertically
    59.                     ) {
    60.                         Text(
    61.                             data.content,
    62.                             modifier = Modifier
    63.                                 .wrapContentWidth()
    64.                                 .background(Color.Green)
    65.                                 .padding(10.dp)
    66.                         )
    67.                         Spacer(modifier = Modifier.width(10.dp))
    68.                         Image(
    69.                             modifier = Modifier
    70.                                 .width(35.dp)
    71.                                 .height(35.dp)
    72.                                 .clip(CircleShape),
    73.                             painter = painterResource(id = R.drawable.ic_launcher_background),
    74.                             contentDescription = "右头像"
    75.                         )
    76.                     }
    77.                 }
    78.             }
    79.         }
    80.     }
    81. }

    数据类：

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

    粘性标题列表

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

    1. /**
    2.  * 粘性标题列表
    3.  */
    4. @OptIn(ExperimentalFoundationApi::class)
    5. @Composable
    6. fun StickyHeaderTest() {
    7.     val context = LocalContext.current
    8.     val letters = arrayListOf("类型一", "类型二", "类型三", "类型四", "类型五")
    9.     val contactList = arrayListOf()
    10.     val nameList = arrayListOf()
    11.     for (index in 1..5) {
    12.         nameList.add("子项$index")
    13.     }
    14.     for (index in letters.iterator()) {
    15.         contactList.add(Contact(letters = index, nameList))
    16.     }
    17.  
    18.     LazyColumn {
    19.         contactList.forEach { (letter, nameList) ->
    20.             stickyHeader {
    21.                 Text(
    22.                     text = letter,
    23.                     modifier = Modifier
    24.                         .background(Color.LightGray)
    25.                         .padding(start = 10.dp)
    26.                         .fillMaxWidth(),
    27.                     fontSize = 25.sp
    28.                 )
    29.             }
    30.  
    31.             items(nameList) { contact ->
    32.                 Text(
    33.                     text = contact,
    34.                     modifier = Modifier
    35.                         .padding(10.dp)
    36.                         .background(Color.White)
    37.                         .fillMaxWidth()
    38.                         .clickable {
    39.                             Toast
    40.                                 .makeText(context, contact, Toast.LENGTH_SHORT)
    41.                                 .show()
    42.                         },
    43.                     textAlign = TextAlign.Center,
    44.                     fontSize = 25.sp
    45.                 )
    46.             }
    47.         }
    48.     }
    49. }

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

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

    完整代码：

    1. import android.os.Bundle
    2. import android.widget.Toast
    3. import androidx.activity.ComponentActivity
    4. import androidx.activity.compose.setContent
    5. import androidx.compose.foundation.ExperimentalFoundationApi
    6. import androidx.compose.foundation.Image
    7. import androidx.compose.foundation.background
    8. import androidx.compose.foundation.clickable
    9. import androidx.compose.foundation.layout.Box
    10. import androidx.compose.foundation.layout.Column
    11. import androidx.compose.foundation.layout.Row
    12. import androidx.compose.foundation.layout.Spacer
    13. import androidx.compose.foundation.layout.fillMaxSize
    14. import androidx.compose.foundation.layout.fillMaxWidth
    15. import androidx.compose.foundation.layout.height
    16. import androidx.compose.foundation.layout.padding
    17. import androidx.compose.foundation.layout.width
    18. import androidx.compose.foundation.layout.wrapContentWidth
    19. import androidx.compose.foundation.lazy.LazyColumn
    20. import androidx.compose.foundation.lazy.items
    21. import androidx.compose.foundation.lazy.itemsIndexed
    22. import androidx.compose.foundation.lazy.rememberLazyListState
    23. import androidx.compose.foundation.shape.CircleShape
    24. import androidx.compose.material3.MaterialTheme
    25. import androidx.compose.material3.Surface
    26. import androidx.compose.material3.Text
    27. import androidx.compose.runtime.Composable
    28. import androidx.compose.runtime.rememberCoroutineScope
    29. import androidx.compose.ui.Alignment
    30. import androidx.compose.ui.Modifier
    31. import androidx.compose.ui.draw.clip
    32. import androidx.compose.ui.graphics.Color
    33. import androidx.compose.ui.platform.LocalContext
    34. import androidx.compose.ui.res.painterResource
    35. import androidx.compose.ui.text.style.TextAlign
    36. import androidx.compose.ui.tooling.preview.Preview
    37. import androidx.compose.ui.unit.dp
    38. import androidx.compose.ui.unit.sp
    39. import com.cwj.composedemo.ui.theme.ComposeDemoTheme
    40. import kotlinx.coroutines.launch
    41.  
    42. class MainActivity : ComponentActivity() {
    43.     override fun onCreate(savedInstanceState: Bundle?) {
    44.         super.onCreate(savedInstanceState)
    45.         setContent {
    46.             ComposeDemoTheme {
    47.                 // A surface container using the 'background' color from the theme
    48.                 Surface(
    49.                     modifier = Modifier.fillMaxSize(),
    50.                     color = MaterialTheme.colorScheme.background
    51.                 ) {
    52.                     Greeting()
    53.                 }
    54.             }
    55.         }
    56.     }
    57. }
    58.  
    59. @Composable
    60. fun Greeting() {
    61. //    Items()
    62. //    ItemsIndexed()
    63. //    AnyTypeList()
    64.     StickyHeaderTest()
    65. }
    66.  
    67. /**
    68.  * 粘性标题列表
    69.  */
    70. @OptIn(ExperimentalFoundationApi::class)
    71. @Composable
    72. fun StickyHeaderTest() {
    73.     val context = LocalContext.current
    74.     val letters = arrayListOf("类型一", "类型二", "类型三", "类型四", "类型五")
    75.     val contactList = arrayListOf()
    76.     val nameList = arrayListOf()
    77.     for (index in 1..5) {
    78.         nameList.add("子项$index")
    79.     }
    80.     for (index in letters.iterator()) {
    81.         contactList.add(Contact(letters = index, nameList))
    82.     }
    83.  
    84.     LazyColumn {
    85.         contactList.forEach { (letter, nameList) ->
    86.             stickyHeader {
    87.                 Text(
    88.                     text = letter,
    89.                     modifier = Modifier
    90.                         .background(Color.LightGray)
    91.                         .padding(start = 10.dp)
    92.                         .fillMaxWidth(),
    93.                     fontSize = 25.sp
    94.                 )
    95.             }
    96.  
    97.             items(nameList) { contact ->
    98.                 Text(
    99.                     text = contact,
    100.                     modifier = Modifier
    101.                         .padding(10.dp)
    102.                         .background(Color.White)
    103.                         .fillMaxWidth()
    104.                         .clickable {
    105.                             Toast
    106.                                 .makeText(context, contact, Toast.LENGTH_SHORT)
    107.                                 .show()
    108.                         },
    109.                     textAlign = TextAlign.Center,
    110.                     fontSize = 25.sp
    111.                 )
    112.             }
    113.         }
    114.     }
    115. }
    116.  
    117. /**
    118.  * 多Type列表
    119.  */
    120. @Composable
    121. fun AnyTypeList() {
    122.     val charList = arrayListOf()
    123.     charList.apply {
    124.         add(Chat("你好啊"))
    125.         add(Chat("你在干啥呢"))
    126.         add(Chat("想问你个事"))
    127.         add(Chat("没干啥，还在写代码啊！", false))
    128.         add(Chat("啥事啊大哥？", false))
    129.         add(Chat("没事。。。"))
    130.         add(Chat("好吧。。。", false))
    131.     }
    132.  
    133.     LazyColumn {
    134.         items(charList) { data ->
    135.             if (data.isLeft) {
    136.                 Column(
    137.                     modifier = Modifier
    138.                         .fillMaxWidth()
    139.                         .padding(start = 10.dp)
    140.                 ) {
    141.                     //间隔设置
    142.                     Spacer(modifier = Modifier.height(10.dp))
    143.                     Row(
    144.                         verticalAlignment = Alignment.CenterVertically
    145.                     ) {
    146.                         Image(
    147.                             modifier = Modifier
    148.                                 .width(35.dp)
    149.                                 .height(35.dp)
    150.                                 //裁剪圆形
    151.                                 .clip(CircleShape),
    152.                             painter = painterResource(id = R.drawable.ic_launcher_background),
    153.                             contentDescription = "左头像"
    154.                         )
    155.                         Spacer(modifier = Modifier.width(10.dp))
    156.                         Text(
    157.                             data.content,
    158.                             modifier = Modifier
    159.                                 .wrapContentWidth()
    160.                                 .background(Color.Yellow)
    161.                                 .padding(10.dp),
    162.                         )
    163.                     }
    164.                 }
    165.             } else {
    166.                 Column(
    167.                     modifier = Modifier
    168.                         .fillMaxWidth()
    169.                         .padding(end = 10.dp),
    170.                     horizontalAlignment = Alignment.End
    171.                 ) {
    172.                     Spacer(modifier = Modifier.height(10.dp))
    173.                     Row(
    174.                         verticalAlignment = Alignment.CenterVertically
    175.                     ) {
    176.                         Text(
    177.                             data.content,
    178.                             modifier = Modifier
    179.                                 .wrapContentWidth()
    180.                                 .background(Color.Green)
    181.                                 .padding(10.dp)
    182.                         )
    183.                         Spacer(modifier = Modifier.width(10.dp))
    184.                         Image(
    185.                             modifier = Modifier
    186.                                 .width(35.dp)
    187.                                 .height(35.dp)
    188.                                 .clip(CircleShape),
    189.                             painter = painterResource(id = R.drawable.ic_launcher_background),
    190.                             contentDescription = "右头像"
    191.                         )
    192.                     }
    193.                 }
    194.             }
    195.         }
    196.     }
    197. }
    198.  
    199. /**
    200.  * 基础列表二
    201.  */
    202. @Composable
    203. fun ItemsIndexed() {
    204.     val context = LocalContext.current
    205.     val stringList = arrayListOf()
    206.     for (index in 1..50) {
    207.         stringList.add(index.toString())
    208.     }
    209.     LazyColumn {
    210.         //stringList.toArray()方法可以通过List的toArray方法将List转为Array
    211.         itemsIndexed(stringList) { index, data ->
    212.             Text(
    213.                 text = "我的下标是：${index}，我的数据为：$data",
    214.                 textAlign = TextAlign.Center,
    215.                 modifier = Modifier
    216.                     .fillMaxWidth()
    217.                     .padding(top = 1.dp)
    218.                     .background(Color.White)
    219.                     .clickable {
    220.                         Toast
    221.                             .makeText(context, data, Toast.LENGTH_SHORT)
    222.                             .show()
    223.                     }
    224.             )
    225.         }
    226.     }
    227. }
    228.  
    229. /**
    230.  * 基础列表一
    231.  */
    232. @Composable
    233. fun Items() {
    234.     Box(modifier = Modifier.fillMaxSize()) {
    235.         val context = LocalContext.current
    236.         val dataList = arrayListOf<Int>()
    237.         for (index in 1..50) {
    238.             dataList.add(index)
    239.         }
    240.  
    241.         val listState = rememberLazyListState()
    242.         LazyColumn(state = listState) {
    243.             items(dataList) { data ->
    244.                 Text(
    245.                     text = "第${data}条数据",
    246.                     textAlign = TextAlign.Center,
    247.                     //属性设置先后顺序不一样运行效果会不一样
    248.                     modifier = Modifier
    249.                         .fillMaxWidth()
    250.                         .padding(top = 1.dp)
    251.                         .background(Color.White)
    252.                         .clickable {
    253.                             Toast
    254.                                 .makeText(context, "$data", Toast.LENGTH_SHORT)
    255.                                 .show()
    256.                         }
    257.                         .padding(10.dp)
    258.                 )
    259.             }
    260.         }
    261.  
    262.         //返回顶部
    263.         val coroutineScope = rememberCoroutineScope()
    264.         Image(
    265.             modifier = Modifier
    266.                 .padding(end = 10.dp, bottom = 10.dp)
    267.                 .width(45.dp)
    268.                 .height(45.dp)
    269.                 .clip(CircleShape)
    270.                 .align(Alignment.BottomEnd)
    271.                 .background(Color.Blue)
    272.                 .clickable {
    273.                     coroutineScope.launch {
    274.                         listState.animateScrollToItem(index = 0)
    275.                     }
    276.                 },
    277.             painter = painterResource(id = R.drawable.top),
    278.             contentDescription = "返回顶部图标"
    279.         )
    280.     }
    281. }
    282.  
    283. @Preview(showBackground = true, showSystemUi = true)
    284. @Composable
    285. fun GreetingPreview() {
    286.     ComposeDemoTheme {
    287.         Greeting()
    288.     }
    289. }

  • 相关阅读:
    【Linux】命令
    Vue学习——Vue-Cli创建Vue项目（19）
    简单的个人博客网站设计 静态HTML个人博客主页 DW个人网站模板下载 大学生简单个人网页作品代码 个人网页制作 学生个人网页设计作业
    集合框架（二）前置知识
    Doris学习笔记之优化
    python版超市信息管理系统源代码，基于tkinter带界面
    『手撕Vue-CLI』自动安装依赖
    vue3使用vue-virtual-scroller虚拟滚动遇到的问题
    String类 - 下篇
    国内AI绘画软件“数画”的相机溯源码功能太强大，彻底消灭盗图
  • 原文地址：https://blog.csdn.net/juer2017/article/details/133908983