學(xué)習(xí)了compose始終讓我覺得他不是很有必要向拆，但看了它對列表實現(xiàn)的部分覺得是真的香轴捎，原來我們寫列表就是定義一個recycleview般渡，然后寫它的item布局，然后寫適配器具钥，最后在activity里面對recycleview的適配器進(jìn)行初始化豆村，真的很麻煩，我很早就覺得這種寫列表太反人類骂删，現(xiàn)在我們看看compose的列表怎么實現(xiàn)掌动。
在compose中實現(xiàn)列表主要是兩種方法，Compose 提供了一組組件宁玫，這些組件只會對在組件視口中可見的列表項進(jìn)行組合和布局粗恢。這些組件包括 LazyColumn 和 LazyRow
顧名思義，LazyColumn 和 LazyRow 之間的區(qū)別就在于它們的列表項布局和滾動方向不同欧瘪。LazyColumn 生成的是垂直滾動列表眷射，而 LazyRow 生成的是水平滾動列表。
下面我們以垂直列表為例。
首先實現(xiàn)LazyColumn妖碉，寫一個方法去實現(xiàn)LazyColumn
fun sampleRecycleview(msgList: MutableList<message2>) {
LazyColumn {
items(msgList) { message2 ->
showview(msg = message2)
}
}
}
這個方法接收一個message2類型的列表涌庭，message2是一個數(shù)據(jù)類
data class message2(val name: String, val othername: String, val phone: String)
我們接收到數(shù)據(jù)類以后調(diào)用LazyColumn里的Items方法，將接受到的message2類型列表傳入items方法欧宜，再調(diào)用showview方法展示界面坐榆，注意這里lambuda表達(dá)式傳入的是每一個遍歷的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 = "聯(lián)系人照片",
modifier = Modifier
.size(60.dp)
.scale(1.0F),
contentScale = ContentScale.FillBounds
)
}
Spacer(modifier = Modifier.width(8.dp))
var isExpand by remember {
mutableStateOf(false)
}//創(chuàng)建一個開關(guān)值賦值為FALSE冗茸，委托remeber去記住這個開關(guān)值
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,//如果開關(guān)值為TRUE展開全部席镀，否則只顯示一行
style = MaterialTheme.typography.body2
)
}
}
}
}
這個方法是界面方法，里面其他的上一篇文章都講過了夏漱，不同的是有三個地方需要注意：
1豪诲、這里是我需要實現(xiàn)點擊某一項item以后展開它的內(nèi)容，所以需要一個開關(guān)去判斷點擊的狀態(tài)從而更新ui挂绰，所以創(chuàng)建一個開關(guān)值賦值為FALSE跛溉，委托remeber去記住這個開關(guān)值，關(guān)于狀態(tài)委托這種扮授，大家可以去學(xué)習(xí)一下MutableState的源碼芳室，還是很好用的。
var isExpand by remember {
mutableStateOf(false)
}//創(chuàng)建一個開關(guān)值賦值為FALSE刹勃，委托remeber去記住這個開關(guān)值
2堪侯、就是一個if。荔仁。else伍宦。。的語句乏梁，如果點擊則展開全部次洼，否則只顯示一行。
maxLines = if (isExpand) Int.MAX_VALUE else 1,//如果開關(guān)值為TRUE展開全部遇骑，否則只顯示一行
3卖毁、點擊事件，改變開關(guān)
Column(modifier = Modifier.clickable { isExpand = !isExpand })
下面是完整的代碼落萎，需要實現(xiàn)的小伙伴記得自己換一下包名和圖片路徑亥啦。
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 = "聯(lián)系人照片",
modifier = Modifier
.size(60.dp)
.scale(1.0F),
contentScale = ContentScale.FillBounds
)
}
Spacer(modifier = Modifier.width(8.dp))
var isExpand by remember {
mutableStateOf(false)
}//創(chuàng)建一個開關(guān)值賦值為FALSE，委托remeber去記住這個開關(guān)值
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,//如果開關(guān)值為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日",
"魯迅作品題材廣泛翔脱，形式多樣靈活，風(fēng)格鮮明獨特媒鼓，語言幽默届吁。在他55年的人生中错妖，創(chuàng)作的作品，體裁涉及小說疚沐、雜文站玄、散文、詩歌等濒旦。有《魯迅全集》二十卷1000余萬字傳世。在中華人民共和國成立后再登，其多篇作品被選入中小學(xué)語文教材尔邓，對新中國的語言和文學(xué)有著深遠(yuǎn)的影響。\n" +
"\n" +
"魯迅的作品主要以小說锉矢、雜文為主梯嗽，代表作有：小說集《吶喊》《彷徨》《故事新編》等 ；散文集《朝花夕拾》沽损；散文詩集《野草》灯节；雜文集《墳》《熱風(fēng)》《華蓋集》《華蓋集續(xù)編》《南腔北調(diào)集》《三閑集》《二心集》《而已集》《且介亭雜文》等。他的作品有數(shù)十篇被選入中绵估、小學(xué)語文課本炎疆，并有多部小說被先后改編成電影。其作品對于五四運動以后的中國文學(xué)產(chǎ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
