kotlin Jetpack Compose -布局可重用组件

63lcw9qa 于 2022-11-16 发布在 Kotlin

关注(0)|答案(2)|浏览(257)

为了练习在JetpackCompose中使用可重用组件，我开始了一个小练习。2见下图。

我想象绿色行、输入行和中间的行具有相同的结构。第一个元素获得可用空间，第二个元素获得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")}
}

我得到了几个错误与。重量修饰符。那么如何是正确的方法来解决这样的情况。
谢谢你！

kotlin

来源：https://stackoverflow.com/questions/74286319/jetpack-compose-layouting-reusable-components

2条答案

按热度按时间

ykejflvf1#

Modifier.weight是一个在特定作用域中定义的修饰符，例如RowScope和ColumnScope。要使用在特定作用域中定义的修饰符，您需要将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，或者在0 f-1f之间
按照惯例，您可以用大写首字母命名Composable，因为它们被视为小部件。

赞(0）回复(0）举报 2022-11-16

t98cgbkg2#

谢谢你的回复和你很好的解释！在你的帮助下，我用这种方式解决了我的问题。

@Composable
fun InputRowGroundComponent(
    modifier: Modifier = Modifier,
    spaceBetweenElements: Dp = 0.dp,
    color: Color,
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        color = color
    ) {
        Row(
            modifier = modifier,
            horizontalArrangement = Arrangement.spacedBy(spaceBetweenElements),
            verticalAlignment = Alignment.CenterVertically
        ) {
            content()
        }
    }
}

@Composable
fun OverviewHeader(
    modifier: Modifier = Modifier,
    text: String
) {
    Text(
        modifier = modifier,
        text = text,
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        textAlign = TextAlign.Center
    )
}

@Composable
fun OverviewContent(
    modifier: Modifier = Modifier,
    text: String
) {
    Text(
        modifier = modifier,
        text = text,
        maxLines = 2,
        overflow = TextOverflow.Ellipsis,
    )
}

@Preview(showBackground = true, widthDp = 460)
@Composable
fun testPrev() {
    val rowWeights = listOf(6F,3F,2F)
    val rowSpacing = 8.dp
    val indentation = 10.dp
    Column(
        modifier = Modifier.padding(8.dp),
        verticalArrangement = Arrangement.spacedBy(rowSpacing)
    ) {
        InputRowGroundComponent(
            modifier = Modifier.heightIn(45.dp),
            spaceBetweenElements = rowSpacing,
            color = Color.Green
        ) {
            OverviewHeader(text = "Ingredient", modifier = Modifier.weight(rowWeights[0]))
            OverviewHeader(text = "Amount", modifier = Modifier.weight(rowWeights[1]))
            OverviewHeader(text = "Unit", modifier = Modifier.weight(rowWeights[2]))
        }
        InputRowGroundComponent(
            modifier = Modifier.heightIn(30.dp),
            spaceBetweenElements = rowSpacing,
            color = Color.Unspecified
        ) {
            OverviewContent(text = "Sugar", modifier = Modifier.weight(rowWeights[0]).padding(start=indentation))
            OverviewContent(text = "500", modifier = Modifier.weight(rowWeights[1]).padding(start=indentation))
            OverviewContent(text = "gr", modifier = Modifier.weight(rowWeights[2]).padding(start=indentation))
        }
        InputRowGroundComponent(
            modifier = Modifier.heightIn(30.dp),
            spaceBetweenElements = rowSpacing,
            color = Color.Unspecified
        ) {
            OverviewContent(text = "Carrot", modifier = Modifier.weight(rowWeights[0]).padding(start=indentation))
            OverviewContent(text = "1.5", modifier = Modifier.weight(rowWeights[1]).padding(start=indentation))
            OverviewContent(text = "kg", modifier = Modifier.weight(rowWeights[2]).padding(start=indentation))
        }
        InputRowGroundComponent(
            spaceBetweenElements = rowSpacing,
            color = Color.Unspecified
        ) {
            TextField(value = "", onValueChange = {}, modifier = Modifier.weight(rowWeights[0]))
            TextField(value = "", onValueChange = {}, modifier = Modifier.weight(rowWeights[1]))
            TextField(value = "", onValueChange = {}, modifier = Modifier.weight(rowWeights[2]))
        }
        Button(
            modifier = Modifier.fillMaxWidth(),
            onClick = { /*Todo*/ },
            content = {
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Icon(
                        imageVector = Icons.Filled.Add,
                        contentDescription = "Add Ingredient"
                    )
                    Text(
                        text = "Add"
                    )
                }
            }
        )
    }
}

现在这种做法对吗？

赞(0）回复(0）举报 2022-11-16

我来回答

kotlin Jetpack Compose -布局可重用组件

代码无效！

2条答案

相关问题

热门标签

最新问答