Flutter注册表单适配键盘：表单上移及白色区域扩展问题

问题分析 #

你遇到的两个核心问题：

1. 仅最后一个TextField触发表单上移：因为默认情况下只有焦点靠近键盘边缘的输入框会触发系统自动调整，未对所有输入框的焦点状态做统一监听。
2. 白色区域未扩展且遮挡表单：表单容器未根据键盘高度动态调整底部内边距，导致键盘弹出时容器高度不足，出现遮挡。

解决方案 #

通过焦点监听+动态布局调整解决这两个问题，以下是完整实现代码：

import 'package:flutter/material.dart';

class RegisterPage extends StatefulWidget {
  const RegisterPage({super.key});

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  // 为每个TextField创建焦点节点
  late final List<FocusNode> _focusNodes;
  // 表单偏移量，控制上移/恢复
  double _formOffset = 0.0;
  // 自定义上移距离，可根据实际布局调整
  final double _moveDistance = 160.0;

  @override
  void initState() {
    super.initState();
    // 初始化焦点节点并添加监听
    _focusNodes = List.generate(3, (index) {
      final node = FocusNode();
      node.addListener(_handleFocusChange);
      return node;
    });
  }

  void _handleFocusChange() {
    // 检查是否有任意输入框获得焦点
    bool hasFocus = _focusNodes.any((node) => node.hasFocus);
    setState(() {
      // 有焦点则上移表单，无焦点则恢复原位
      _formOffset = hasFocus ? -_moveDistance : 0.0;
    });
  }

  @override
  void dispose() {
    // 释放所有焦点节点资源
    for (var node in _focusNodes) {
      node.removeListener(_handleFocusChange);
      node.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 确保页面响应键盘弹出（默认值为true，若手动设为false需改回）
      resizeToAvoidBottomInset: true,
      body: Stack(
        children: [
          // 页面背景内容（示例用灰色背景）
          Container(color: Colors.grey[200]),
          // 底部表单容器
          AnimatedPositioned(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
            left: 0,
            right: 0,
            bottom: 0,
            // 通过transform实现表单上移
            transform: Matrix4.translationValues(0, _formOffset, 0),
            child: Container(
              color: Colors.white,
              padding: EdgeInsets.only(
                left: 16,
                right: 16,
                top: 24,
                // 动态添加键盘高度作为底部内边距，避免遮挡
                bottom: MediaQuery.of(context).viewInsets.bottom + 24,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  TextField(
                    focusNode: _focusNodes[0],
                    decoration: const InputDecoration(hintText: '用户名'),
                  ),
                  const SizedBox(height: 16),
                  TextField(
                    focusNode: _focusNodes[1],
                    decoration: const InputDecoration(hintText: '邮箱'),
                  ),
                  const SizedBox(height: 16),
                  TextField(
                    focusNode: _focusNodes[2],
                    decoration: const InputDecoration(hintText: '密码'),
                    obscureText: true,
                  ),
                  const SizedBox(height: 32),
                  SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      onPressed: () {},
                      child: const Text('完成注册'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

1. 焦点统一监听：为每个TextField创建FocusNode，通过监听焦点状态变化，统一控制表单的上移/恢复，确保任意输入框获得焦点时都能触发表单上移。
2. 动态内边距调整：利用MediaQuery.of(context).viewInsets.bottom获取键盘高度，将其作为表单容器的底部内边距，让白色区域随键盘弹出自动扩展，彻底解决遮挡问题。
3. 平滑动画过渡：使用AnimatedPositioned实现表单移动的平滑过渡，提升用户体验。

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