Jetpack Compose LazyColumn 的 ItemDecoration 是什么？

Question

在 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

相当于什么？

Answer 1

您可以使用

verticalArrangement

参数使用

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

内边距。

Answer 2

您可以将

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
    ))
  }
}

Answer 3

该教程来自代码实验室，您应该参考它来制定一个好的计划 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
        )
    }
}

Answer 4

我使用

contentPadding

的

LazyColumnFor

作为顶部、开始和结束填充，使用

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

内一起滚动

Answer 5

这可以在 LazyRow 和 LazyColumn 中实现。

对于 LazyRow：

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(4.dp)
) {

}

对于惰性列：

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(4.dp)
) {

}

您还可以在 spacedBy 函数中提供对齐值：

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(
        space = 4.dp, alignment = Alignment.CenterVertically
    )
) {

}