css - 为什么我的窗口小部件不在屏幕中央？

Question

Widget build(BuildContext context) {
return Scaffold(
  body: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text(
        'BMI:',
        style: TextStyle(color: Colors.white, fontSize: 50.0),
      ),
      FlatButton(
        child: Text('GO BACK'),
        color: Colors.grey,
        onPressed: () {
          Navigator.pop(context);
        },
      )
    ],
  ),
);}

我只希望文本和按钮垂直和水平位于屏幕中央。我将主轴和横轴对齐方式居中，但该列在屏幕的左侧，尽管它已垂直居中。只是不水平；我以为这就是横轴对齐的用途，为什么不将其居中？

Answer 1

问题是:CrossAxisAlignment有效，但您的列仅与图像上显示的一样宽。这样看来一切都没有发生。

在这里，您可以将整个列窗口小部件包装在中心窗口小部件中以使其工作。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'BMI:',
              style: TextStyle(color: Colors.white, fontSize: 50.0,),
            ),
            FlatButton(
              child: Text('GO BACK'),
              color: Colors.grey,
              onPressed: () {
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }

有关更多信息，请查看此问题link。
希望它会有所帮助。

提示:-在Android Studio中使用Flutter Inspector可获得有关小部件位置和对齐方式的正确提示。