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

Question

我想知道如何在Flutter中垂直和水平居中Text小部件的内容。 我只知道如何使用Center(child: Text("test"))来使小部件本身居中，但不是其内容。默认情况下，它被左对齐。在Android中，我相信可以使用TextView的gravity属性来实现此效果。 示例：

- jeroen-meijer

Answer 1

文本居中属性只设置水平对齐。

我使用了以下代码将文本垂直和水平居中。

代码：

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

- Shelly Pritchard

---

@Shelly 在某些情况下它可能不起作用，你需要添加heightFactor:属性，例如： Center( heightFactor: 2.3, child: Text('自拍',textAlign: TextAlign.center, style: TextStyle(fontSize: 18.0, color: Colors.black, fontWeight: FontWeight.bold, ) ), ), - Sanjeev Sangral

我看了一下，同意这个答案。将其更改为正确的答案，因为它在水平和垂直方向上都居中。 - jeroen-meijer

如果您发现文本仍未垂直居中，并且已在TextStyle中设置了高度，请记得在TextStyle中同时设置leadingDistribution: TextLeadingDistribution.even。 - Victor Kwok

Answer 2

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

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

- Tree

---

我不确定为什么这被标记为答案，因为这只能让文本水平居中，但问题要求水平和垂直都居中。 - Herohtar

应该将这句话删除，它并没有回答问题。 - Hasen

Answer 3

我认为更灵活的选择是将Text()包裹在Align()中：

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

Center() 方法似乎完全忽略了 Text widget 上的 TextAlign 属性。如果您尝试使用 TextAlign.left 或者 TextAlign.right 进行对齐，它将无法实现，文本仍然会处于中心位置。

- Mike

---

更好的答案是这个。 - Nikola Jovic

这应该是标记的答案，因为问题是关于如何在水平和垂直方向上居中文本。谢谢！ - aligur

这是答案，伙计们。只是在想为什么我的文本与较大的字体大小不对齐，结果发现居中会让文本变得怪怪的，并且在某个断点处忽略文本大小。而对齐似乎没有这个问题...爱你们 <3。 - ValdaXD

对于大字体，您可能还需要设置TextStyle（leadingDistribution：TextLeadingDistribution.even）以使它们在垂直方向上正确居中。 - dan-gph

Answer 4

将您的文本小部件用 Align 包装，并将 alignment 设置为 Alignment.center。

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

这对我来说产生了最佳结果。

- Paul Kitatta

Answer 5

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

错误的方式：

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

正确的方式：

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

- Samuel Quiroz

---

虽然从技术角度来说你是正确的，但按照你最初描述的方式做会产生语法错误，所以是的，不过我认为显然不应该这样做，因为它甚至无法编译 :p。 - jeroen-meijer

Answer 6

您需要在文本小部件上使用 textAlign 属性。这对我来说产生了最好的结果。

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

- Kasujja Muhammed

Answer 7

如果你是IntelliJ IDE用户，你可以使用快捷键Alt+Enter，然后选择Wrap with Center，接着添加textAlign: TextAlign.center。

- Ray Coder

---

这绝对让我开心。我一直在尝试使用IDE包装，但没有想到上下文菜单。谢谢！ - Benjamin Charais

不用谢。希望你能节省时间！ - Ray Coder

总的来说，这是一个很好的提示！这使得生活变得更加容易。 - stan

Answer 8

将文本置于中心:

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

- Minghang

Answer 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
);
}

享受编码的乐趣 ‍

- Ramesh R C

Answer 10

概述：我使用Flex小部件通过水平轴上的MainAxisAlignment.center来居中文本。我使用容器填充来创建文本周围的边距空间。

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

- Golden Lion