从头开始构建交互式 Flutter 组件

2023-10-22 09:37:30

Material 按钮堪称出色选择，但我们深知它们未必适合每款应用程序，因而需要我们亲力亲为。遗憾的是，从零开始编写自己的小组件可能是一项艰巨的任务。对于桌面用户而言，悬停高亮、焦点和键盘快捷键是他们所期待的功能，而这些功能并不易于实现。

FocusableActionDetector：解惑之钥

Flutter 提供了一个称为 FocusableActionDetector 的小组件，该小组件可帮助我们轻松实现交互式控件。它充当一个容器，可将焦点和键盘快捷键事件传递给子级。这样，我们就可以在无需编写大量代码的情况下，创建自定义的交互式控件。

让我们深入实践

要使用 FocusableActionDetector，我们需要创建一个子级小组件，该小组件将响应焦点和键盘事件。我们可以使用 GestureDetector 来处理点击、长按和其他手势事件。代码如下：

class CustomButton extends StatelessWidget {
  final VoidCallback onPressed;
  final String text;

  const CustomButton({
    required this.onPressed,
    required this.text,
  });

  @override
  Widget build(BuildContext context) {
    return FocusableActionDetector(
      focusNode: FocusNode(),
      autofocus: true,
      onPressed: () {
        onPressed();
      },
      child: GestureDetector(
        onTap: () {
          onPressed();
        },
        child: Container(
          // 你的自定义按钮样式
        ),
      ),
    );
  }
}

通过 `FocusNode` 控制焦点

FocusableActionDetector 允许我们使用 FocusNode 来控制子级小组件的焦点。通过设置 autofocus 为 true，我们可以让小组件在加载时自动获得焦点。

响应键盘事件

FocusableActionDetector 还允许我们响应键盘事件。我们可以使用 onKeyEvent 回调来处理特定的按键，如 Enter 或 Tab。代码如下：

class CustomButton extends StatelessWidget {
  // 省略其他代码

  @override
  Widget build(BuildContext context) {
    return FocusableActionDetector(
      // 省略其他代码
      onKeyEvent: (node, event) {
        if (event is KeyEvent && event.logicalKey == LogicalKeyboardKey.enter) {
          onPressed();
        }
        return KeyEventResult.ignored;
      },
    );
  }
}