Question

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

我想要的例子：

Answer 1

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

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

Answer 2

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

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

代码：

      child: Center(
        child: new Text(
        "Keerthanai Songs",
        textAlign: TextAlign.center,
        ),
      )

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

享受编码?‍?

Answer 4

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

Answer 5

我认为更灵活的选择是将import android.app.LoaderManager;用Text()包裹起来，如下所示：

Align()

在文本窗口小部件上，使用Align( alignment: Alignment.center, // Align however you like (i.e .centerRight, centerLeft) child: Text("My Text"), ),似乎完全忽略了Center()。如果尝试，它将不会对齐TextAlign或TextAlign.left，它将保留在中心。

Answer 6

将文本放在中心

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

Answer 7

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

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

Answer 8

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

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

Answer 9

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

如何在Flutter中纵向和横向居中文本？

9 个答案: