Flutter登录页键盘适配：保留登录按钮可见，覆盖下方元素

要实现键盘弹出时Login按钮可见、下方元素被覆盖的效果，核心是打破Flutter默认的整体上移行为，自定义布局控制元素的显示逻辑。以下两种方案可以解决问题：

方案一：用Stack固定Login按钮，下方元素自然被键盘覆盖 #

通过Stack将顶部可滚动内容和底部固定区域分离，键盘弹出时，底部区域的下方元素会被键盘自动覆盖，而Login按钮保持在键盘上方可见：

Scaffold(
  body: Stack(
    children: [
      // 顶部可滚动内容：Logo、输入框等，留出底部按钮空间
      SingleChildScrollView(
        padding: const EdgeInsets.only(bottom: 140),
        child: Column(
          children: [
            const SizedBox(height: 80),
            const Icon(Icons.account_circle, size: 100),
            const SizedBox(height: 40),
            TextField(decoration: const InputDecoration(hintText: "Username")),
            const SizedBox(height: 20),
            TextField(
              decoration: const InputDecoration(hintText: "Password"),
              obscureText: true,
            ),
          ],
        ),
      ),
      // 底部固定区域：Login按钮在上方，下方元素会被键盘覆盖
      Positioned(
        left: 0,
        right: 0,
        bottom: 0,
        child: Column(
          children: [
            // Login按钮，始终在键盘上方
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: ElevatedButton(
                onPressed: () {},
                child: const Text("Login"),
                style: ElevatedButton.styleFrom(minimumSize: const Size(double.infinity, 50)),
              ),
            ),
            // 分割线、第三方登录按钮，键盘弹出时被覆盖
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: Divider(),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(onPressed: () {}, icon: const Icon(Icons.facebook)),
                IconButton(onPressed: () {}, icon: const Icon(Icons.google)),
              ],
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
    ],
  ),
)

原理说明 #

• Flutter默认resizeToAvoidBottomInset: true，键盘弹出时会缩小Scaffold body的高度（减去键盘高度）。
• Positioned的bottom:0会自动对齐到缩小后的body底部，也就是键盘的顶部，所以Login按钮始终可见。
• 底部的分割线、第三方登录按钮因为在Login按钮下方，超出了缩小后的body范围，自然被键盘覆盖。

方案二：动态隐藏下方元素，精准控制显示 #

关闭默认的键盘上移行为，通过MediaQuery判断键盘状态，动态隐藏下方元素，同时确保Login按钮固定在底部：

Scaffold(
  // 关闭默认的body上移行为
  resizeToAvoidBottomInset: false,
  body: LayoutBuilder(
    builder: (context, constraints) {
      // 获取键盘高度
      final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
      return SingleChildScrollView(
        child: ConstrainedBox(
          // 让Column高度至少占满屏幕
          constraints: BoxConstraints(minHeight: constraints.maxHeight),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 顶部内容：Logo、输入框
              Column(
                children: [
                  const SizedBox(height: 80),
                  const Icon(Icons.account_circle, size: 100),
                  const SizedBox(height: 40),
                  TextField(decoration: const InputDecoration(hintText: "Username")),
                  const SizedBox(height: 20),
                  TextField(
                    decoration: const InputDecoration(hintText: "Password"),
                    obscureText: true,
                  ),
                ],
              ),
              // 底部区域
              Column(
                children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text("Login"),
                    style: ElevatedButton.styleFrom(minimumSize: const Size(double.infinity, 50)),
                  ),
                  // 键盘未弹出时才显示下方元素
                  if (keyboardHeight == 0)
                    Column(
                      children: [
                        const Padding(
                          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                          child: Divider(),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            IconButton(onPressed: () {}, icon: const Icon(Icons.facebook)),
                            IconButton(onPressed: () {}, icon: const Icon(Icons.google)),
                          ],
                        ),
                        const SizedBox(height: 20),
                      ],
                    ),
                ],
              ),
            ],
          ),
        ),
      );
    },
  ),
)

原理说明 #

• resizeToAvoidBottomInset: false阻止Scaffold自动调整body高度，键盘会直接覆盖在页面上。
• 通过MediaQuery.of(context).viewInsets.bottom获取键盘高度，为0时说明键盘未弹出，显示下方元素；不为0时隐藏，确保Login按钮始终在底部可见。
• SingleChildScrollView保证顶部输入框在被键盘遮挡时可以滚动查看。

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