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

Question

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

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

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

如何组合/合并两个修改器，同时将本地修改器设置为默认修改器？

Answer 1

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

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

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功能。

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