如何在 Jetpack Compose 中使分割线忽略其父容器的填充？

Question

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

更清晰地说，我画了这个图来说明我的需求：

现在，我通过使用 Modifier.offset(x=16.dp) 来使其工作，除了现在分隔符在左侧太“短”之外，就像这样：

如何实现这样的布局？提前感谢！

- Ruben Veldman

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

- Gabriele Mariotti

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()。传递的参数是父级的内边距。如果您的应用屏幕具有一致的页面边距（希望是这样的情况），您可以为其分配一个默认值。

- Oya Canli