如何在 Jetpack Compose 中设置行宽等于 TextField 的宽度?

分享于2022年11月29日 android android-compose-textfield android-jetpack-compose kotlin 问答
【问题标题】: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"
        )
    }
}

这就是我得到的:

这就是我所期望的:

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


【解决方案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
        }
    }
}

【讨论】: