Jetpack Compose如何将提示文本和输入内容居中在BasicTextField中

Question

我想制作一个editText，它可以填满屏幕的宽度，并且提示和输入从屏幕中心开始。

我选择使用BasicTextField，因为对于我来说，TextField和OutlinedTextFields的样式是完全不必要的。

我已经尝试过以下方法：

      BasicTextField(
                value = loginId,
                onValueChange = {
                    loginId = it
                },
                decorationBox = {
                     Text(text = "Input your id", modifier = Modifier.align(Alignment.CenterHorizontally).fillMaxWidth())
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 19.dp,
                        bottom = 4.5.dp, end = 19.dp, top = 40.dp)
                    .background(Purple200)
                    .align(Alignment.CenterHorizontally),
            )

这没有任何影响。我该如何处理？

- March3April4

Answer 1

您可以将TextAlign.Center应用于您的Text。您可以使用style或textAlign属性。 例如：

Text(text = "Input your id",
                modifier = Modifier.fillMaxWidth(),
                style = LocalTextStyle.current.copy(textAlign = TextAlign.Center))

或者：

 Text(text = "Input your id",
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center)

此外，为了正确工作，由于您正在使用decorationBox，您必须在decorationBox内恰好调用一次innerTextField。 类似于：

 decorationBox = {  innerTextField ->
        //....
        if (loginId.isEmpty()) {
            Text("....")
        }
        innerTextField()  //<-- Add this
  }

- Gabriele Mariotti

Answer 2

Text Composable有textAlign参数，因此您可以使用此参数轻松地将文本居中：

Text(text = "Input your id",
     textAlign = TextAlign.Center,
)

参考：https://developer.android.com/jetpack/compose/text#text-alignment

- Jimmy