为了练习 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 修饰符时遇到了几个错误。 那么如何解决这种情况才是正确的。
谢谢!
最佳答案
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,因为它们被视为小部件。
关于kotlin - Jetpack Compose - 布局可重用组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74286319/