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

Question

我正在尝试将文本水平居中。 请检查下面的代码。

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        color: Colors.black,
        child: Row(
          children: <Widget>[
            Column(
              children: <Widget>[_buildTitle()],
            ),
          ],
        ));
  }

  Widget _buildTitle() {
    return 
    Center(child: Container(
      margin: EdgeInsets.only(top: 100),
      child: Column(
        
        children: <Widget>[
          Text(
            "something.xyz",
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25,),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    ),);
    
  }
}

这个并没有水平居中，而是给出了以下输出结果。边缘等都没问题。

我该怎么办才能解决这个问题？

- PeakGen

---

你可以尝试使用列属性 crossAxisAlignment: CrossAxisAlignment.center。 - Ryosuke

@Ryosuke：那个不起作用。 - PeakGen

Answer 1

试试这个

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: LoginPage()));

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Container(
          color: Colors.black,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[_buildTitle()],
              ),
            ],
          )),
    );
  }

  Widget _buildTitle() {
    return Center(
      child: Container(
        margin: EdgeInsets.only(top: 100),
        child: Column(
          children: <Widget>[
            Text(
              "something.xyz",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 25,
              ),
              // textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

- Rishabh

---

这很好，但我不需要把所有东西都水平对齐。title 是我要添加到屏幕上的第一件事，还会有许多其他元素。当您在 Scaffold 中水平对齐 row 时，所有内容都会水平对齐。 - PeakGen

你想要实现什么？你想让文本居中显示吗？ - Rishabh

受到你的回答启发，我做了一些改动，现在它可以工作了。我很快会发布我的代码。 - PeakGen

Answer 2

你也可以使用 Container 和 TextAlign 来解决它：

Container(
   width: double.infinity,
   child: Text(
      'something.xyz',
      textAlign: TextAlign.center,
   ),
)

在这种情况下，容器使用double.infinity占据整个宽度。文本适应容器并可以使用TextAlign.center将其移至屏幕中央。

- Vasco

Answer 3

更简单的方法:

child: Center(
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
                   Text('Sunday', style: TextStyle(fontSize: 20),),
                 ],
               ),
             ), //Center

- a jimmy

Answer 4

设置

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

在程序中

- user14051651

Answer 5

我为这种用例添加了自己的小部件，它比行方案要短得多：

import 'package:flutter/material.dart';

class CenterHorizontal extends StatelessWidget {   

    CenterHorizontal(this.child);   
    final Widget child;

    @override   
   Widget build(BuildContext context) => 
        Row(mainAxisAlignment: MainAxisAlignment.center,children: [child]); 
}

结果如下：

CenterHorizontal(Text('this is horizontal centered'))

- Ride Sun

---

我认为使用命名参数可以改善代码的可读性：const CenterHorizontal({super.key, required this.child}); - Rowan Gontier

Answer 6

  Widget textSection = Container(
      child: Text(
      'This can be several lines centered in the child of a container Widget.',
      textAlign: TextAlign.center,
      style: TextStyle(
      fontSize: 15.0,
      color: Colors.white,
    ),
  ),
);

- Amy Kohtz-Tiffany

Answer 7

Container(
  width: double.infinity,
  child: const Text(
    "Hello World!",
    textAlign: TextAlign.center,
  ),
);

- Datapalace

Answer 8

如果我理解正确，您只想水平居中标题，而不是可能在其后出现的其他元素。

请查看以下代码:

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blueAccent,
          title: Text("DEMO"),
        ),
        body: Container(
            color: Colors.black,
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[_buildTitle()],
                ),
                Row(
                  children: <Widget>[
                    // add other elements that you don't to center horizontally
                    Text(
                      "other elements here",
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 25,
                      ),
                    ),
                  ],
                ),
              ],
            )));
  }

  Widget _buildTitle() {
    return Container(
      margin: EdgeInsets.only(top: 100),
      child: Text(
        "something.xyz",
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
          fontSize: 25,
        ),
      ),
    );
  }
}

给出的结果为：这里

- Moujabr

Answer 9

Flutter现在建议使用SizedBox来添加空白

SizedBox(
  width: double.infinity,
  child: Text('Hello World',
    textAlign: TextAlign.center,
    style: TextStyle(
      color: Colors.White,
      fontSize: 16.0,
      fontWeight: FontWeight.normal))),

- markhorrocks