Flutter登录页键盘交互：需实现Android默认覆盖UI至聚焦TextField（非重复问题）

嘿，作为刚从Android转Flutter的开发者，这种布局适配的坑我太懂了！你用Stack做登录页，想实现键盘从底部上来覆盖UI、只把聚焦的TextField推到键盘上方的Android默认效果，确实和那种“完全禁止页面resize”的问题不一样，咱们来一步步解决：

核心思路 #

Flutter默认的resizeToAvoidBottomInset: true会让整个页面跟着键盘上移，导致你的背景图片也被顶上去；但直接设为false又会让TextField被键盘盖住。咱们需要的是让底部表单随键盘高度动态上移，背景保持不动，模拟Android的adjustPan行为。

具体实现代码 #

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 禁止页面整体resize，避免背景图片上移
      resizeToAvoidBottomInset: false,
      body: Stack(
        children: [
          // 背景图片（始终占满屏幕，不会被键盘顶起）
          Positioned.fill(
            child: Image.asset(
              'assets/login_bg.png', // 替换成你的图片路径
              fit: BoxFit.cover,
            ),
          ),
          // 底部登录表单，随键盘高度动态调整位置
          AnimatedContainer(
            duration: const Duration(milliseconds: 200),
            // 用viewInsets.bottom获取键盘高度，设置底部padding
            padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    TextField(
                      decoration: const InputDecoration(
                        hintText: '请输入手机号',
                        filled: true,
                        fillColor: Colors.white,
                      ),
                    ),
                    const SizedBox(height: 16),
                    TextField(
                      obscureText: true,
                      decoration: const InputDecoration(
                        hintText: '请输入密码',
                        filled: true,
                        fillColor: Colors.white,
                      ),
                    ),
                    const SizedBox(height: 24),
                    SizedBox(
                      width: double.infinity,
                      child: ElevatedButton(
                        onPressed: () {},
                        child: const Text('登录'),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键细节说明 #

• resizeToAvoidBottomInset: false：阻止Scaffold自动调整页面大小，保证背景图片不会被顶上去。
• MediaQuery.of(context).viewInsets.bottom：实时获取键盘的高度，当键盘弹出时，这个值会从0变为键盘的实际高度。
• AnimatedContainer：让表单上移的过程有平滑过渡，提升用户体验；如果不需要动画，换成普通Container即可。

这样设置后，键盘弹出时会覆盖背景图片的下半部分，而你的TextField会刚好停在键盘上方，完全符合Android的默认行为~

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