如何在 Jetpack Compose 中组合多个 Modifier 对象？

Question

我有一个可组合项，它将 Modifier 实例传递给它的子可组合项，如下所示：

@Composable
fun MyComposable(
    modifier: Modifier = Modifier,
    content: @Composable BoxScope.() -> Unit,
) {
    Box(
        modifier = modifier.fillMaxWidth(),
        content = content,
    )
}

这会将 fillMaxWidth 修饰符添加到 modifier 参数。但是，这不是所需的行为，因为我希望 fillMaxWidth 成为默认宽度，但仍允许调用者覆盖它。

我如何 combine/merge 这两个修饰符同时将我的本地修饰符设为默认值？

Answer 1

使用Modifier.then函数。

@Composable
fun MyComposable(
    modifier: Modifier = Modifier,
    content: @Composable BoxScope.() -> Unit,
) {
    OtherComposable(
        modifier = Modifier.fillMaxWidth().then(modifier),
        content = content,
    )
}

Answer 2

使用Modifier.composed函数。

@Composable
fun MyComposable(
    modifier: Modifier = Modifier,
    content: @Composable BoxScope.() -> Unit,
) {
    OtherComposable(
        modifier = Modifier.fillMaxWidth().composed { modifier },
        content = content,
    )
}

Answer 3

您可以简单地使用 Modifier.then(otherModifier)。注意：顺序很重要，您可能需要考虑自己添加的内容和从外部添加的内容。

composed 用于有状态修饰符，例如当您想要实现自定义触摸控件时，每次发生任何更改时都会调用您。参见 Composed Docs

如何在 Jetpack Compose 中组合多个 Modifier 对象？

How to combine multiple Modifier objects in Jetpack Compose?

android

kotlin

android-jetpack

android-jetpack-compose