内容

Material Chip 按钮语义

内容

摘要
上下文
更改说明
迁移指南
时间线
参考

Flutter 现在将button 的语义标签应用于所有交互式 Material Chip，以实现可访问性目的。

交互式 Material Chip（即 ActionChip、ChoiceChip、FilterChip 和 InputChip）现在在语义上被标记为按钮。但是，非交互式信息 Chip 则不是。

将芯片标记为按钮有助于辅助工具、搜索引擎和其他语义分析软件理解应用程序的含义。例如，它允许屏幕阅读器（例如 Android 上的 TalkBack 和 iOS 上的 VoiceOver）将可点击的芯片宣布为“按钮”，这可以帮助用户浏览您的应用程序。在此更改之前，除非您通过手动将缺少的语义添加到应用程序中的芯片小部件来实现变通方法，否则辅助工具的用户可能会有不太好的体验。

包装所有芯片类以描述其语义属性的最外层Semantics小部件已修改。

以下更改适用于ActionChip、ChoiceChip、FilterChip和InputChip

将button属性设置为true。
enabled属性反映芯片当前是否可点击（通过设置回调）。

这些属性更改使交互式芯片的语义行为与其他Material 按钮保持一致。

对于非交互式信息Chip

将button属性设置为false。
将enabled属性设置为null。

您可能不需要执行任何迁移。此更改仅在您通过将提供给Chip的label字段的小部件包装在标记为button: true的Semantics小部件中来解决 Material 芯片缺少button语义的问题时才会影响您。在这种情况下，内部和外部的button语义发生冲突，导致引入此更改后按钮的可点击区域缩小到标签的大小。通过删除该Semantics小部件并将其替换为其子级，或在仍需要将其他语义属性应用于芯片的label小部件时删除button: true属性来解决此问题。

以下代码段使用InputChip作为示例，但相同的过程也适用于ActionChip、ChoiceChip和FilterChip。

情况 1：删除Semantics小部件。

迁移前代码

dartWidget myInputChip = InputChip(
  onPressed: () {},
  label: Semantics(
    button: true,
    child: Text('My Input Chip'),
  ),
);

迁移后代码

dartWidget myInputChip = InputChip(
  onPressed: () {},
  label: Text('My Input Chip'),
);

情况 2：从Semantics小部件中删除button:true。

迁移前代码

dartWidget myInputChip = InputChip(
  onPressed: () {},
  label: Semantics(
    button: true,
    hint: 'Example Hint',
    child: Text('My Input Chip'),
  ),
);

迁移后代码

dartWidget myInputChip = InputChip(
  onPressed: () {},
  label: Semantics(
    hint: 'Example Hint',
    child: Text('My Input Chip'),
  ),
);

包含版本：1.23.0-7.0.pre
稳定版发布：2.0.0

API 文档

摘要

上下文

更改说明

迁移指南

时间线

参考