[英]What is the ItemDecoration for Jetpack Compose LazyColumn?
在 JetpackCompose 中,我们可以使用LazyColumnFor
作为RecyclerView
。
在RecyclerView
中,要在项目之间有适当的边距/填充,我们需要使用ItemDecoration
,根据本文
像下面
class MarginItemDecoration(private val spaceHeight: Int) : RecyclerView.ItemDecoration() {
override fun getItemOffsets(outRect: Rect, view: View,
parent: RecyclerView, state: RecyclerView.State) {
with(outRect) {
if (parent.getChildAdapterPosition(view) == 0) {
top = spaceHeight
}
left = spaceHeight
right = spaceHeight
bottom = spaceHeight
}
}
}
对于 JetpackCompose LazyColumnFor
, ItemDecoration
的等价物是什么?
使用1.0.0
(使用1.0.0-rc01
测试),您可以使用Arrangement.spacedBy()
在项目之间添加间距。
就像是:
LazyColumn(
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
// ...
}
下面的示例在每个项目之间添加了8.dp
的空间
如果要在内容边缘添加填充,可以使用contentPadding
参数。
LazyColumn(
verticalArrangement = Arrangement.spacedBy(8.dp),
contentPadding = PaddingValues(horizontal = 24.dp, vertical = 8.dp)
){ ... }
在上面的示例中,第一项将在其顶部添加8.dp
边距,最后一项将在其底部添加8.dp
,并且所有项的左右内边距24.dp
您可以将LazyColumn
与itemsIndexed
(以前LazyColumnForIndexed
,已弃用)一起使用,并根据索引应用填充。
LazyColumn {
itemsIndexed(items = ...) { index, item ->
Box(Modifier.padding(
start = 16.dp, end = 16.dp, bottom = 16.dp, top = if (index == 0) 16.dp else 0.dp
))
}
}
我使用LazyColumnFor
的contentPadding
作为顶部、开始和结束填充,使用Spacer
作为所有项目的底部填充的一种解决方法。
@Composable
fun MyComposeList(
modifier: Modifier = Modifier,
listItems: List<String>,
) {
LazyColumnFor(
modifier = modifier, items = listItems,
contentPadding = PaddingValues(16.dp, 16.dp, 16.dp)
) { itemText ->
ViewItem(
itemText = itemText
)
Spacer(modifier = Modifier.fillMaxWidth().height(16.dp))
}
}
这似乎得到了我需要的结果,因为contentPadding
可以在LazyColumnFor
中一起滚动
The tutorial comes from the code lab you should refer to for a good plan https://developer.android.com/codelabs/jetpack-compose-layouts?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways %2Fjetpack-compose-for-android-developers-1%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fjetpack-compose-layouts#6
LazyRow(
modifier = modifier.padding(top = 16.dp, bottom = 16.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp),
contentPadding = PaddingValues(horizontal = 8.dp)
) {
items(alignYourBodyData) { item ->
AlignYourBodyElement(
drawable = item.drawable,
text = item.text
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.