Jetpack Compose - 居中文本

Posted 2023-04-18

【中文标题】Jetpack Compose - 居中文本

【英文标题】：Jetpack Compose - Centering Text

【发布时间】：2020-12-22 10:07:55

【问题描述】：

我正在使用 Jetpack Compose 创建一个简单的闪存卡。 这个想法是你点击闪存卡，它会给你答案。 但是，我遇到了一个基本问题。

不幸的是……我什至找不到官方文档，所以我的学习风格一直相信自动更正系统……

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

朝着正确的方向伸出援助之手会很棒。

顺便说一句，我知道这将提供免费答案。但是我如何在点击时更改 $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,
                )
            
        

【问题讨论】：

居中文本是什么意思？文本在您的框中居中。你在找什么？一种合理的风格？

【参考方案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("Question 1 : How many cars are in the garage?",
                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,
        ...)

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

【讨论】：

谢谢，TextAlign 很有帮助。每个班级都有撰写的官方文档吗？我一直很困惑学习它。

@PandaPlaysAll 在这里你可以找到所有doc。我已经用TextAlign

的链接更新了答案

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

【参考方案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
    )