Jetpack Compose 中的 Android 基本文本字段对齐

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

我找到了两种方法来解决这个问题：

第一种更简单，如果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）。

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

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)
        )
    }
}

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

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

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