[英]What is the ItemDecoration for Jetpack Compose LazyColumn?
In JetpackCompose, we can use LazyColumnFor
as RecyclerView
.在 JetpackCompose 中,我们可以使用LazyColumnFor
作为RecyclerView
。
In RecyclerView
, to have a proper margin/padding between items, we need to use ItemDecoration
, as per this article在RecyclerView
中,要在项目之间有适当的边距/填充,我们需要使用ItemDecoration
,根据本文
Like below像下面
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
}
}
}
For JetpackCompose LazyColumnFor
, what's the equivalent of ItemDecoration
?对于 JetpackCompose LazyColumnFor
, ItemDecoration
的等价物是什么?
With 1.0.0
(tested with 1.0.0-rc01
) you can use Arrangement.spacedBy()
to add spacing in-between items.使用1.0.0
(使用1.0.0-rc01
测试),您可以使用Arrangement.spacedBy()
在项目之间添加间距。
Something like:就像是:
LazyColumn(
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
// ...
}
The example below adds 8.dp
of space in-between each item下面的示例在每个项目之间添加了8.dp
的空间
If you want to add padding around the edges of the content you can use the contentPadding
parameter.如果要在内容边缘添加填充,可以使用contentPadding
参数。
LazyColumn(
verticalArrangement = Arrangement.spacedBy(8.dp),
contentPadding = PaddingValues(horizontal = 24.dp, vertical = 8.dp)
){ ... }
In the example above, the first item will add 8.dp
padding to it's top, the last item will add 8.dp
to its bottom, and all items will have 24.dp
padding on the left and the right.在上面的示例中,第一项将在其顶部添加8.dp
边距,最后一项将在其底部添加8.dp
,并且所有项的左右内边距24.dp
You can use LazyColumn
with itemsIndexed
(formerly LazyColumnForIndexed
, deprecated) and apply the padding depending on the index.您可以将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
))
}
}
I kind of workaround using contentPadding
of LazyColumnFor
for top, start and end padding, and Spacer
as the bottom padding for all items.我使用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))
}
}
This seems to get the result I needed, as the contentPadding
can be scrolled together within the LazyColumnFor
这似乎得到了我需要的结果,因为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 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.