如何在 Flutter 中居中放置 2 个或更多小部件（屏幕）？

Question

我想将 2 个按钮和文本置于屏幕中央。我想要这样的东西，

我正在使用这段代码：

body: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_counter',
              style: TextStyle(
                  fontSize: 40.0,
                  fontFamily: 'Hero',
                  fontWeight: FontWeight.bold),
            ),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    _counter += 1;
                  });
                },
                child: Text('Increment')),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    _counter -= 1;
                  });
                },
                child: Text('Decrement'))
          ],
        ),
      ],
    ),

我现在使用行和列小部件并将 MainAxisAlignment 设置为居中。我想这不是一个有效的方法。

我尝试了这个代码，如其他 stackoverflow 问题所示（使用 CrossAxisAlignment）

body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text(
          '$_counter',
          style: TextStyle(
              fontSize: 40.0,
              fontFamily: 'Hero',
              fontWeight: FontWeight.bold),
        ),
        ElevatedButton(
            onPressed: () {
              setState(() {
                _counter += 1;
              });
            },
            child: Text('Increment')),
        ElevatedButton(
            onPressed: () {
              setState(() {
                _counter -= 1;
              });
            },
            child: Text('Decrement'))
      ],
    ),

但这段代码没有按照我想要的方式工作！它向我展示了这样的东西。

有什么解决办法吗？提前致谢 ：）

Answer 1

用 包裹你的专栏Center。

body:Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[