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

Posted

技术标签:

【中文标题】如何使用中心和列小部件内的对齐小部件在底部有两个按钮?【英文标题】: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 小部件的底部?

【问题讨论】:

【参考方案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');
                        ,
                      ),
                    ],
                  ),
                )

               )

            ],
          ),
        ),
      ),
    );
  

【讨论】:

以上是关于如何使用中心和列小部件内的对齐小部件在底部有两个按钮?的主要内容,如果未能解决你的问题,请参考以下文章

无法居中列小部件

如何将一列小部件紧紧包裹在卡片中?

如何将文本对齐到 IconButton 小部件的中心底部?

在颤动中对齐 Row 小部件的子项内的文本

如何在 Flutter 中对齐小部件内的按钮

如何在 Flutter 中对齐单个小部件?