这是登录/注册屏幕的代码。我的问题是我想让最后一个按钮始终位于屏幕的特定部分(例如底部)。布局应为:
1。某些文本/徽标靠近顶部(总是在同一位置)
2。在屏幕中央的输入
3。靠近底部的按钮(始终在同一位置)
我曾尝试使用align小部件,或使用.spaceEvenly将布局的3个部分放到3个特定的列中,但我没有成功。在这两个版本中都没有发生任何事情。
@override
Widget build(BuildContext context) {
print("Building login screen");
return Scaffold(
body: Container(
constraints: BoxConstraints.expand(
height: MediaQuery.of(context).size.height,
),
decoration: BoxDecoration(color: Color(0xff34056D)),
child: Form(
autovalidate: true,
key: _formKey,
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.fromLTRB(32, 96, 32, 0),
child: Column(
children: <Widget>[
Text(
"Fitness Companion",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 36, color: Colors.white),
),
SizedBox(height: 32),
_authMode == AuthMode.Register ? _buildDisplayNameField() : Container(),
_buildEmailField(),
_buildPasswordField(),
_authMode == AuthMode.Register ? _buildConfirmPasswordField() : Container(),
SizedBox(height: 32),
ButtonTheme(
minWidth: 200,
child: RaisedButton(
padding: EdgeInsets.all(10.0),
onPressed: () => _submitForm(),
child: Text(
_authMode == AuthMode.Login ? 'Login' : 'Register',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
),
SizedBox(height: 16),
ButtonTheme(
minWidth: 200,
child: FlatButton(
padding: EdgeInsets.all(10.0),
child: Text(
'${_authMode == AuthMode.Login ? 'No account yet? Register here!' : 'Already registered? Login here!'}',
style: TextStyle(fontSize: 20, color: Colors.white),
),
onPressed: () {
setState(() {
_passwordController.clear();
_authMode = _authMode == AuthMode.Login ? AuthMode.Register : AuthMode.Login;
});
},
),
),
],
),
),
),
),
),
);
}
我通过尝试和错误找到了解决方案,这就是我的解决方案:
Column(
children: <Widget>[
Text("item1"),
Expanded(child: Container()),
Text("item2"),
Expanded(child: Container()),
Text("item3"),
],
)
只需在要对齐的小部件之间放置一个展开的小部件。
希望有帮助