[英]Add separator in LazyColum in jetpack compose
I am learning LazyColum
in jetpack compose .我正在学习jetpack compose中的
LazyColum
。 I want to add Separator
in my each item in some condition, please have a look on below MessageList()
function. Also I'll add a screenshot to clearly understand what I want.我想在某些情况下在我的每个项目中添加
Separator
,请查看下面的MessageList()
function。另外,我将添加一个屏幕截图以清楚地了解我想要什么。 Please make a function reusable.请使 function 可重复使用。 Condions are as follow:-
条件如下:-
1. Top
and Bottom
Separator. 1.
Top
和Bottom
分离器。
2 Without separator in both Top
and Bottom
2
Top
和Bottom
都没有分隔符
But problem is that I don't know in idiomatic way in jetpack compose.但问题是我不知道 Jetpack Compose 中惯用的方式。 I did this in Xml using
Recyclerview
.我在 Xml 中使用
Recyclerview
做到了这一点。
import androidx.compose.foundation.lazy.items
@Composable
fun MessageList(messages: List<Message>) {
LazyColumn {
items(messages) { message ->
MessageRow(message)
}
}
}
Can you guys help me on this?你们能帮我吗? Many Thanks
非常感谢
Just make it part of your item只是让它成为你的物品的一部分
LazyColumn {
items(messages) { message ->
MessageRow(message)
Box(Modifier.fillMaxWidth().height(1.dp).background(Color.Red)) //for after every element
}
}
If you want to add it only on the top/bottom of the list you can use item:如果你只想将它添加到列表的顶部/底部,你可以使用项目:
LazyColumn {
item { Box(Modifier.fillMaxWidth().height(1.dp).background(Color.Red)) }
items(messages) { message ->
MessageRow(message)
}
}
To make it conditional use itemsIndexed要使其有条件地使用 itemsIndexed
LazyColumn {
itemsIndexed(messages) { index, message ->
if(index == 0) {
//First element, either show divider or don't
}
....
MessageRow(message)
....
if (index == messages.size) {
// last item, show divider or don't
}
}
}
You just have to add Divider composable to your MessageRow
:您只需将 Divider 可组合添加到您的
MessageRow
:
@Composable
fun MessageRow(message:Message){
Column(){
Divider(Modifier.fillMaxWidth(), thickness = 1.dp, color = Color.LightGray) //above your row
Row(Modifier.fillMaxWidth){
}
}
}
I solve like this to show border or hide border.我这样解决以显示边框或隐藏边框。
package com.abc.app.common.composables
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.tooling.preview.Preview
import com.abc.app.R
import com.abc.app.theme.Cloudy
import com.abc.app.theme.AbcTheme
import com.abc.app.theme.Red
@Composable
fun <T : Any> LazyListScopeColumn(
itemList: List<T>,
content: @Composable (T: Any) -> Unit,
dividerColor: Color = Cloudy,
dividerThickness: Int = R.dimen.separator_height_width,
showDivider: Boolean = true,
) {
LazyColumn(modifier = Modifier.fillMaxWidth()) {
itemsIndexed(itemList) { index, item ->
if (index == 0 && showDivider) {
Divider(color = dividerColor, thickness = dimensionResource(dividerThickness))
}
content(item)
if (index <= itemList.lastIndex && showDivider) {
Divider(color = dividerColor, thickness = dimensionResource(dividerThickness))
}
}
}
}
@Preview(showBackground = true)
@Composable
fun LazyColumnListScopePreview() {
AbcTheme {
Column {
Spacer(modifier = Modifier.height(10.dp)
LazyListScopeColumn(
listOf("item 1", "item 2"),
content = { item ->
Text(
text = "$item",
modifier = Modifier.padding(vertical = 10.dp)
)
},
dividerColor = Red,
)
Spacer(modifier = Modifier.height(10.dp))
}
}
}
@Preview(showBackground = true)
@Composable
fun LazyColumnListScopePreviewNoBorder() {
AbcTheme {
Column {
Spacer(modifier = Modifier.height(10.dp)
LazyListScopeColumn(
listOf("item 1", "item 2"),
content = { item ->
Text(
text = "$item",
modifier = modifier = Modifier.padding(vertical = 10.dp))
},
dividerColor = Red,
showDivider = false,
)
Spacer(modifier = Modifier.height(10.dp))
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.