用户输入与无障碍功能
仅仅调整应用程序的外观是不够的，你还必须支持各种用户输入。鼠标和键盘引入了触摸设备上没有的输入类型，例如滚轮、右键单击、悬停交互、Tab 键遍历和键盘快捷键。
其中一些功能在 Material 组件上默认工作。但是，如果你创建了自定义组件，你可能需要直接实现它们。
一些包含精心设计的应用程序的功能，也帮助使用辅助技术的人。例如，除了是良好的应用程序设计之外，一些功能（如 Tab 键遍历和键盘快捷键）对于使用辅助设备的用户至关重要。除了创建无障碍应用程序的标准建议之外，本页还介绍了创建既自适应又无障碍的应用程序的信息。
自定义组件的滚轮
#像 ScrollView 或 ListView 这样的滚动组件默认支持滚轮，并且由于几乎每个可滚动自定义组件都是使用其中之一构建的，因此它也适用于这些组件。
如果你需要实现自定义滚动行为，你可以使用 Listener 组件，它允许你自定义 UI 如何响应滚轮。
return Listener(
onPointerSignal: (event) {
if (event is PointerScrollEvent) print(event.scrollDelta.dy);
},
child: ListView(),
);Tab 键遍历和焦点交互
#使用物理键盘的用户希望他们可以使用 Tab 键快速导航应用程序，而有运动或视觉障碍的用户通常完全依赖键盘导航。
Tab 键交互有两个注意事项：焦点如何在组件之间移动（称为遍历）以及组件获得焦点时显示的视觉高亮。
大多数内置组件（例如按钮和文本字段）默认支持遍历和高亮。如果你想将自己的组件包含在遍历中，可以使用 FocusableActionDetector 组件来创建自己的控件。FocusableActionDetector 组件有助于将焦点、鼠标输入和快捷方式组合在一个组件中。你可以创建一个定义动作和按键绑定，并提供处理焦点和悬停高亮回调的检测器。
class _BasicActionDetectorState extends State<BasicActionDetector> {
bool _hasFocus = false;
@override
Widget build(BuildContext context) {
return FocusableActionDetector(
onFocusChange: (value) => setState(() => _hasFocus = value),
actions: <Type, Action<Intent>>{
ActivateIntent: CallbackAction<Intent>(
onInvoke: (intent) {
print('Enter or Space was pressed!');
return null;
},
),
},
child: Stack(
clipBehavior: Clip.none,
children: [
const FlutterLogo(size: 100),
// Position focus in the negative margin for a cool effect
if (_hasFocus)
Positioned(
left: -4,
top: -4,
bottom: -4,
right: -4,
child: _roundedBorder(),
),
],
),
);
}
}控制遍历顺序
#为了更好地控制用户通过 Tab 键遍历时组件的焦点顺序，你可以使用 FocusTraversalGroup 来定义在 Tab 键遍历时应被视为一组的树的各个部分。
例如，你可能希望在 Tab 键切换到提交按钮之前，先遍历表单中的所有字段。
return Column(
children: [
FocusTraversalGroup(child: MyFormWithMultipleColumnsAndRows()),
SubmitButton(),
],
);Flutter 有几种内置的方法来遍历组件和组，默认为 ReadingOrderTraversalPolicy 类。这个类通常工作得很好，但可以使用另一个预定义的 TraversalPolicy 类或通过创建自定义策略来修改它。
键盘快捷键
#除了 Tab 键遍历，桌面和 Web 用户习惯于将各种键盘快捷键绑定到特定操作。无论是用于快速删除的 Delete 键，还是用于新建文档的 Control+N，请务必考虑用户期望的不同快捷键。键盘是一个强大的输入工具，所以尽量从中榨取尽可能高的效率。你的用户会感谢你的！
根据你的目标，Flutter 中有几种方法可以实现键盘快捷键。
如果你有一个像 TextField 或 Button 这样的单个组件，它已经有一个焦点节点，你可以用 KeyboardListener 或 Focus 组件包装它，并监听键盘事件。
@override
Widget build(BuildContext context) {
return Focus(
onKeyEvent: (node, event) {
if (event is KeyDownEvent) {
print(event.logicalKey);
}
return KeyEventResult.ignored;
},
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 400),
child: const TextField(
decoration: InputDecoration(border: OutlineInputBorder()),
),
),
);
}
}要将一组键盘快捷键应用于树的大部分，请使用 Shortcuts 组件。
// Define a class for each type of shortcut action you want
class CreateNewItemIntent extends Intent {
const CreateNewItemIntent();
}
Widget build(BuildContext context) {
return Shortcuts(
// Bind intents to key combinations
shortcuts: const <ShortcutActivator, Intent>{
SingleActivator(LogicalKeyboardKey.keyN, control: true):
CreateNewItemIntent(),
},
child: Actions(
// Bind intents to an actual method in your code
actions: <Type, Action<Intent>>{
CreateNewItemIntent: CallbackAction<CreateNewItemIntent>(
onInvoke: (intent) => _createNewItem(),
),
},
// Your sub-tree must be wrapped in a focusNode, so it can take focus.
child: Focus(autofocus: true, child: Container()),
),
);
}Shortcuts 组件很有用，因为它只允许在此组件树或其子组件获得焦点并可见时触发快捷键。
最后一个选项是全局监听器。此监听器可用于始终开启的、应用程序范围的快捷方式，或用于只要可见就可以接受快捷方式的面板（无论其焦点状态如何）。使用 HardwareKeyboard 添加全局监听器很容易。
@override
void initState() {
super.initState();
HardwareKeyboard.instance.addHandler(_handleKey);
}
@override
void dispose() {
HardwareKeyboard.instance.removeHandler(_handleKey);
super.dispose();
}要使用全局监听器检查按键组合，可以使用 HardwareKeyboard.instance.logicalKeysPressed 集。例如，下面的方法可以检查是否按下了任何提供的键。
static bool isKeyDown(Set<LogicalKeyboardKey> keys) {
return keys
.intersection(HardwareKeyboard.instance.logicalKeysPressed)
.isNotEmpty;
}将这两者结合起来，你可以在按下 Shift+N 时触发一个动作。
bool _handleKey(KeyEvent event) {
bool isShiftDown = isKeyDown({
LogicalKeyboardKey.shiftLeft,
LogicalKeyboardKey.shiftRight,
});
if (isShiftDown && event.logicalKey == LogicalKeyboardKey.keyN) {
_createNewItem();
return true;
}
return false;
}使用静态监听器时需要注意一点，即当用户在字段中键入或与其关联的组件从视图中隐藏时，你通常需要禁用它。与 Shortcuts 或 KeyboardListener 不同，这需要你自行管理。当你为 Delete 绑定一个删除/退格加速器，但用户可能正在子 TextFields 中键入时，这一点尤其重要。
自定义组件的鼠标进入、离开和悬停
#在桌面端，通常会更改鼠标光标以指示鼠标悬停内容的功能。例如，当你悬停在按钮上时，通常会看到手形光标；当你悬停在文本上时，通常会看到 I 形光标。
Flutter 的 Material 按钮处理标准按钮和文本光标的基本焦点状态。（一个显著的例外是，如果你更改 Material 按钮的默认样式以将 overlayColor 设置为透明。）
为应用程序中的任何自定义按钮或手势检测器实现焦点状态。如果你更改了默认的 Material 按钮样式，请测试键盘焦点状态并在需要时实现你自己的焦点状态。
要在自定义组件中更改光标，请使用 MouseRegion。
// Show hand cursor
return MouseRegion(
cursor: SystemMouseCursors.click,
// Request focus when clicked
child: GestureDetector(
onTap: () {
Focus.of(context).requestFocus();
_submit();
},
child: Logo(showBorder: hasFocus),
),
);MouseRegion 也适用于创建自定义的翻转和悬停效果。
return MouseRegion(
onEnter: (_) => setState(() => _isMouseOver = true),
onExit: (_) => setState(() => _isMouseOver = false),
onHover: (e) => print(e.localPosition),
child: Container(
height: 500,
color: _isMouseOver ? Colors.blue : Colors.black,
),
);有关在按钮获得焦点时更改按钮样式以描绘按钮轮廓的示例，请查看 Wonderous 应用程序的按钮代码。该应用程序修改了 FocusNode.hasFocus 属性，以检查按钮是否获得焦点，如果是，则添加轮廓。
视觉密度
#你可能会考虑扩大组件的“点击区域”，例如，以适应触摸屏。
不同的输入设备提供不同级别的精度，这需要不同大小的点击区域。Flutter 的 VisualDensity 类可以轻松地调整整个应用程序中视图的密度，例如，在触摸设备上使按钮更大（因此更容易点击）。
当你更改 MaterialApp 的 VisualDensity 时，支持它的 MaterialComponents 会将其密度调整为匹配。默认情况下，水平和垂直密度都设置为 0.0，但你可以将密度设置为任何负值或正值。通过在不同密度之间切换，你可以轻松调整 UI。
要设置自定义视觉密度，请将密度注入到 MaterialApp 主题中。
double densityAmt = touchMode ? 0.0 : -1.0;
VisualDensity density = VisualDensity(
horizontal: densityAmt,
vertical: densityAmt,
);
return MaterialApp(
theme: ThemeData(visualDensity: density),
home: MainAppScaffold(),
debugShowCheckedModeBanner: false,
);要在你自己的视图中使用 VisualDensity，你可以查找它。
VisualDensity density = Theme.of(context).visualDensity;容器不仅能自动响应密度的变化，而且在密度变化时也会进行动画处理。这使得你的自定义组件与内置组件一起，在整个应用程序中实现平滑的过渡效果。
如所示，VisualDensity 是无单位的，因此它对不同的视图可能意味着不同的东西。在以下示例中，1 个密度单位等于 6 像素，但这完全由你决定。它是无单位的事实使其非常通用，并且应该适用于大多数情况。
值得注意的是，Material 通常为每个视觉密度单位使用大约 4 个逻辑像素的值。有关支持组件的更多信息，请参阅 VisualDensity API。有关密度原理的更多信息，请参阅 Material Design 指南。