如何将 RaisedButton 移动到屏幕的底部中心？答案

【问题标题】：How to Move RaisedButton to Bottom Center of The Screen?如何将 RaisedButton 移动到屏幕的底部中心？
【发布时间】：2020-08-29 15:09:58
【问题描述】：

我尝试将RaisedButton() 从屏幕中心移动到底部中心。我试过Align()，但没有用。怎么做？

Screenshot of my app

这里是我的代码：

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 200,
              height: 200,
              child: Image(
                image: AssetImage('images/Logoku (Dark).jpg'),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: RaisedButton(
                child: Text('Go to First Page'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            )
          ],
        ),
      ),

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

用 Stack 替换 Column 并将 Center 小部件按正确的顺序放置。

body: Stack(

        children: [
          Center(
            child: Container(
            
              width: 200,
              height: 200,
              child: Image(
                image: AssetImage('images/Logoku (Dark).jpg'),
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: RaisedButton(
              child: Text('Go to First Page'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          )
        ],
      ),

【讨论】：

【解决方案2】：

Center 会努力让孩子居中。但是，由于您使用的是柱子，它会使柱子的最小高度成为可能。由于您似乎希望将图像放在中间，所以我不会使用中心，我会使用 Spacers。

body:  Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Spacer(),
            Container(
              width: 200,
              height: 200,
              child: Image(
                image: AssetImage('images/Logoku (Dark).jpg'),
              ),
            ),
            Spacer(),
            RaisedButton(
                child: Text('Go to First Page'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            
          ],
        ),

【讨论】：

【解决方案3】：

这应该不起作用，因为您将 column 设置为 mainAxisALignment.center，这强制其子项居中，并且您知道列主轴是从上到下的。删除 MainAxisALignment.center强>.

【讨论】：

【解决方案4】：

我认为这可以完成工作，

 body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(),
              Container(
                width: 200,
                height: 200,
                child: Image(
                  image: NetworkImage('https://picsum.photos/200'),
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: RaisedButton(
                  color: Colors.green,
                  child: Text('Go to First Page'),
                  onPressed: () {},
                ),
              )
            ],
          ),

输出：

【讨论】：