在 Jetpack compose 中定义视图权重的问题答案

【问题标题】：Issue with defining weight to views in Jetpack compose在 Jetpack compose 中定义视图权重的问题
【发布时间】：2021-04-19 08:57:12
【问题描述】：

我想使用权重制作一个简单的喷气背包组合布局。下面是代码

Row() {
Column(
    Modifier.weight(1f).background(Blue)){
    Text(text = "Weight = 1", color = Color.White)
}
Column(
    Modifier.weight(2f).background(Yellow)
) {
    Text(text = "Weight = 2")
}
}

这将导致这样的布局

但是，如果我的内部视图来自其他一些可组合函数，而该函数不知道它将成为列或行的子函数，该怎么办？

Row() {
  // Calling Some composable function here
}

在这种情况下，我无法访问 Modifier.weight(..) 函数，因为它认为它不在行或列范围内，因为它是一个独立的函数。

【问题讨论】：

标签： android android-jetpack-compose android-layout-weight

【解决方案1】：

您可以在 Composable 中添加修饰符作为参数。

类似：

@Composable
fun myCard(modifier: Modifier = Modifier, name:String){
    Box(modifier){
            Text(name,textAlign = TextAlign.Center,)
    }
}

通过这种方式，myCard 不知道自己将成为 Column 或 Row 的子代。

然后在你的实现中你可以使用：

Row(Modifier.padding(16.dp).height(50.dp)) {
    myCard(Modifier.weight(1f).background(Color.Yellow),"Weight = 1")
    myCard(Modifier.weight(2f).background(Color.Red),"Weight = 2")
}

【讨论】：

感谢您的回答，它的工作。但是还有其他方法吗？如果我们不想将修饰符作为参数发送？ @gabriele-mariotti

【解决方案2】：

您可以在函数声明前加上 RowScope. 或 ColumnScope.

@Composable
fun RowScope.SomeComposable() {
    // weights should work in here
    Column(Modifier.weight(1f)){ /**/ }

}

【讨论】：