Flutter焦点控制插件focusable_control_builder的使用

Flutter焦点控制插件focusable_control_builder的使用

使用FocusableControlBuilder可以快速创建一个在所有平台和输入设备上都能正常工作的控件。

工作“正常”包括支持以下功能：

• Tab键遍历
• 聚焦/悬停状态
• 修改鼠标光标
• 支持键盘快捷键（默认为Enter/空格键）

在内部，该构建器包装了内置的FocusableActionDetector，你可以在这里了解更多关于其工作原理的细节。

有关为何要使用这些小部件的更多信息，请参阅此博客文章： https://blog.gskinner.com/archives/2021/06/flutter-building-custom-components-with-focusableactiondetector.html

🔨 安装

$ flutter pub add focusable_control_builder

⚙ 导入

import 'package:focusable_control_builder/focusable_control_builder.dart';

🕹️ 使用

要创建一个自定义按钮，只需实现FocusableControlBuilder.builder方法，并分配一个onPressed处理程序：

class MyCustomButton extends StatelessWidget {
  const MyCustomButton(this.label, {Key? key, required this.onPressed}) : super(key: key);
  final String label;
  final VoidCallback onPressed;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FocusableControlBuilder(
        onPressed: onPressed,
        builder: (_, FocusableControlState control) {
          // 根据 .isFocused 和 .isHovered 决定使用哪种颜色
          Color outlineColor = control.isFocused ? Colors.black : Colors.transparent;
          Color bgColor = control.isHovered ? Colors.blue.shade100 : Colors.grey.shade200;
          // 返回自定义按钮内容
          return Container(
            padding: const EdgeInsets.all(8),
            child: Text(label),
            decoration: BoxDecoration(
              color: bgColor,
              border: Border.all(color: outlineColor, width: 1),
            ),
          );
        });
  }
}

自定义鼠标光标

FocusableControlBuilder 默认会为你控件设置一个“手型”光标。如果你想要不同的光标，只需分配它：

return FocusableControlBuilder(
    cursor: SystemMouseCursors.resizeDown,
    ...
);

请求聚焦

FocusableControlBuilder 默认会在按下时请求聚焦。如果你想禁用这个功能，只需将其设置为 false：

return FocusableControlBuilder(
    requestFocusOnPress: false,
    ...
);

自定义快捷键

FocusableControlBuilder 会创建一个默认激活动作，处理 [提交] 和 [Enter] 键。若要创建自定义键盘快捷键，可以设置 .shortcuts 和 .actions 参数。这超出了本文档的范围，但如果你想了解如何操作，可以查看 FocusableActionDetector 文档，其中包含一个示例。

🐞 Bug/需求

如果你遇到任何问题，请打开一个issue。如果你觉得库缺少功能，请在Github上提出一个ticket，我们会进行评估。欢迎提交pull request。

📃 许可证

MIT许可证

以下是完整的示例代码：

import 'package:example/custom_button.dart';
import 'package:example/custom_checkbox.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: CustomButtonsAndCheckboxesDemo(),
      ),
    );
  }
}

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

  [@override](/user/override)
  State<CustomButtonsAndCheckboxesDemo> createState() => _CustomButtonsAndCheckboxesDemoState();
}

class _CustomButtonsAndCheckboxesDemoState extends State<CustomButtonsAndCheckboxesDemo> {
  bool _check1 = false;
  bool _check2 = true;
  bool _check3 = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text("使用 'Tab' 键遍历按钮。使用 Enter/空格键来点击它们。"),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const CustomButton("按钮 1"),
              CustomButton("按钮 2", onPressed: () => debugPrint("点击2")),
              CustomButton("按钮 3", onPressed: () => debugPrint("点击3")),
            ],
          ),
          const SizedBox(height: 30),
          CustomCheckbox("复选框1", value: _check1, onChanged: (v) => setState(() => _check1 = v)),
          CustomCheckbox("复选框2", value: _check2, onChanged: (v) => setState(() => _check2 = v)),
          CustomCheckbox("复选框3", value: _check3, onChanged: (v) => setState(() => _check3 = v)),
        ],
      ),
    );
  }
}