借助 Material 图标和 Flutter 实现无障碍表达

会员服务 ·

借助 Material 图标和 Flutter 实现无障碍表达

2020 年 12 月 9 日 谷歌开发者

作者 / André Labonté, Product Manager, Material Design

Material Design 和 Flutter 可以帮助开发者构建灵活、无障碍且极具表现力的体验，同时提供出色的性能和效率。我们很高兴地宣布，Flutter 现已增强对 Material 图标的支持，助您更轻松地打造出独具特色的界面。

Material 图标是针对常用操作和事物精心设计的符号集合: 从用于导航的简单箭头和指示符，到代表诸如无障碍功能、错误报告甚至洗手之类概念的符号，您都能从 Material 图标中找到。

Material 图标

https://material.io/resources/icons

Flutter 现已支持所有四种 Material 图标样式 (实心、线框、尖角和圆角 )，可帮助您设计便于用户熟悉和理解的应用或网站，同时使您能够以独特的方式传达您的品牌形象。借助摇树优化，Flutter 可以优化您的应用构建，使其仅包含您使用的符号，从而缩短加载时间、提高内存使用效率。

下图展示了 Material 图标提供的各种风格选项。您可以在 Material.io 上浏览完整的图标集并下载位图或矢量版本以在您喜爱的设计工具中使用，或在 Icons API 页面上查看 Flutter 版本。

Material 图标
https://material.io/resources/icons/
Icons API
https://api.flutter.cn/flutter/material/Icons-class.html

△ 4 种图标示例: 购物车、聊天、口罩、洗手；

均以 4 种支持的样式显示: 实心、线框、圆角、尖角

开始使用

要开始使用 Icon 类，请确保在项目的 pubspec.yaml 文件中设置 uses-material-design: true。这会告知 Flutter 在您的应用中包含图标素材资源。

Icon 类

https://master-api.flutter-io.cn/flutter/widgets/Icon-class.html

Flutter 中的图标将通过图标字体以矢量形式提供，因此您可以随意调整大小和颜色，而不必担心图像质量下降。您可以在 GitHub 上查看生成这个图标集的代码。

GitHub 地址

https://github.com/material-components/material-components-flutter/tree/develop/medium/material_icons

无障碍设计: 请勿忽略语义标签

为了确保使用屏幕阅读器等辅助技术的用户能有效地浏览您的应用或网站，提供有意义且适合上下文的语义标签非常重要。

默认情况下，屏幕阅读器会朗读出屏幕上的所有可见文本。要将诸如图标之类的视觉元素准确地转译为基于文本的界面，您需要以周到的方式标记这些元素。

例如，当图标与按钮之类的动作元素结合使用时，您应始终将语义标签设置为描述用户点击该图标时所引发事件的字符串。

Material.io 上提供了依据动作来标注界面元素的设计指南。常见的错误是将语义标签默认设置为图标的名称，而非选择该图标时将执行的动作，如下图所示。

设计指南

https://material.io/design/usability/accessibility.html#writing

要详细了解有关构建无障碍数字体验的重要性，请参阅 flutter.dev 上的无障碍功能文档。

无障碍功能

https://flutter.cn/docs/development/accessibility-and-localization/accessibility

Flutter 只会打包您用到的内容

在构建要发布的应用时，Flutter 编译器会执行 "摇树优化 (tree shaking)"，移除未使用的代码和素材资源 (包括图标)，以优化应用的占用空间，最大程度地缩短下载和加载时间。因此在此之前请放心使用您需要的所有图标。在编译时，Flutter 将生成仅包含项目中用到的图标子集的自定义图标字体，这会极大程度地减少应用大小。

您可以参阅这篇来自社区的优秀博文了解除了摇树之外缩减 Flutter 应用大小的最佳实践。