layout - 文本未使用 crossaxisalignment 居中

Question

我正在使用 crossAxisAlignment: CrossAxisAlignment.center，但不知何故文本“ Logo ”没有居中。真的不太确定是什么原因造成的，我是不是漏掉了什么。

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: GestureDetector(
        child: Container(
          padding: EdgeInsets.only(
              top: 100.0, right: 20.0, left: 20.0, bottom: 20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text(
                'Logo',
                style: TextStyle(fontSize: 50.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

来自关于 Container 的 Flutter 文档:

Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this.

https://api.flutter.dev/flutter/widgets/Container-class.html

您的 Column 和 Text('Logo') 不够大，无法使用所有屏幕宽度，因此 Container 不使用您可以在图像中看到的所有屏幕宽度(使用 Dart DevTools 拍摄，这对调试非常有用)

您可以向您的 Column 添加更多小部件，宽度会随着它们的使用而增加，或者只添加 width: MediaQuery.of(context).size.width 到您的 Container 以占用父级的所有可用宽度。

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: GestureDetector(
        child: Container(
          width: MediaQuery.of(context).size.width,
          padding: EdgeInsets.only(
              top: 100.0, right: 20.0, left: 20.0, bottom: 20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text(
                'Logo',
                style: TextStyle(fontSize: 50.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}