Jetpack Compose - 居中文本 [英] Jetpack Compose - Centering Text

问题描述

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

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

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

方向正确的手会很棒.

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

谢谢！

 val 排版 = MaterialTheme.typographyval 上下文 = ContextAmbient.currentvar question = 我的冰沙里应该放多少香蕉?"列(修饰符 = Modifier.padding(30.dp).then(Modifier.fillMaxWidth()).then(Modifier.wrapContentSize(Alignment.Center)).clickable(onClick = { Toast.makeText(context, 需要 3 根香蕉！", Toast.LENGTH_LONG).show()} )/*question = 需要 3 根香蕉"*/.clip(shape = RoundedCornerShape(16.dp))) {框(修饰符 = Modifier.preferredSize(350.dp).gravity(align = Alignment.CenterHorizo​​ntally).border(width = 4.dp, color = Gray, shape = RoundedCornerShape(16.dp)),形状 = RoundedCornerShape(2.dp),背景颜色 = 深灰色，重力 = Alignment.CenterEnd) {文本($问题"，样式 = 排版.h4，)}}

解决方案

您可以申请

关于正文.

您可以使用以下内容:

var text by remember { mutableStateOf((车库里有多少辆车?")) }

在您的可点击项目中:

.clickable(onClick = { text= "点击后"} )

在您的文本中:

 文本(文本，textAlign = TextAlign.Center，...)

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

I am using Jetpack Compose to create a simple flash card. The idea is that you click the flash card and it will give you the answer. However, I am stuck on a basic problem.

Unfortunately... I could not even find the official documentation, so my learning style has been trusting the autocorrect system...

Anyway, I believe the issue is either with Box() or Text(). I have added a Align.CenterEnd for the Gravity of the box. However, this seems to be the only way for centering in terms for the box. On the other hand, Text() does not give any methods to do so (It has gravity but it doesnt seem to be changing anything)

A hand in the right direction would be amazing.

On a side note, I know this would be giving free answers. But how would I change the text of $question inside the on click. As I thought Composables refresh?... thus, should regenerate on the screen? maybe not?

Thanks!

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

解决方案

You can apply textAlign = TextAlign.Center in the Text:

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

About the text.

You can use something like:

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

In your clickable item:

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

in your Text:

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

It is just a simple. Instead of a static String you can use a dynamic structure to store and update the value.

这篇关于Jetpack Compose - 居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！