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

Question

我想知道如何在 Flutter 中将文本小部件的内容垂直和水平居中。 我只知道如何使用

Center(child: Text("test"))

将小部件本身居中，但不知道内容本身。默认情况下，它是左对齐的。在 Android 中，我相信实现此目的的 TextView 的属性称为

gravity

。

我想要的例子：

Answer 1

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

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

代码：

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

Answer 2

您可以使用

TextAlign

构造函数的

Text

属性。

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

使用

Center()

似乎完全忽略了

TextAlign

在文本小部件上。如果您尝试，它不会对齐

TextAlign.left

或

TextAlign.right

，它将保留在中心。

Answer 4

用

Align

包裹您的文本小部件并将

alignment

设置为

Alignment.center

.

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

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

Answer 5

文本标题必须始终在最前面。

错误的方式：

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

正确的方式：

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

Answer 6

您需要在文本小部件上使用

textAlign

属性。它为我带来了最好的结果

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

Answer 7

如果你是intellij IDE用户，可以使用快捷键

Alt+Enter

然后选择

Wrap with Center

然后添加

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

享受编码👨u200d💻

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

将您的文本小部件包裹在对齐小部件中并添加 Alignment.center.

Align(
  alignment: Alignment.center,
  child: Text(
    'Some Text',
    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
  ),
)

Answer 13

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