Jetpack Compose 如何在 BasicTextField 中居中提示和输入答案

【问题标题】：Jetpack Compose how to center hint and input inside BasicTextFieldJetpack Compose 如何在 BasicTextField 中居中提示和输入
【发布时间】：2021-08-22 06:05:15
【问题描述】：

我正在尝试制作一个填充屏幕宽度的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),
            )

这没有效果。我可以用这个做什么？

【问题讨论】：

标签： android android-jetpack-compose android-jetpack-compose-text

【解决方案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
  }

【讨论】：

【解决方案2】：

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

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

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

【讨论】：