桌面端如何通过方向键在GridView的TextFormField间导航

要实现像Excel那样用方向键在GridView的TextFormField间切换焦点，核心思路是预存焦点节点+监听方向键事件+计算目标焦点位置，以下是具体实现步骤：

1. 预存所有文本字段的焦点节点 #

因为GridView是动态生成的，需要提前创建二维数组存储每个TextFormField对应的FocusNode，方便后续快速定位和切换焦点：

late List<List<FocusNode>> _focusNodes;
final int _rowCount = 5; // 自定义行数
final int _colCount = 5; // 自定义列数
int _currentFocusRow = 0;
int _currentFocusCol = 0;

@override
void initState() {
  super.initState();
  // 初始化焦点节点二维数组
  _focusNodes = List.generate(_rowCount, (row) => 
    List.generate(_colCount, (col) => FocusNode())
  );
  // 设置初始焦点
  WidgetsBinding.instance.addPostFrameCallback((_) {
    FocusScope.of(context).requestFocus(_focusNodes[0][0]);
  });
}

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

2. 构建带焦点绑定的GridView #

生成每个TextFormField时绑定对应焦点节点，并记录当前焦点位置：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: _colCount,
    childAspectRatio: 2, // 自定义单元格宽高比
  ),
  itemCount: _rowCount * _colCount,
  itemBuilder: (context, index) {
    final row = index ~/ _colCount;
    final col = index % _colCount;
    return TextFormField(
      focusNode: _focusNodes[row][col],
      decoration: InputDecoration(
        border: OutlineInputBorder(),
        hintText: '单元格 $row-$col',
      ),
      onTap: () {
        // 点击时更新当前焦点位置
        _currentFocusRow = row;
        _currentFocusCol = col;
      },
      onKey: (node, event) {
        // 拦截方向键，避免光标在字段内移动
        if (event is RawKeyDownEvent && 
            [LogicalKeyboardKey.arrowUp, LogicalKeyboardKey.arrowDown,
             LogicalKeyboardKey.arrowLeft, LogicalKeyboardKey.arrowRight].contains(event.logicalKey)) {
          return KeyEventResult.handled;
        }
        return KeyEventResult.ignored;
      },
    );
  },
)

3. 绑定方向键事件并实现焦点跳转 #

使用Flutter官方推荐的Shortcuts+Actions组件处理键盘事件：

定义方向枚举和Intent类 #

enum FocusDirection { up, down, left, right }

class MoveFocusIntent extends Intent {
  final FocusDirection direction;
  const MoveFocusIntent({required this.direction});
}

包裹GridView并绑定快捷键 #

Shortcuts(
  shortcuts: {
    LogicalKeySet(LogicalKeyboardKey.arrowUp): const MoveFocusIntent(direction: FocusDirection.up),
    LogicalKeySet(LogicalKeyboardKey.arrowDown): const MoveFocusIntent(direction: FocusDirection.down),
    LogicalKeySet(LogicalKeyboardKey.arrowLeft): const MoveFocusIntent(direction: FocusDirection.left),
    LogicalKeySet(LogicalKeyboardKey.arrowRight): const MoveFocusIntent(direction: FocusDirection.right),
  },
  child: Actions(
    actions: {
      MoveFocusIntent: CallbackAction<MoveFocusIntent>(
        onInvoke: (intent) {
          _handleFocusMove(intent.direction);
          return null;
        },
      ),
    },
    child: // 放入前面定义的GridView
  ),
)

实现焦点跳转逻辑 #

void _handleFocusMove(FocusDirection direction) {
  int targetRow = _currentFocusRow;
  int targetCol = _currentFocusCol;

  // 根据方向计算目标位置，超出边界时保持在边缘
  switch (direction) {
    case FocusDirection.up:
      targetRow = (_currentFocusRow - 1).clamp(0, _rowCount - 1);
      break;
    case FocusDirection.down:
      targetRow = (_currentFocusRow + 1).clamp(0, _rowCount - 1);
      break;
    case FocusDirection.left:
      targetCol = (_currentFocusCol - 1).clamp(0, _colCount - 1);
      break;
    case FocusDirection.right:
      targetCol = (_currentFocusCol + 1).clamp(0, _colCount - 1);
      break;
  }

  // 切换到目标焦点
  if (targetRow != _currentFocusRow || targetCol != _currentFocusCol) {
    _currentFocusRow = targetRow;
    _currentFocusCol = targetCol;
    FocusScope.of(context).requestFocus(_focusNodes[targetRow][targetCol]);
  }
}

关键细节说明 #

• 拦截字段内方向键：通过onKey回调拦截方向键，避免光标在输入框内移动，保证方向键只触发焦点切换。
• 边界处理：用clamp方法确保目标位置不会超出GridView行列范围，和Excel边界行为一致。
• 内存管理：必须在dispose中销毁所有FocusNode，防止内存泄漏。

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