Jetpack Compose中定义视图权重的问题

Question

我想制作一个使用权重的简单Jetpack Compose布局。以下是代码：

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 (..)函数，因为它认为它不在行或列作用域中，因为它是一个独立函数。

- Bharat Kumar

Answer 1

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

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

}

- Jarrod Moldrich

---

太好了！这个替代方案让我对代码的修改变少了。谢谢！ - Usman Nazir

Answer 2

您可以将修饰符作为参数添加到您的组合函数中。

像这样：

@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

---

谢谢回答，它有效。但是是否有其他替代方法？如果我们不想将修改器作为参数发送怎么办？@gabriele-mariotti - Bharat Kumar

字符串值"Weight = 1"和"Weight = 2"都是左对齐的。请问如何将它们的对齐方式改为居中或靠右对齐？ - undefined

Answer 3

Row(
                modifier = mainRowModifier,
                verticalAlignment = rowCenterVerticallyAlign
            ) {
                Row(
                    verticalAlignment = rowCenterVerticallyAlign,
                    horizontalArrangement = rowContentArrangementCenter,
                    modifier = Modifier.weight(.5f, true).wrapContentHeight()
                ) {
                    Text(
                        text = "971",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        textAlign = TextAlign.Center
                    )
                    Icon(
                        painter = painterResource(id = resIdDropDownIcon),
                        contentDescription = null,
                        modifier = Modifier.padding(start = startPaddingDropdownIcon.dp)
                    )
                }

                Divider(
                    color = dividerColor,
                    modifier = dividerModifier
                )

                SimpleTextField(
                    modifier = Modifier.weight(2f),
                    value = "",
                    placeHolder = textFieldPlaceholder,
                    keyboardType = KeyboardType.Phone,
                    singleLine = true
                )

                Text(
                    text = optionalTextTxt,
                    modifier = Modifier.weight(.5f, true),
                    style = MaterialTheme.typography.bodySmall,
                    fontSize = optionalTextFontSize.sp
                )
            }

如果主行没有权重问题，那么我将把子行的权重分配为0.5，对于textField的权重将为2f，最后textview的权重将为0.5f

然后输出将看起来像

- Qamar khan