学习了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
