如何使分隔符忽略 Jetpack Compose 中父级的填充？

Question

我正在尝试创建一个布局，其中内容的父级具有水平填充，但内容项之间的分隔线应忽略右侧的填充。

为了更清楚地说明这一点，我画了一张我想要的图：

现在，我通过使用Modifier.offset(x=16.dp)和 来完成一些工作，除了现在分隔线在左侧太“短”之外，如下所示： 我怎样才能实现这样的布局？提前致谢！

Answer 1

该offset修改器不起作用，因为您只是应用了偏移而不更改宽度。
您可以使用layout修饰符指定元素的大小和放置位置。

就像是：

   Divider(
       color = Black,
       modifier = Modifier
        .layout(){ measurable, constraints ->
            val placeable = measurable.measure(constraints.copy(
                maxWidth = constraints.maxWidth + 16.dp.roundToPx(), //add the end padding 16.dp
            ))
            layout(placeable.width, placeable.height) {
                placeable.place(8.dp.roundToPx(), 0) 
            }
      }
   )

Answer 2

我们的网格中有一些组件需要全宽。根据 Gabriele 的回答，我将其设为可重用的自定义修改器：

fun Modifier.fillWidthOfParent(parentPadding: Dp) = this.then(
  layout { measurable, constraints ->
    // This is to force layout to go beyond the borders of its parent
    val placeable = measurable.measure(
        constraints.copy(
            maxWidth = constraints.maxWidth + 2 * parentPadding.roundToPx(),
        ),
    )
    layout(placeable.width, placeable.height) {
        placeable.place(0, 0)
    }
  },
)

当我希望组件绕过父级的填充并进入全屏时，我传递此修饰符而不是 fillMaxWidth()。传递的参数是父级的填充。如果您的应用程序屏幕具有一致的页边距（希望如此），您可以为其分配默认值