在 Jetpack Compose 中设置负填充值的替代解决方案？（java.lang.IllegalArgumentException：填充必须是非负数）

Question

我试图为填充修饰符分配一个负值，但应用程序崩溃了。看看我的代码。谢谢你，如果你能帮助或给我一个替代的解决方案

在我的示例中，我分配Modifier.padding(horizontal = 16.dp)给父组件 (LazyColum)。但我希望第一个孩子（图像）Modifier.padding(horizontal = -16.dp)填满屏幕的整个宽度。相反，我必须将每个padding值分配给每个孩子。

崩溃日志： java.lang.IllegalArgumentException: Padding must be non-negative

代码片段

LazyColumn(modifier = Modifier.padding(16.dp), state = lazyListState) {
    item {
        Image(
            modifier = Modifier
                .fillMaxWidth()
                .padding(-16.dp) // Crashed here!
                .height(200.dp),
            painter = painterResource(id = puppy.artwork),
            contentDescription = "Puppy ArtWork",
            contentScale = ContentScale.Crop
        )
    }
    item {
        Row(
            modifier = Modifier
                .padding(horizontal = 16.dp)
                .padding(top = 16.dp)
        ) {
            Text(text = puppy.name, style = MaterialTheme.typography.h4)
            Spacer(modifier = Modifier.weight(1f))
            Price(puppy.pricePerHour)
        }
    }
    item {
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Text(
                modifier = Modifier.padding(top = 16.dp)
                text = puppy.about
            )
        }
    }
    item {
        PuppyInfo(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 16.dp),
            puppy = puppy
        )
    }
    .... // A lot of children here
    
}

Answer 1

如果您不仅想增加定位，还想增加两个水平方向的宽度，可以使用layout()修改器。我编写了一个修饰符扩展函数，可用于忽略父填充：

fun Modifier.ignoreHorizontalParentPadding(horizontal: Dp): Modifier {
    return this.layout { measurable, constraints ->
        val overridenWidth = constraints.maxWidth + 2 * horizontal.roundToPx()
        val placeable = measurable.measure(constraints.copy(maxWidth = overridenWidth))
        layout(placeable.width, placeable.height) {
            placeable.place(0, 0)
        }
    }
}

Answer 2

padding 修饰符不支持负值，但您可以使用offset修饰符代替：

val columnPadding = 16.dp
LazyColumn(modifier = Modifier.padding(columnPadding), state = lazyListState) {
    item {
        Image(
            modifier = Modifier
                .fillMaxWidth()
                .offset(x = -columnPadding)
                .height(200.dp),
            ...
        )
    }
    ...

话虽如此，我更喜欢在这里使用Column带有图像的 aLazyColumn和带有内容（和应用的填充）的 a 。

Column {
    Image(...)
    LazyColumn(Modifier.padding(16.dp)) {
        ... all content here
    }
}