android - 如何为 Jetpack Compose 中的所有 child 设置 fillMaxWidth()？

Question

我的问题:

我在同一个页面中有多个 TextField。我在我的 rootView(列)中给出了 fillMaxWidth()。但是所有的 subview 宽度都将其作为 wrap_content。

我的代码:

Column(
    verticalArrangement = Arrangement.SpaceAround,
    modifier = Modifier
        .padding(10.dp)
        .fillMaxWidth()//I give the max width here
        .fillMaxHeight()
) {

       MyTextField1()// No modifiers used
       MyTextField2()
       ...
 }

输出:

我的问题:

我有 TextFields 列表。所以我想在 rootView 中处理代码简单性。填充所有 subview 的宽度还有其他选择吗？

Answer 1

你不能添加一些不直接传递给所有 child 的修饰符。

但是使用 Layout 您可以创建自定义列，这将使所有子项填充最大宽度并在之间添加间距:

@Composable
fun ColumnFillChildrenWidth(
    modifier: Modifier = Modifier,
    spacing: Dp = 0.dp,
    content: @Composable () -> Unit,
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        var yOffset = 0
        val placeablesWithOffset = measurables.map {  measurable ->
            val placeable = measurable.measure(constraints)
            val result = placeable to yOffset
            yOffset += placeable.height + spacing.toPx().toInt()
            result
        }

        val totalViewHeight = placeablesWithOffset.sumOf { it.first.height }
        val totalSpacing = ((measurables.size - 1) * spacing.toPx()).roundToInt()
        layout(
            width = constraints.maxWidth,
            height = totalViewHeight + totalSpacing
        ) {
            placeablesWithOffset.forEach {
                val (placeable, offset) = it
                placeable.place(0, offset)
            }
        }
    }
}

用法:

ColumnFillChildrenWidth(
    spacing = 20.dp,
    modifier = Modifier
        .fillMaxWidth()
        .padding(20.dp)
) {
    TextField(value = "", onValueChange = {})
    TextField(value = "", onValueChange = {})
    TextField(value = "", onValueChange = {})
}

结果: