Flutter中实现键盘上下箭头切换TextFormField的方法

我已经搭建了一个包含多个TextFormField的联系表单，目前通过TextInputAction.next实现了点击键盘“下一步”按钮切换到下一个输入框，但希望能让键盘顶部的上下箭头也支持输入框的上下切换操作。

当前键盘状态：

我的当前TextFormField代码：

Widget _createTextField(controller, keyboardType, int maxLength, int maxLines, String hintText, double screenWidth) {
    return Expanded(
      child: TextFormField(
        scrollPadding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        textCapitalization: TextCapitalization.sentences,
        textInputAction: TextInputAction.next,
        style: TextStyle(fontSize: (screenWidth > maxMobileScreenWidth) ? 16 : 12),
        controller: controller,
        keyboardType: keyboardType,
        maxLength: maxLength,
        maxLines: maxLines,
        validator: (value) {
          if (value!.isEmpty) {
            return '* Required field';
          }
          return null;
        },
        decoration: InputDecoration(
          counterText: "",
          filled: true,
          hintText: hintText,
          hintStyle: const TextStyle(color: Colors.black45),
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
          fillColor: const Color(0xff9ccb40),
        ),
      ),
    );
  }

解决方案 #

要实现上下箭头切换焦点，需要通过FocusNode管理每个输入框的焦点，以下是两种常用实现方式：

方式一：使用FocusTraversalGroup自动管理（推荐）

这种方式无需手动处理按键事件，系统会自动按组件顺序完成焦点遍历：

1. 在页面的State类中定义并初始化焦点节点列表：

late List<FocusNode> _focusNodes;

@override
void initState() {
  super.initState();
  // 根据你的输入框总数生成对应数量的FocusNode
  _focusNodes = List.generate(3, (index) => FocusNode());
}

@override
void dispose() {
  // 销毁所有焦点节点，避免内存泄漏
  for (var node in _focusNodes) {
    node.dispose();
  }
  super.dispose();
}

2. 修改_createTextField方法，添加focusNode参数：

Widget _createTextField(
  TextEditingController controller,
  TextInputType keyboardType,
  int maxLength,
  int maxLines,
  String hintText,
  double screenWidth,
  FocusNode focusNode, // 新增焦点节点参数
) {
  return Expanded(
    child: TextFormField(
      focusNode: focusNode, // 绑定焦点节点
      scrollPadding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      textCapitalization: TextCapitalization.sentences,
      textInputAction: TextInputAction.next,
      style: TextStyle(fontSize: (screenWidth > maxMobileScreenWidth) ? 16 : 12),
      controller: controller,
      keyboardType: keyboardType,
      maxLength: maxLength,
      maxLines: maxLines,
      validator: (value) {
        if (value!.isEmpty) {
          return '* 必填项';
        }
        return null;
      },
      decoration: InputDecoration(
        counterText: "",
        filled: true,
        hintText: hintText,
        hintStyle: const TextStyle(color: Colors.black45),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
        fillColor: const Color(0xff9ccb40),
      ),
    ),
  );
}

3. 用FocusTraversalGroup包裹所有输入框：

FocusTraversalGroup(
  policy: OrderedTraversalPolicy(), // 按组件顺序遍历焦点
  child: Column(
    children: [
      // 传入对应的焦点节点
      _createTextField(controller1, TextInputType.text, 50, 1, '姓名', screenWidth, _focusNodes[0]),
      _createTextField(controller2, TextInputType.phone, 11, 1, '电话', screenWidth, _focusNodes[1]),
      _createTextField(controller3, TextInputType.email, 100, 1, '邮箱', screenWidth, _focusNodes[2]),
    ],
  ),
)

方式二：手动处理上下箭头按键事件

如果需要自定义焦点切换逻辑，可以手动监听按键事件：

修改_createTextField方法，新增index参数和onKeyEvent回调：

Widget _createTextField(
  TextEditingController controller,
  TextInputType keyboardType,
  int maxLength,
  int maxLines,
  String hintText,
  double screenWidth,
  FocusNode focusNode,
  int index, // 输入框的索引
) {
  return Expanded(
    child: TextFormField(
      focusNode: focusNode,
      scrollPadding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      textCapitalization: TextCapitalization.sentences,
      textInputAction: TextInputAction.next,
      style: TextStyle(fontSize: (screenWidth > maxMobileScreenWidth) ? 16 : 12),
      controller: controller,
      keyboardType: keyboardType,
      maxLength: maxLength,
      maxLines: maxLines,
      onKeyEvent: (node, event) {
        if (event is KeyDownEvent) {
          // 处理上箭头
          if (event.logicalKey == LogicalKeyboardKey.arrowUp && index > 0) {
            FocusScope.of(context).requestFocus(_focusNodes[index - 1]);
            return KeyEventResult.handled;
          }
          // 处理下箭头
          if (event.logicalKey == LogicalKeyboardKey.arrowDown && index < _focusNodes.length - 1) {
            FocusScope.of(context).requestFocus(_focusNodes[index + 1]);
            return KeyEventResult.handled;
          }
        }
        return KeyEventResult.ignored;
      },
      validator: (value) {
        if (value!.isEmpty) {
          return '* 必填项';
        }
        return null;
      },
      decoration: InputDecoration(
        counterText: "",
        filled: true,
        hintText: hintText,
        hintStyle: const TextStyle(color: Colors.black45),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
        fillColor: const Color(0xff9ccb40),
      ),
    ),
  );
}

调用时传入索引：

_createTextField(controller1, TextInputType.text, 50, 1, '姓名', screenWidth, _focusNodes[0], 0),
_createTextField(controller2, TextInputType.phone, 11, 1, '电话', screenWidth, _focusNodes[1], 1),

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