如何用Flutter实现指定布局：将FlatButton置于屏幕底部

我来帮你搞定这个布局问题！你的FlatButton没在屏幕底部，是因为当前的Column用了MainAxisAlignment.center让所有控件居中显示，再加上外层的Center组件限制了容器范围，导致按钮没法延伸到底部。下面给你两种简单可行的修改方案：

方案一：使用Spacer分隔内容与底部按钮 #

Spacer会自动占据屏幕中间的剩余空间，把底部按钮直接推到屏幕最下方。你需要先移除外层的Center（否则容器不会占满屏幕高度），然后在登录按钮和注册按钮之间添加Spacer：

import 'package:flutter/material.dart';

class SignupScreen extends StatefulWidget {
  final _username, _email, _password;
  @override
  _SignupScreenState createState() => new _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container(
        padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 20.0), // 给底部按钮加内边距，避免贴边
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            new TextField(
              keyboardType: TextInputType.emailAddress,
              decoration: new InputDecoration(
                hintText: 'Email'
              )
            ),
            SizedBox(height: 16), // 控件间增加间距，优化视觉效果
            new TextField(
              obscureText: true,
              decoration: new InputDecoration(
                hintText: 'Password'
              )
            ),
            SizedBox(height: 24),
            new RaisedButton(
              onPressed: () {},
              child: new Text('Sign In')
            ),
            // 用Spacer占据中间剩余空间，把按钮推到底部
            Spacer(),
            new FlatButton(
              onPressed: () {},
              child: new Text('Sign Up')
            ),
          ],
        )
      )
    );
  }
}

方案二：用Expanded包裹表单内容 #

另一种思路是把表单部分（输入框+登录按钮）用Expanded包裹，让它占据除底部按钮外的所有屏幕空间，同时保持表单区域居中：

import 'package:flutter/material.dart';

class SignupScreen extends StatefulWidget {
  final _username, _email, _password;
  @override
  _SignupScreenState createState() => new _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container(
        padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  new TextField(
                    keyboardType: TextInputType.emailAddress,
                    decoration: new InputDecoration(
                      hintText: 'Email'
                    )
                  ),
                  SizedBox(height: 16),
                  new TextField(
                    obscureText: true,
                    decoration: new InputDecoration(
                      hintText: 'Password'
                    )
                  ),
                  SizedBox(height: 24),
                  new RaisedButton(
                    onPressed: () {},
                    child: new Text('Sign In')
                  ),
                ],
              ),
            ),
            new FlatButton(
              onPressed: () {},
              child: new Text('Sign Up')
            ),
          ],
        )
      )
    );
  }
}

额外小提示 #

• 我给控件之间加了SizedBox来增加间距，让布局更美观，你可以根据需求调整高度。
• 给容器底部加了内边距，避免按钮紧贴屏幕边缘，提升用户体验。

内容的提问来源于stack exchange，提问作者user818700