Question

我希望将焦点集中在材料按钮上，这样我可以按Enter或单击按钮来创建项目

final FocusNode _createButtonFocusNode = new FocusNode();

@override
void initState() {
   FocusScope.of(context).requestFocus(_createButtonFocusNode);
   super.initState();
}
 RawKeyboardListener(
                focusNode: _createButtonFocusNode,
                onKey: (RawKeyEvent event) {
                  if (event.logicalKey == LogicalKeyboardKey.enter) {
                    _createItem();
                  }
                },
child:RaisedButton(focusNode: _createButtonFocusNode,
                 onPressed: () {
                      _createItem();
                    },
                    child: Text("Create"))))

假设还存在一个带有_cancelItem事件的“取消”材料按钮，该事件应该能够接受焦点上的回车键

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用<form>和_node.requestFocus()和FocusAttachment请求焦点并列出键盘事件
在演示代码中，收到attach会更改按钮颜色，请参见下面的工作演示
代码段

Enter

工作演示

完整代码

_node.requestFocus();
...
FocusAttachment _nodeAttachment;
 _nodeAttachment = _node.attach(context, onKey: _handleKeyPress);
...
 bool _handleKeyPress(FocusNode node, RawKeyEvent event) {
    if (event is RawKeyDownEvent) {
      print('Focus node ${node.debugLabel} got key event: ${event.logicalKey}');
      if (event.logicalKey == LogicalKeyboardKey.enter) {
        print('clicked enter');
        setState(() {
          _color = Colors.deepPurple;
        });
        return true;
      }
    }
    return false;
  }

Answer 2

如果您只想让按钮在默认情况下获得焦点，您可以通过在按钮上指定 autofocus:true 来实现，您甚至不需要创建 FocusNode：< /p>

class MyCustomWidget extends StatelessWidget {
  const MyCustomWidget({Key? key}) : super(key: key);

  void _createItem() {
    print('Item created');
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
      autofocus: true,
      child: const Text('CREATE'),
      onPressed: _createItem,
    );
  }
}

这将在首次构建时自动聚焦小部件，只要其他东西还没有焦点。

如果您需要从另一个控件设置焦点，您可以使用焦点节点来完成，但您不需要使用 FocusAttachment（您很少，如果有的话，需要使用其中一个)，您只需将其传递给按钮并对其调用 requestFocus()。

class MyCustomWidget extends StatefulWidget {
  const MyCustomWidget({Key? key}) : super(key: key);

  @override
  State<MyCustomWidget> createState() => _MyCustomWidgetState();
}

class _MyCustomWidgetState extends State<MyCustomWidget> {
  late FocusNode _createButtonFocusNode;

  @override
  void initState() {
    super.initState();
    _createButtonFocusNode = FocusNode();
  }

  @override
  void dispose() {
    _createButtonFocusNode.dispose();
    super.dispose();
  }

  void _createItem() {
    print('Item created');
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,      
        children: <Widget>[
          TextButton(
            child: const Text('FOCUS OTHER BUTTON'),
            onPressed: () => _createButtonFocusNode.requestFocus(),
          ),
          TextButton(
            focusNode: _createButtonFocusNode,
            child: const Text('CREATE'),
            onPressed: _createItem,
          ),
        ],
      ),
    );
  }
}

（当您创建 FocusNode 时，请务必正确处理它。）

如何将焦点设置在颤动中的材质按钮上

2 个答案: