如何在 android jetpack compose 中相互重叠列表项？

【问题标题】：How can i overlap list item on each other in android jetpack compose?如何在 android jetpack compose 中相互重叠列表项？
【发布时间】：2021-06-30 00:25:02
【问题描述】：

我想实现这个用户界面。如何在 android jetpack compose 中相互重叠帖子列表项？

【问题讨论】：

标签： android kotlin user-interface overlap android-jetpack-compose

【解决方案1】：

如果您使用 Column 或 LazyList 来显示项目，则可以使用带有负 spacedBy 空间的 verticalArrangement 参数。

LazyColumn(
    verticalArrangement = Arrangement.spacedBy((-32).dp)
) {
    // Put the items to overlap here
}

spacedBy() doc

【讨论】：

非常感谢！你是个男人。

【解决方案2】：

使用Box 将一个元素放在另一个元素之上。

另外，请阅读官方文档here

【讨论】：

你能解释一下怎么做吗？我还是找不到例子。

【解决方案3】：

您可以使用Box

样本：

Box(modifier = Modifier.fillMaxSize()) {
     Image(modifier = Modifier.fillMaxSize()) {} //Image1
     Image(modifier = Modifier.fillMaxSize()) {} //Image2
}

在上面的例子中，Image2 将覆盖 Box 的 maxSize。 Image1 将位于 Image2 下方。

【讨论】：

【解决方案4】：

添加到 Bagadeshkumar R 的答案中，您可以放置高度为 spacer(modifier = Modifier.height(8.dp)) 的 Spacer，属性介于图像 1 和 2 之间，以使图像 1 部分可见。

【讨论】：