避免在 Jetpack Compose 中使用 LazyColumn 的特定子项进行侧边填充

Question

我想删除 LazyColum 中特定子项的侧边距。我在 post 的帮助下用 xml 解决了这个问题。我在 Jetpack Compose 中有相同的场景。我正在使用 compose_bom = "2022.11.00" 的 BOM 版本材料 3.

    Card(shape = RoundedCornerShape(6.dp),) {
        Column(modifier.background(Color.White)) {
            LazyColumn(
                contentPadding = PaddingValues(all =16.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp),
            ) {
                item {
                    Text(
                        text = "Device Header",
                        modifier = Modifier.padding(top = 10.dp),
                        style = headerTextStyle
                    )
                }

                item {
                    Divider() // remove padding from side in here
                }
            }
        }
    }

实际产量

预期产出

Answer 1

在 Compose 中你不能使用负填充在孩子中减少父容器应用的填充。您可以使用offset带有负值的修饰符，但它会将Divider移到左侧。

你可以使用layout修改器应用增加宽度的水平偏移。

就像是：

LazyColumn(
    Modifier.background(Yellow),
    contentPadding = PaddingValues(all = 16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp),
) {
    //...

    item {
        val sidePadding = (-8).dp

 
        Divider(modifier = Modifier
            .layout { measurable, constraints ->
                // Measure the composable adding the side padding*2 (left+right)
                val placeable =
                    measurable.measure(constraints.offset(horizontal = -sidePadding.roundToPx() * 2))

                //increase the width adding the side padding*2
                layout(
                    placeable.width + sidePadding.roundToPx() * 2,
                    placeable.height
                ) {
                    // Where the composable gets placed
                    placeable.place(+sidePadding.roundToPx(), 0)
                }

            }
        )          
        
    }
}

在这里，您可以找到带有不带修饰符的 Divider() 的输出，以及带有 layout 修饰符的 Divider 的输出。