Flutter中如何监听移动端键盘按键事件？

核心实现思路 #

在Flutter中，你可以通过FocusNode管理输入框焦点，配合TextField的textInputAction和回调方法来实现回车键跳转逻辑，同时保留数字键盘的配置。

具体步骤 #

• 为每个TextField和提交按钮创建FocusNode，用于控制焦点切换
• 给每个TextField设置对应的textInputAction：中间输入框用TextInputAction.next，最后一个输入框用TextInputAction.done
• 通过onSubmitted或onEditingComplete回调，在回车键触发时切换焦点，最后一个输入框直接触发提交操作
• 保持keyboardType: TextInputType.number来显示数字键盘

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<KeyboardJumpDemo> createState() => _KeyboardJumpDemoState();
}

class _KeyboardJumpDemoState extends State<KeyboardJumpDemo> {
  // 为每个输入框和按钮创建FocusNode
  final FocusNode _focusNode1 = FocusNode();
  final FocusNode _focusNode2 = FocusNode();
  final FocusNode _focusNode3 = FocusNode();
  final FocusNode _submitBtnFocus = FocusNode();

  // 提交方法
  void _submitForm() {
    // 这里写你的提交逻辑
    print('表单提交');
    // 收起键盘
    FocusScope.of(context).unfocus();
  }

  @override
  void dispose() {
    // 销毁FocusNode，避免内存泄漏
    _focusNode1.dispose();
    _focusNode2.dispose();
    _focusNode3.dispose();
    _submitBtnFocus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('回车键跳转示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 第一个数字输入框
            TextField(
              focusNode: _focusNode1,
              keyboardType: TextInputType.number,
              textInputAction: TextInputAction.next,
              onSubmitted: (_) {
                // 跳转到第二个输入框
                FocusScope.of(context).requestFocus(_focusNode2);
              },
              decoration: const InputDecoration(labelText: '输入框1（数字）'),
            ),
            const SizedBox(height: 16),
            // 第二个数字输入框
            TextField(
              focusNode: _focusNode2,
              keyboardType: TextInputType.number,
              textInputAction: TextInputAction.next,
              onSubmitted: (_) {
                // 跳转到第三个输入框
                FocusScope.of(context).requestFocus(_focusNode3);
              },
              decoration: const InputDecoration(labelText: '输入框2（数字）'),
            ),
            const SizedBox(height: 16),
            // 第三个数字输入框，回车键触发提交
            TextField(
              focusNode: _focusNode3,
              keyboardType: TextInputType.number,
              textInputAction: TextInputAction.done,
              onSubmitted: (_) {
                // 触发提交
                _submitForm();
              },
              decoration: const InputDecoration(labelText: '输入框3（数字）'),
            ),
            const SizedBox(height: 24),
            // 提交按钮
            ElevatedButton(
              focusNode: _submitBtnFocus,
              onPressed: _submitForm,
              child: const Text('提交'),
            ),
          ],
        ),
      ),
    );
  }
}

关键代码说明 #

• FocusNode：用于追踪和切换输入框/按钮的焦点，使用后必须在dispose方法中销毁，防止内存泄漏
• textInputAction：控制键盘回车键的显示文字（比如"下一个"、"完成"），同时明确跳转逻辑的意图
• onSubmitted：回车键按下时触发的回调，在这里执行焦点切换或提交操作
• keyboardType: TextInputType.number：确保弹出数字键盘，不影响按键事件的监听

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