如何在 Jetpack Compose 中设置行宽等于 TextField 的宽度？答案

【问题标题】：How to set the width of a row to be equal to width of TextField in Jetpack Compose?如何在 Jetpack Compose 中设置行宽等于 TextField 的宽度？
【发布时间】：2022-11-28 23:38:03
【问题描述】：

我希望包含按钮和文本的行的宽度与文本字段的宽度相同。这是我尝试过的：

Column(
    modifier = Modifier.fillMaxSize().padding(padding),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    TextField(
        value = email,
        onValueChange = { email = it },
        placeholder = {Text(text = "Email")}
    )
    TextField(
        value = password,
        onValueChange = { password = it },
        placeholder = {Text(text = "Pass")}
    )
    Row {
        Button(
            onClick = {
                start(email, password)
            }
        ) {
            Text(
                text = "Start",
                fontSize = 18.sp
            )
        }
        Spacer(
            modifier = Modifier.weight(1f)
        )
        Text(
            text = "Skip"
        )
    }
}

这就是我得到的：

这就是我所期望的：

我可以在不设置固定尺寸的情况下实现吗？

【问题讨论】：

标签： android kotlin android-jetpack-compose android-compose-textfield

【解决方案1】：

您可以用 Column 和 Modifier.width(IntrinsicSize.Min) 包装 3 可组合项，然后将 fillMaxWidth() 应用到 Row 和 Button：

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Column(Modifier.width(IntrinsicSize.Min)){

        TextField()
        TextField()
        Row(
            horizontalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxWidth()
        ) {
            //Button + Skip Text
        }
    }
}

【讨论】：