如何在 Jetpack Compose 中为所有孩子设置 fillMaxWidth()？答案

【问题标题】：How to set fillMaxWidth() for all childs in Jetpack Compose?如何在 Jetpack Compose 中为所有孩子设置 fillMaxWidth()？
【发布时间】：2021-08-23 06:00:32
【问题描述】：

我的问题：

我在同一页面中有多个 TextField。我在我的 rootView(column) 中给出了 fillMaxWidth()。但所有子视图宽度都将其作为 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 中处理代码的简单性。填充所有子视图的宽度还有其他选择吗？

【问题讨论】：

您的子视图MyTextField1() 也应该有Modifier.fillMaxWidth()。
@SreekantShenoy 哦，好的，谢谢。我认为在 rootView 中可以处理一些其他选项。

标签： android android-jetpack-compose

【解决方案1】：

您可以使用Modifier.fillMaxWidth() 创建一个修饰变量并将其传递给所有子文本字段。

Column(
  ...
) {
    val maxWidthModifier = Modifier.fillMaxWidth()

    MyTextField1(maxWidthModifier)
    MyTextField2(maxWidthModifier)
    ...
}

...这里适用。

@Composable
fun MyTextField1(modifier: Modifier) {
    TextField(
        ...
        //apply modifier
        modifier = modifier
    )
}

【讨论】：

【解决方案2】：

如果不直接传递，你不能添加一些将应用于所有孩子的修饰符。

但是使用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
        }

        layout(
            width = constraints.maxWidth,
            height = placeablesWithOffset.sumOf { it.first.height }
        ) {
            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 = {})
}

结果：

【讨论】：

感谢您的宝贵回答。我会检查并通知你
你让他知道@Ranjithkumar 了吗？