首页 > 解决方案 > 如何将元素设置到 SingleCildScrollView 的底部?

问题描述

我创建了一个可以很好地与列配合使用的屏幕,但由于键盘的原因,我需要滚动。我正在使用 SingleChildScrollView,但 Column 的 MainAxisAligment 在 Scrollable 内不起作用。

主要问题是 - 我需要在 Scrollable 底部设置 Widget

我用谷歌搜索了这个问题并发现了这个: Flutter - SingleChildScrollView interfering in columns 但是这个具体问题没有解决方案。

我的代码:

SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Form(
              child: Column(
                children: <Widget>[
                  buildTextField(
                    'E-mail',
                    (text) {},
                    controller: _loginController,
                    textColor: Theme.of(context).buttonColor,
                    hintColor: Theme.of(context).hintColor,
                    margin: EdgeInsets.only(top: 16),
                  ),
                  buildTextField(
                    'Password',
                    (text) {},
                    focus: _textSecondFocusNode,
                    controller: _passwordController,
                    onSubmit: (_) => presenter.login(_loginController.text, _passwordController.text),
                    textColor: Theme.of(context).buttonColor,
                    hintColor: Theme.of(context).hintColor,
                    letterSpacing: 15,
                    icon: InkWell(
                      onTap: () {
                      },
                      child: Image.asset('assets/ic_eye.png'),
                    ),
                    margin: const EdgeInsets.only(top: 16),
                    padding: const EdgeInsets.only(left: 16, top: 4, bottom: 4),
                    obscureText: true,
                  ),
                ],
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 0),
                  child: InkWell(
                    child: Text(
                      'Registration',
                      style: TextStyle(color: Theme.of(context).buttonColor, decoration: TextDecoration.underline),
                    ),
                    onTap: () =>
                        Navigator.push(context, CupertinoPageRoute(builder: (context) => StartRegistrationScreen())),
                  ),
                ),
                Buttons.buildRaisedButton(
                  Text(
                    'Login',
                    style: TextStyle(color: Colors.white, fontSize: 17, fontFamily: 'SFUIDisplay'),
                  ),
                  (){},
                  color: Theme.of(context).buttonColor,
                  disabledColor: Theme.of(context).disabledColor,
                  margin: const EdgeInsets.only(top: 16),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 16, bottom: 16),
                  child: Text(
                    'Forgot password',
                    style: TextStyle(
                      color: Theme.of(context).buttonColor,
                      decoration: TextDecoration.underline,
                    ),
                  ),
                )
              ],
            )
          ],
        ),
      );

由于键盘,我想要这样的带有可滚动内容的东西。但我有这个

标签: flutterflutter-layout

解决方案


在顶部的列小部件中包裹一个展开的小部件,以便它继续展开直到底部。然后,将您的登录按钮放在其下方。然后键盘不会覆盖您的登录按钮小部件。


推荐阅读