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

Question

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

我想要的示例：

Answer 1

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

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

代码：

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

Answer 2

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

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

Answer 3

我认为更灵活的选择是将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 ，它将保持在中心。

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

错误道：

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

正确的路：

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

Answer 8

将文本置于中心：

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

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

享受编码👨‍💻

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

Answer 11

你必须设置你的文本小部件属性来设置 textAlign.center。

center(
   child : Text(
  'Hello',
   textAlign: TextAlign.center))

Answer 12

要在容器用户mainAxisAlignment: MainAxisAlignment.center,

     Container(
         child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                   Align(
                        alignment: Alignment.center,
                              child: Text('Student Name',
                                  style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold),
                                textAlign: TextAlign.left),
                         ),                
                     ]),
                )

Answer 13

Text(
   "Hello",
   textAlign: TextAlign.center, // add this line
)

Answer 14

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