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，因为它们被视为小部件。