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

以下是结果图片：

有什么问题吗？

谢谢！

Ariel

- arieliito

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

策略是用高度为 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 Vieira

---

谢谢Pierre，我从来没有想过改变行高会使basictextfield中的文本居中，这似乎是某种错误。 - arieliito

Answer 2

在BasicTextField中使用decorationBox

    BasicTextField(
            value = textState,
            onValueChange = { textState = it },
            decorationBox = { innerTextField ->.  //add this and config yout layout
                Row(
                    modifier = modifier.padding(horizontal = 12.dp),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center
                ) {

                        innerTextField()

                }
            },

            )

- yousef Abbdolzadeh