kotlin - Jetpack Compose - 布局可重用组件

Question

为了练习 Jetpack Compose 中的可重用组件，我开始了一些练习。见下图。

正如我想象的那样，绿色行、输入行和它们之间的行具有相同的结构。第一个元素获得可用空间，第二个元素获得 50.dp，最后一个元素获得 70.dp。我试图将宽度分成变量，并将此变量作为修饰符传递给行中的单个元素。我想如果我需要额外的字段，我可以扩展它而不会出现任何问题。

代码不工作!

@Composable
fun groundComponent(
    modifier: Modifier = Modifier,
    spaceBetween: Dp = 0.dp,
    color: Color,
    content: @Composable () -> Unit
) {
    Surface(
        color = color
    ) {
        Row(
            modifier = modifier,
            horizontalArrangement = Arrangement.spacedBy(spaceBetween)
        ) {
            content()
        }
    }
}

@Composable
fun inputSection() {
val firstRowWidth = 1F
val secondRowWidth = 70.dp
val thirdRowWidth = 50.dp

Text("Add Ingredient")
groundComponent(color = Color.Green){
            Text( text="Ingredient", modifier = Modifier.weight(firstRowWidth ))
            Text( text="Amount", modifier = Modifier.widthIn(secondRowWidth ))
            Text( text="Unit", modifier = Modifier.widthIn(thirdRowWidth ))
        }
groundComponent{
            Text( text="Sugar", modifier = Modifier.weight(firstRowWidth ))
            Text( text="500", modifier = Modifier.widthIn(secondRowWidth ))
            Text( text="gr", modifier = Modifier.widthIn(thirdRowWidth ))
        }
groundComponent{
            Text( text="Carrot", modifier = Modifier.weight(firstRowWidth ))
            Text( text="1.5", modifier = Modifier.widthIn(secondRowWidth ))
            Text( text="kg", modifier = Modifier.widthIn(thirdRowWidth ))
        }
groundComponent{
                TextField(
value = "newIngredient", 
onValueChange = {}, 
modifier = Modifier.weight(firstRowWidth ))
            TextField(
value = "newAmount", 
onValueChange = {}, 
modifier = Modifier.widthIn(secondRowWidth )
)
            TextField(
value = "newUnit", 
onValueChange = {}, 
modifier = Modifier.widthIn(thirdRowWidth )
)
        }
Button(onClick={}){Text("add")}
}

我在使用 .weight 修饰符时遇到了几个错误。那么如何解决这种情况才是正确的。

谢谢!

Answer 1

Modifier.weight 是定义在RowScope 和ColumnScope 等特定范围内的Modifier。为了能够使用在特定范围内定义的修饰符，您需要将 Receiver 添加到您的内容中。例如，将 BoxScope 定义为 Modifier.align()，您也可以定义您的范围。

@Composable
fun GroundComponent(
    modifier: Modifier = Modifier,
    spaceBetween: Dp = 0.dp,
    color: Color=Color.Unspecified,
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        color = color
    ) {

        // Can't call content here because it has RowScope as receiver
//        content()
        Row(
            modifier = modifier,
            horizontalArrangement = Arrangement.spacedBy(spaceBetween)
        ) {
            content()
        }
    }
}

同样在 InputSection 中，您将权重分数定义为

val firstRowWidth = 1F
val secondRowWidth = 70.dp
val thirdRowWidth = 50.dp

这些值应该相互成比例

例如，如果您设置 1/5/6。或者在 0f-1f 之间

按照惯例，您可以使用首字母大写来命名 Composable，因为它们被视为小部件。