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

116

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

我想要的例子：

— 耶隆·迈耶
source

262

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

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

码：

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

— 雪莉·普里查德
source

1

@Shelly在某些情况下不起作用，您还需要添加heightFactor：属性，例如：Center（heightFactor：2.3，child：Text（'SELFIE'，textAlign：TextAlign.center，style：TextStyle（fontSize：18.0，color： Colors.black，fontWeight：FontWeight.bold，）），）

— Sanjeev Sangral，

我看了看并同意。由于它在水平和垂直方向上居中，因此将其更改为正确答案。

— jeroen-meijer

85

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

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

— 树
source

36

我不确定为什么将其标记为答案，因为这仅使文本居中，但问题要求水平和垂直。

— Herohtar '19

3

是的，应将其删除，它不能回答问题。

— 哈森

51

我认为，更灵活的选择是换行Text()与Align()像这样：

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

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

— 麦克风
source

1

更好的答案是这个。

— Nikola Jovic

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

— 阿里·古瑞利（AliGürelli）'20年

这就是答案，只是想知道为什么我的文本不能与更大的字体对齐，结果证明居中它与文本很奇怪，并且其中一个断点将忽略文本大小。Align似乎没有这个问题...爱你<3

— ValdaXD

8

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

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

— 保罗·基塔塔
source

3

在示例代码下方，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
);
}

享受编码👨‍👨

— 拉梅什RC
source

2

将文本放在中心：

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

— 明航
source

2

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

— 射线编码器
source

0

概述：我使用Flex小部件使用MainAxisAlignment.center沿水平轴在页面上居中放置文本。我使用容器填充在文本周围创建空白区域。

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

— 金狮
source

0

也许您想为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,
              ),),
            ),

— 索罗斯的谎言
source