Jetpack Compose 中的 Android 基本 TextField 对齐

Posted 2023-03-05

【中文标题】Jetpack Compose 中的 Android 基本 TextField 对齐

【英文标题】：Android Basic TextField alignment in Jetpack Compose

【发布时间】：2021-11-15 10:15:14

【问题描述】：

我在尝试对齐 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),
        )
    

这是结果的图片：

有什么想法吗？

谢谢！

爱丽儿

【参考方案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)
     )

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

【讨论】：

感谢 Pierre，从没想过更改行高会使 basictextfield 中的文本居中，这似乎是某种错误。