如何使用中心和列小部件内的对齐小部件在底部有两个按钮？答案

【问题标题】：How can I have two buttons in the bottom using align widget inside the center and column widgets?如何使用中心和列小部件内的对齐小部件在底部有两个按钮？
【发布时间】：2021-03-12 05:53:56
【问题描述】：

我正在尝试将一个包含两个人的分组按钮放在底部。这是一个登录屏幕，所以还有其他内容。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: SafeArea(
        child: Center(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 75.0,
              ),
              Text('Login'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    color: Colors.orange,
                    onPressed: () {
                      print('login');
                    },
                  ),
                  RaisedButton(
                    onPressed: () {
                      print('signup');
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

我一直在尝试对齐底部和其他东西。但是对于Row()，它不适用于Center + Column 小部件。如何将这两个按钮发送到 Center 小部件的底部？

【问题讨论】：

标签： flutter

【解决方案1】：

有多种方法可以做到这一点。其中之一是使用Spacer 小部件：

 Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: SafeArea(
        child: Center(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 75.0,
              ),
              Spacer(),
              Text('Login'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    color: Colors.orange,
                    onPressed: () {
                      print('login');
                    },
                  ),
                  RaisedButton(
                    onPressed: () {
                      print('signup');
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );

另一种方法是反转列并从底部开始，但很可能不需要副作用。

另外，一种选择是借助 MediaQuery.of(context).size.height 值将整个屏幕划分为固定高度的分区，以便您的按钮始终位于底部。

【讨论】：

【解决方案2】：

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: SafeArea(
        child: Center(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 75.0,
              ),
              Text('Login'),
              Expanded(
                child:Container
                  (
                  alignment: Alignment.bottomCenter,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      RaisedButton(
                        color: Colors.orange,
                        onPressed: () {
                          print('login');
                        },
                      ),
                      RaisedButton(
                        onPressed: () {
                          print('signup');
                        },
                      ),
                    ],
                  ),
                )

               )

            ],
          ),
        ),
      ),
    );
  }

【讨论】：