如何在 Flutter 中垂直和水平居中文本？答案

【问题标题】：How do I center text vertically and horizontally in Flutter?如何在 Flutter 中垂直和水平居中文本？
【发布时间】：2018-11-06 07:46:09
【问题描述】：

我想知道如何在 Flutter 中将 Text 小部件的内容垂直和水平居中。我只知道如何使用Center(child: Text("test")) 将小部件本身居中，但不知道内容本身。默认情况下，它与左侧对齐。在 Android 中，我相信实现此目的的 TextView 的属性称为gravity。

我想要的示例：

【问题讨论】：

标签： user-interface text widget alignment flutter

【解决方案1】：

文本标题必须始终位于顶部。

错误的方式：

  child: Center(
    child: Text(
      textAlign: TextAlign.center,
      "Hello World",
    ),
  ),

正确的方法：

  child: Center(
    child: Text(
      "Hello World",
      textAlign: TextAlign.center,
    ),
  ),

【讨论】：

【解决方案2】：

你需要在 Text 小部件上使用 textAlign 属性。它为我带来了最好的结果

Text(
  'Hi there',
   textAlign: TextAlign.center,                          
 )

【讨论】：

【解决方案3】：

也许你想为 2 个容器提供相同的宽度和高度

Container(
            width: size.width * 0.30, height: size.height * 0.4,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6)
            ),
            child: Center(
              child: Text(categoryName, textAlign: TextAlign.center, style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 17,
                color: Colors.white,
              ),),
            ),

【讨论】：

【解决方案4】：

如果您是intellij IDE用户，可以使用快捷键Alt+Enter然后选择Wrap with Center再添加textAlign: TextAlign.center

【讨论】：

这绝对让我很开心。我一直在尝试使用 IDE 包装没有想到上下文菜单。谢谢！
欢迎您。希望您能节省时间！
一般来说很好的提示！这让生活更轻松

【解决方案5】：

概述：我使用 Flex 小部件在我的页面上使用 MainAxisAlignment.center 沿水平轴居中文本。我使用容器填充在我的文本周围创建一个边距空间。

  Flex(
            direction: Axis.horizontal,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Container(
                    padding: EdgeInsets.all(20),
                    child:
                        Text("No Records found", style: NoRecordFoundStyle))
  ])

【讨论】：

【解决方案6】：

文本对齐中心属性设置仅水平对齐。

我使用下面的代码将文本设置为垂直和水平居中。

代码：

      child: Center(
        child: Text(
          "Hello World",
          textAlign: TextAlign.center,
        ),
      ),

【讨论】：

@Shelly 在某些情况下它不起作用，您还需要添加 heightFactor: 属性，例如：Center( heightFactor: 2.3, child: Text('SELFIE',textAlign: TextAlign.center, style: TextStyle(fontSize: 18.0, color: Colors.black, fontWeight: FontWeight.bold, ) ), ),
我看了一眼，同意了。将此更改为正确答案，因为它水平和垂直居中。
如果你发现文字仍然没有垂直居中，并且你在TextStyle中设置了高度，记得在TextStyle中设置leadingDistribution: TextLeadingDistribution.even。

【解决方案7】：

                       child: Align(
                          alignment: Alignment.center,
                          child: Text(
                            'Text here',
                            textAlign: TextAlign.center,                          
                          ),
                        ),

这对我来说是最好的结果。

【讨论】：

【解决方案8】：

将文本放在中心：

Container(
      height: 45,
      color: Colors.black,
      child: Center(
        child: Text(
            'test',
            style: TextStyle(color: Colors.white),
        ),
      ),
    );

【讨论】：

【解决方案9】：

SizedBox 中心内的文本元素效果更好，如下示例代码

Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: Colors.green,
      splashColor: Colors.greenAccent,
      shape: new CircleBorder(),
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SizedBox(
              width: 100.0,
              height: 100.0,
              child: Center(
                child: Text(
                widget.buttonText,
                maxLines: 1,
                style: TextStyle(color: Colors.white)
              ),
              )
          )]
        ),
    ),
  onPressed: widget.onPressed
);
}

享受编码?‍?

【讨论】：

【解决方案10】：

我认为更灵活的选择是将Text() 与Align() 包装在一起，如下所示：

Align(
  alignment: Alignment.center, // Align however you like (i.e .centerRight, centerLeft)
  child: Text("My Text"),
),

在 Text 小部件上使用 Center() 似乎完全忽略了 TextAlign。如果您尝试，它将不会对齐TextAlign.left 或TextAlign.right，它将保持在中心。

【讨论】：

这个更好的答案。
这应该是标记的答案，因为问题是关于如何将文本水平和垂直居中。谢谢！
这是答案，伙计们，只是想知道为什么我的文本没有与更大的字体大小对齐，结果发现中心与文本很奇怪，并且有一个断点会忽略文本大小。 Align似乎没有这个问题...爱你

【解决方案11】：

您可以使用Text 构造函数的TextAlign 属性。

Text("text", textAlign: TextAlign.center,)

【讨论】：

我不知道为什么这被标记为答案，因为这只是水平居中文本，但问题要求水平和垂直。
是的，这应该被删除，它不能回答问题。