jetpack组件----声明式UI：compose（二）：列表

学习了compose始终让我觉得他不是很有必要，但看了它对列表实现的部分觉得是真的香，原来我们写列表就是定义一个recycleview，然后写它的item布局，然后写适配器，最后在activity里面对recycleview的适配器进行初始化，真的很麻烦，我很早就觉得这种写列表太反人类，现在我们看看compose的列表怎么实现。
在compose中实现列表主要是两种方法，Compose 提供了一组组件，这些组件只会对在组件视口中可见的列表项进行组合和布局。这些组件包括 LazyColumn 和 LazyRow
顾名思义，LazyColumn 和 LazyRow 之间的区别就在于它们的列表项布局和滚动方向不同。LazyColumn 生成的是垂直滚动列表，而 LazyRow 生成的是水平滚动列表。

下面我们以垂直列表为例。
首先实现LazyColumn，写一个方法去实现LazyColumn

fun sampleRecycleview(msgList: MutableList<message2>) {
    LazyColumn {
        items(msgList) { message2 ->
            showview(msg = message2)
        }
    }
}

这个方法接收一个message2类型的列表，message2是一个数据类

data class message2(val name: String, val othername: String, val phone: String)

我们接收到数据类以后调用LazyColumn里的Items方法，将接受到的message2类型列表传入items方法，再调用showview方法展示界面，注意这里lambuda表达式传入的是每一个遍历的message2对象。showview方法就是界面方法

@Composable
fun showview(msg: message2) {
    ComposeDemoTheme {
        Row(modifier = Modifier.padding(all = 8.dp)) {
            Surface(
                modifier = Modifier.size(60.dp),
                shape = CircleShape
            ) {
                Image(
                    painter = painterResource(id = R.drawable.luxun),
                    contentDescription = "联系人照片",
                    modifier = Modifier
                        .size(60.dp)
                        .scale(1.0F),
                    contentScale = ContentScale.FillBounds
                )
            }
            Spacer(modifier = Modifier.width(8.dp))
            var isExpand by remember {
                mutableStateOf(false)
            }//创建一个开关值赋值为FALSE，委托remeber去记住这个开关值
            Column(modifier = Modifier.clickable { isExpand = !isExpand }) {
                Text(text = "作者： ${msg.name}!", fontSize = 14.sp)
                Text(text = "时间：${msg.othername}", fontSize = 14.sp)
                Text(
                    text = "主要成就：${msg.phone}",
                    fontSize = 14.sp,
                    color = MaterialTheme.colors.secondaryVariant,
                    maxLines = if (isExpand) Int.MAX_VALUE else 1,//如果开关值为TRUE展开全部，否则只显示一行
                    style = MaterialTheme.typography.body2
                )
            }
        }
    }
}

这个方法是界面方法，里面其他的上一篇文章都讲过了，不同的是有三个地方需要注意：
1、这里是我需要实现点击某一项item以后展开它的内容，所以需要一个开关去判断点击的状态从而更新ui，所以创建一个开关值赋值为FALSE，委托remeber去记住这个开关值，关于状态委托这种，大家可以去学习一下MutableState的源码，还是很好用的。

var isExpand by remember {
                mutableStateOf(false)
            }//创建一个开关值赋值为FALSE，委托remeber去记住这个开关值

2、就是一个if。。else。。的语句，如果点击则展开全部，否则只显示一行。

  maxLines = if (isExpand) Int.MAX_VALUE else 1,//如果开关值为TRUE展开全部，否则只显示一行

3、点击事件，改变开关

 Column(modifier = Modifier.clickable { isExpand = !isExpand })

下面是完整的代码，需要实现的小伙伴记得自己换一下包名和图片路径。

package com.example.composedemo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composedemo.ui.theme.ComposeDemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DefaultPreview()
        }
    }
}

data class message2(val name: String, val othername: String, val phone: String)

@Composable
fun showview(msg: message2) {
    ComposeDemoTheme {
        Row(modifier = Modifier.padding(all = 8.dp)) {
            Surface(
                modifier = Modifier.size(60.dp),
                shape = CircleShape
            ) {
                Image(
                    painter = painterResource(id = R.drawable.luxun),
                    contentDescription = "联系人照片",
                    modifier = Modifier
                        .size(60.dp)
                        .scale(1.0F),
                    contentScale = ContentScale.FillBounds
                )
            }
            Spacer(modifier = Modifier.width(8.dp))
            var isExpand by remember {
                mutableStateOf(false)
            }//创建一个开关值赋值为FALSE，委托remeber去记住这个开关值
            Column(modifier = Modifier.clickable { isExpand = !isExpand }) {
                Text(text = "作者： ${msg.name}!", fontSize = 14.sp)
                Text(text = "时间：${msg.othername}", fontSize = 14.sp)
                Text(
                    text = "主要成就：${msg.phone}",
                    fontSize = 14.sp,
                    color = MaterialTheme.colors.secondaryVariant,
                    maxLines = if (isExpand) Int.MAX_VALUE else 1,//如果开关值为TRUE展开全部，否则只显示一行
                    style = MaterialTheme.typography.body2
                )
            }
        }
    }

}

@Composable
fun sampleRecycleview(msgList: MutableList<message2>) {
    LazyColumn {
        items(msgList) { message2 ->
            showview(msg = message2)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    var msgList = mutableListOf<message2>()
    for (i in 0..20) {
        var msg = message2(
            "鲁迅",
            "1881年09月25日",
            "鲁迅作品题材广泛，形式多样灵活，风格鲜明独特，语言幽默。在他55年的人生中，创作的作品，体裁涉及小说、杂文、散文、诗歌等。有《鲁迅全集》二十卷1000余万字传世。在中华人民共和国成立后，其多篇作品被选入中小学语文教材，对新中国的语言和文学有着深远的影响。\n" +
                    "\n" +
                    "鲁迅的作品主要以小说、杂文为主，代表作有：小说集《呐喊》《彷徨》《故事新编》等 ；散文集《朝花夕拾》；散文诗集《野草》；杂文集《坟》《热风》《华盖集》《华盖集续编》《南腔北调集》《三闲集》《二心集》《而已集》《且介亭杂文》等。他的作品有数十篇被选入中、小学语文课本，并有多部小说被先后改编成电影。其作品对于五四运动以后的中国文学产生了深刻的影响。 "
        )
        msgList.add(msg)
    }
    sampleRecycleview(msgList = msgList)
}

效果图

Screenshot_2021-11-08-16-38-00-606_com.example.co.jpg

点击以后主要成就会全部展示出来：

Screenshot_2021-11-08-16-38-16-325_com.example.co.jpg