Flutter如何实现键盘弹出时登录按钮自动悬浮显示在键盘上方

核心调整思路 #

你当前按钮被遮挡的核心原因是手动关闭了Scaffold的resizeToAvoidBottomInset适配属性，导致页面不会响应键盘高度变化自动调整布局。以下方案完全基于Flutter官方原生组件实现，无hack逻辑，可同时满足你两种场景的布局需求：

• 键盘收起时：登录按钮保持在页面底部，保留原有的底部间距
• 键盘弹出时：登录按钮自动上浮到键盘上方，位于密码输入框下方

具体实现代码 #

Scaffold(
  // 移除原有的resizeToAvoidBottomInset: false配置，默认true即开启键盘适配
  backgroundColor: Colors.white,
  body: SingleChildScrollView(
    physics: const BouncingScrollPhysics(),
    child: ConstrainedBox(
      // 约束容器最小高度为当前页面可视区域高度
      constraints: BoxConstraints(
        minHeight: MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top,
      ),
      child: IntrinsicHeight(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Column(
              children: [
                const SizedBox(height: 48.0,),
                Padding(
                  padding: const EdgeInsets.only(left: 24.0, right: 25.0),
                  child: Form(
                    key: _loginFormKey,
                    child: Column(
                      children: [
                        TextFormField(
                          onChanged: (value) {
                            setState(() => email = value);
                          },
                        ),
                        const SizedBox(height: 24.0,),
                        TextFormField(
                          onChanged: (value) {
                            setState(() => password = value);
                          },
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Padding(
              padding: EdgeInsets.only(
                left: 23.0, 
                right: 24, 
                // 自适应底部间距：键盘弹出时缩小间距，收起时保留原有64px间距
                bottom: MediaQuery.of(context).viewInsets.bottom > 0 ? 16.0 : 64.0,
              ),
              child: SizedBox(
                width: double.infinity,
                child: PrimaryButton(
                  buttonText: 'LOG IN',
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

可选优化（按钮固定在密码框下方） #

如果你不需要按钮在键盘收起时沉底，而是始终位于密码输入框正下方，只需要把登录按钮的代码直接移到Form的Column子节点的最后一位即可，其余逻辑保持不变。

关于你提到的备选方案说明 #

使用floatingActionButton配合MediaQuery的方案也可以实现效果，但FAB本身是为悬浮按钮场景设计的，实现满宽的登录按钮需要额外调整偏移参数，灵活度不如上述布局方案，更推荐使用上面的原生布局实现。

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