Material Chip 按钮语义

出于可访问性目的，Flutter 现在为所有可交互的 Material Chips 应用了 button 的语义标签。

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

将 Chips 标记为按钮有助于可访问性工具、搜索引擎和其他语义分析软件理解应用的含义。例如，这允许屏幕阅读器（如 Android 上的 TalkBack 和 iOS 上的 VoiceOver）将可点击的 Chip 播报为“按钮”，这有助于用户导航您的应用。在此更改之前，可访问性工具的用户体验可能不尽如人意，除非您通过手动为应用中的 Chip 小部件添加缺失的语义来实施变通方法。

用于描述其语义属性的、包装所有 Chip 类别的最外层 Semantics 小部件已得到修改。

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

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

这些属性的更改使可交互 Chips 的语义行为与其他 Material Buttons 的语义行为保持一致。

对于不可交互的信息 Chip：

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

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

Material Chip 按钮语义

概述

背景

变更说明

迁移指南

时间线

参考资料