flutter - 使用 RawKeyboardListener 在 flutter web 中获取没有文本字段焦点的按键值

Question

我正在为 flutter web 编写一个“贪吃蛇”视频游戏。我想使用箭头键四处移动，但我一直无法使用 RawKeyboardListener 捕获按键。我相信这是因为我没有关注正确的节点。此时，我只是想打印出我收到的击键。

这是我的测试代码:

Scaffold(
      appBar: AppBar(),
      body: RawKeyboardListener(
        focusNode: FocusNode(),      //<-- I'm not sure what to put here... and it's required.
        onKey: (RawKeyEvent event) {
          print(event.data.logicalKey.keyId);
        },
        child: GridView.builder(
          itemCount: 300,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 30),
          itemBuilder: (BuildContext context, int index) {
            return Container(
                padding: EdgeInsets.all(5.0),
                color: Colors.grey,
                child: getPixels(index));
          },
        ),
      ),
    );

Answer 1

我有一个解决方案...但我仍然不完全理解它。我终于开始尽可能多地使用 RawKeyboardListener 的 Textfield 示例，我遇到了这个答案:Flutter RawKeyboardListener listening twice?以及本期中的示例:https://github.com/flutter/flutter/issues/50854

使用共性作为模板，这是最终运行的代码，我希望它对其他人有所帮助。 (我很想了解到底发生了什么):

import 'package:flutter/services.dart';  //<-- needed for the keypress comparisons

FocusNode focusNode = FocusNode();  // <-- still no idea what this is.

  @override
  Widget build(BuildContext context) {
    FocusScope.of(context).requestFocus(focusNode); // <-- yup.  magic. no idea.
    return Scaffold(
        appBar: AppBar(),
        body: RawKeyboardListener(
          autofocus: true,
          focusNode: focusNode,   // <-- more magic
          onKey: (RawKeyEvent event) {
            if (event.data.logicalKey == LogicalKeyboardKey.arrowDown) {
               direction = "down";
               }
            if (event.data.logicalKey == LogicalKeyboardKey.arrowLeft) {
               direction = "left";
               }
            if (event.data.logicalKey == LogicalKeyboardKey.arrowRight) {
               direction = "right";
               }
            if (event.data.logicalKey == LogicalKeyboardKey.arrowUp) {
               direction = "up";
               }
          },
          child: GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              itemCount: 300,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 30),
              itemBuilder: (BuildContext context, int index) {
                return Container(
                    padding: EdgeInsets.all(5.0),
                    color: Colors.grey,
                    child: getPixels(index));
              },
            ),
          ),
      );
  }