将列的特定子项添加到底部

问题描述 投票:0回答:1

这是登录/注册屏幕的代码。我的问题是我想让最后一个按钮始终位于屏幕的特定部分(例如底部)。布局应为:

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;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
);

}

flutter flutter-layout
1个回答
0
投票

我通过尝试和错误找到了解决方案,这就是我的解决方案:

Column(
    children: <Widget>[
      Text("item1"),
      Expanded(child: Container()),
      Text("item2"),
      Expanded(child: Container()),
      Text("item3"),
    ],
  )

只需在要对齐的小部件之间放置一个展开的小部件。

希望有帮助

© www.soinside.com 2019 - 2024. All rights reserved.