Flutter：如何将Widget固定在SingleChildScrollView底部？

这个问题我之前也碰到过！核心原因是SingleChildScrollView会让它的子Widget（也就是你的Column）自适应内容高度，而不是占满父容器的可用空间，所以MainAxisAlignment.spaceBetween自然就失去了作用——Column根本没有多余的空间来分配间距。

要实现「内容可滚动适配键盘 + 指定Widget固定在底部」的需求，你只需要给Column套一个ConstrainedBox，强制它的最小高度等于当前屏幕的可用高度，这样Column就能撑满屏幕，spaceBetween就能正常工作，同时SingleChildScrollView还能在内容超出时提供滚动能力。

修改后的代码示例 #

SingleChildScrollView(
  padding: const EdgeInsets.symmetric(horizontal: 16),
  child: ConstrainedBox(
    // 强制Column最小高度为屏幕可用高度，扣除系统安全区域
    constraints: BoxConstraints(
      minHeight: MediaQuery.of(context).size.height - 
          MediaQuery.of(context).padding.top - 
          MediaQuery.of(context).padding.bottom,
    ),
    child: 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,
                ),
              ),
            )
          ],
        )
      ],
    ),
  ),
);

关键细节解释 #

1. ConstrainedBox的作用：强制Column的最小高度等于屏幕可用高度，这样Column就会撑满整个视口，MainAxisAlignment.spaceBetween就能把Form部分推到顶部，底部的按钮组固定在屏幕底部。
2. MediaQuery的使用：通过MediaQuery.of(context).padding获取状态栏和底部安全区域的高度，避免内容被系统UI遮挡。
3. 滚动逻辑保留：当键盘弹出或者内容高度超过屏幕时，SingleChildScrollView依然能正常滚动，完全适配你的需求。

另外还有一种更灵活的替代方案，用LayoutBuilder直接获取父容器的可用高度，不需要手动计算安全区域：

SingleChildScrollView(
  padding: const EdgeInsets.symmetric(horizontal: 16),
  child: LayoutBuilder(
    builder: (context, constraints) {
      return ConstrainedBox(
        constraints: BoxConstraints(minHeight: constraints.maxHeight),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          // ... 其余代码不变
        ),
      );
    },
  ),
);

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