喷气背包Compose - 文本居中

Question

我正在使用Jetpack Compose创建一个简单的单词卡片。想法是当你点击卡片时，它会给出答案。然而，我遇到了一个基本问题。

不幸的是...我甚至找不到官方文档，所以我的学习方式就是信任自动纠正系统...

无论如何，我认为问题可能出在Box()或Text()上。我为盒子的Gravity添加了Align.CenterEnd。然而，在盒子居中方面，这似乎是唯一的方法。另一方面，Text()没有提供任何方法来实现这一点（它有gravity但似乎没有改变任何东西）

希望能得到正确的指导。

顺便说一句，我知道这会提供免费答案。但是我该如何在点击时更改$question的文本？因为我认为Composables会刷新?...因此，应该在屏幕上重新生成？也许不是吗？

谢谢！

 val typography = MaterialTheme.typography

        val context = ContextAmbient.current
        var question = "How many Bananas should go in my Smoothie?"


        Column(modifier = Modifier.padding(30.dp).then(Modifier.fillMaxWidth())
                .then(Modifier.wrapContentSize(Alignment.Center))
                .clickable(onClick = { Toast.makeText(context, "3 Bananas are needed!", Toast.LENGTH_LONG).show()} ) /*question = "3 Bananas required"*/
                .clip(shape = RoundedCornerShape(16.dp))) {
            Box(modifier = Modifier.preferredSize(350.dp)
                    .gravity(align = Alignment.CenterHorizontally)
                    .border(width = 4.dp, color = Gray, shape = RoundedCornerShape(16.dp)),
            shape = RoundedCornerShape(2.dp),
            backgroundColor = DarkGray,
            gravity = Alignment.CenterEnd) {
                Text("$question",
                style = typography.h4,
                )
            }
        }

- PandaPlaysAll

---

你说的居中文本是什么意思？文本在你的框中居中显示。你想要什么？两端对齐的样式吗？ - Gabriele Mariotti

Answer 1

要定义如何水平对齐文本，您可以在Text中应用textAlign = TextAlign.Center：

Column(modifier = Modifier
            .padding(30.dp)
            .fillMaxWidth()
            .wrapContentSize(Alignment.Center)
            .clickable(onClick = { } ) /*question = "3 Bananas required"*/
            .clip(shape = RoundedCornerShape(16.dp)),
) {
    Box(modifier = Modifier
            .preferredSize(350.dp)
            .border(width = 4.dp, color = Gray, shape = RoundedCornerShape(16.dp)),
             alignment = Alignment.Center
    ) {
        Text(
           text = "Question 1 : How many cars are in the garage?",
           modifier = Modifier.padding(16.dp),
           textAlign = TextAlign.Center,
           style = typography.h4,
        )
      //... 
   }
}
  

关于文本。

你可以使用类似以下的内容：

var text by remember { mutableStateOf(("How many cars are in the garage?")) }

在您的可点击项目中：

.clickable(onClick = { text= "After clicking"} )

在你的文本中：

  Text(text, 
        textAlign = TextAlign.Center,
        ...)

这只是一个简单的问题。你可以使用动态结构来存储和更新值，而不是静态字符串。

- Gabriele Mariotti

---

谢谢，TextAlign 很有帮助。每个类的 compose 有官方文档吗？我在学习时感到相当困惑。 - PandaPlaysAll

@PandaPlaysAll 在这里你可以找到所有的文档。我已经更新了答案并附上了TextAlign的链接。 - Gabriele Mariotti

您如何将文本对齐到底部或顶部？TextAlignment 中没有这个选项吗？ - Thracian

Answer 2

您可以使用textAlign属性来水平对齐您的文本，并使用wrapContentHeight属性在Text组件内垂直对齐您的文本。

示例：将文本（水平和垂直）居中对齐在Text组件中

Text(
    text = "How many cars are in the garage",
    textAlign = TextAlign.Center, // make text center horizontal
    modifier = Modifier
        .width(150.dp)
        .height(150.dp)
        .background(Color.Cyan)
        .wrapContentHeight() // make text center vertical
)

示例将底部与水平居中对齐在 Text 内

Text(
    text = "How many cars are in the garage",
    textAlign = TextAlign.Center, // make text center horizontal
    modifier = Modifier
        .width(150.dp)
        .height(150.dp)
        .background(Color.Cyan)
        .wrapContentHeight(Alignment.Bottom) // align bottom
)

如何在 Box 中使元素底部对齐并水平居中

Box(modifier = Modifier
    .width(150.dp)
    .height(150.dp)
    .background(Color.Cyan),
    contentAlignment = Alignment.BottomCenter
) {
    Text(
        text = "How many cars are in the garage",
        textAlign = TextAlign.Center
    )
}

- Linh

---

当你有一个例子 minLines = 3 并且当前的 Text 只包含一行时，它仍然只在水平方向上居中而不是垂直方向上。 - user924

@user924 这是真的，minLines确实会导致高度增加，但文本仍停留在顶部。这是我使用的解决方法：https://github.com/imashnake0/Animite/blob/8a7d0d45a0a51741edf204fb0d5a1ad14716b6dd/app/src/main/java/com/imashnake/animite/features/ui/MediaSmall.kt#L107-L135 - imashnake_

你可以使用size(150.dp)来代替width和height。 - salmanseifian

Answer 3

Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxHeight()) 
{
    Text(text = "Text"),
    textAlign = TextAlign.Center,
}

- Abhinav Chauhan

---

这个甚至都无法编译。请修复你的代码。 - Zun

Answer 4

以下对我有效：

Text(modifier = Modifier.fillMaxWidth(), text = "TEST", textAlign = TextAlign.Center)

- J. Doe

Answer 5

// You can apply textAlign = TextAlign.Center

 Text( text = "My name is $name",
        color = MaterialTheme.colors.primary,
        fontSize = 32.sp,
        fontFamily = FontFamily.Cursive,
        textAlign = TextAlign.Center,
        modifier = Modifier.clickable {
            Toast.makeText(context, "Hello Friends"Toast.LENGTH_LONG).show()
        })

- Vikrant Singh Rawat