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

来自Flutter关于Container的文档：

没有子容器的容器尝试尽可能大，除非传入的约束不受限制，在这种情况下，它们将尝试尽可能小。 具有子级的容器会根据其子级自行调整大小。构造函数的width，height和约束参数会对此进行覆盖。

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

您的Column和Text('Logo')不够大，无法使用所有屏幕宽度，因此Container并没有使用您在图像中看到的所有屏幕宽度（用{ {3}}，这对于调试非常有用）

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

文本未使用横轴对齐居中

1 个答案: