Android Jetpack Compose 中的基本 TextField 对齐方式

Question

我在尝试对齐 Jetpack Compose 中 ROW 内的 BasicTextField 中的文本时遇到问题，目标是让文本完全居中。

代码如下：

Row(verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center
    ) {

        BasicTextField(
            modifier = Modifier
                .height(40.dp)
                .align(Alignment.CenterVertically),
            value = "Hello",
            onValueChange = {},
            singleLine = true,
            textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
        )
    }

这是结果的图片：

有什么问题吗？

谢谢！

爱丽儿

Answer 1

我找到了 2 种方法来解决这个问题:

第一个比较简单，如果BasicTextField不一定需要有40.dp的高度，Row分量可以负责设置高度：

Row(
    modifier = Modifier.height(40.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center
) {
    BasicTextField(
        value = "Hello",
        onValueChange = {},
        singleLine = true,
        textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
    )
}

第二种方式是为了防止你的BasicTextField确实需要有40dp的高度，而这个责任不能分配给父组件(Row).

这里的策略是用40dp的盒子高度包裹BasicTextField，然后对齐父级的中心：

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center
) {
    Box(
        modifier = Modifier.height(40.dp),
        contentAlignment = Alignment.Center,
    ) {
        BasicTextField(
            value = "Hello",
            onValueChange = {},
            textStyle = TextStyle(textAlign = TextAlign.Center)
        )
    }
}

请注意，在第二种情况下，有必要更改 BasicTextField 的 textStyle 参数的分配：

Row(...) {
     BasicTextField(
          ...
         textStyle = TextStyle(textAlign = TextAlign.Center)
     )
}

对于这两种情况，视觉结果都是这样的：

Android Jetpack Compose 中的基本 TextField 对齐方式

Android Basic TextField alignment in Jetpack Compose

android

row

alignment

android-jetpack-compose