17

在 JetpackCompose 中,我们可以使用LazyColumnForas 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什么?

4

3 回答 3

37

您可以使用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在左侧和右侧添加内边距。

在此处输入图像描述

于 2021-03-19T21:11:27.327 回答
3

您可以使用LazyColumnwith 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
    ))
  }
}
于 2021-01-06T08:47:26.350 回答
0

我有一种解决方法,将contentPaddingofLazyColumnFor用于顶部、开始和结束填充,以及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

于 2020-12-12T03:42:03.380 回答