Jetpack Compose 中的 Android 基本 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 )。
这里的策略是包装 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)
     )
}

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