主页 / coding / 问题 / 79191610
Accepted
Jade
Asked: 2024-11-15 16:41:05 +0800 CST

如何为 Composable 函数子项添加对齐

  • 772
@Composable
fun Root() {
  Box {
    Text("foo")
    BarView()
  }
}
@Composable
fun BarView() {
  Text("bar")
}

这是我的代码示例，我想将 BarView 对齐到 TopEnd。如果我更改BarView()为fun BoxScope.BarView()，则 BarView 无法在其他小部件中重用。如果我用 Box 包裹 BarView，它将多出一层。

Box {
    Text("foo")
    Box(modifier = Modifier.align(Alignment.TopEnd)) {
      BarView()
    }
  }

有没有更好的方法来做到这一点，或者包装一个盒子就可以了。

1 个回答

  1. Best Answer

    您可以将以下内容传递Modifier给BarViewComposable：

    @Composable
fun BarView(modifier: Modifier = Modifier) {
    Text(
        modifier = modifier
        text = "bar"
    )
}

    然后，您可以在任何父 Composable 中使用它，但仍然可以传递任何需要特定范围的 Modifier：

    @Composable
fun Root() {
    Box {
        Text("foo")
        BarView(
            modifier = Modifier.align(Alignment.TopEnd)  // pass BoxScope Modifier
        )
    }
}

@Composable
fun ColumnExample() {
    Column {
        Text("foo")
        BarView(
            modifier = Modifier.weight(1f)  // pass ColumnScope Modifier
        )
    }
}

    根据Modifier文档，这种方法也是最佳实践：

    最佳做法是让所有可组合项都接受一个modifier参数，并将其传递modifier给发出界面的第一个子项。这样做可以使您的代码更易于重复使用，并使其行为更可预测且更直观。

    • 4

相关问题