说说Flutter中的Semantics

Flutter中的Widget实在是太多了，很容易忽略很多实用的Widget。那么我个人很喜欢Flutter官方在YouTube上的Flutter Widget of the Week 系列视频。真的是可以发现宝藏，比如今天的主角Semantics。

介绍

Semantics（语义） 用于描述Widget的含义最终达到描述应用程序的UI。这些描述可以通过辅助工具、搜索引擎和其他语义分析软件使用。它有点像HTML5的语义元素，在Android、iOS上更多是用于读屏，帮助一些有视力障碍的人使用我们的软件（Android TalkBack 和 iOS VoiceOver）。

说真的，做了几年的Android，基本没有关注过这方面的问题。唯一能想起来的就是给ImageView添加contentDescription属性，来描述一下图片的含义。但这肯定远远不够。。。

虽然我们对Semantics感到陌生 ，但是它在Flutter中可以说是无处不在。

举几个例子：Image中就有 semanticLabel和excludeFromSemantics(默认false)这两个属性，一个用于描述图片语义，一个表示是否去除图片语义。源码中表现为：

Image源码
那么这里就使用到了Semantics，同时image属性为true，告诉我们这个Widget是一个图片。

再看一个例子：IconButton的语义属性button为true，告诉我们这个Widget是个按钮，是否可点击通过onPressed来决定。在IconButton中有一个tooltip属性。添加了tooltip最终就是嵌套一个Tooltip组件。

IconButton源码
而Tooltip它其实就是一个万能的语义。我们正常使用时，长按就可以看到描述Widget的信息。使用读屏时，可以直接读出对应的描述信息。
Tooltip源码
而对于基础组件的语义，比如Text、Switch、TextField等都在RenderObject的void describeSemanticsConfiguration(SemanticsConfiguration config)这个重写方法中实现。将组件的语义添加至SemanticsConfiguration中。比如Text：
Text源码
如果Text添加了semanticsLabel属性，那么就使用ExcludeSemantics去除默认生成的语义，以semanticsLabel为准。

默认的语义在TextSpan 中的 computeSemanticsInformation方法实现：

  @override
  void computeSemanticsInformation(List<InlineSpanSemanticsInformation> collector) {
    assert(debugAssertIsValid());
    if (text != null || semanticsLabel != null) {
      collector.add(InlineSpanSemanticsInformation( ///<- 添加
        text,
        semanticsLabel: semanticsLabel,
        recognizer: recognizer,
      ));
    }
    if (children != null) {
      for (InlineSpan child in children) {
        child.computeSemanticsInformation(collector);
      }
    }
  }


  List<InlineSpanSemanticsInformation> getSemanticsInformation() {
    final List<InlineSpanSemanticsInformation> collector = <InlineSpanSemanticsInformation>[];
    computeSemanticsInformation(collector);
    return collector;
  }

最终在describeSemanticsConfiguration方法调用getSemanticsInformation获取语义描述，添加至SemanticsConfiguration中。

  @override
  void describeSemanticsConfiguration(SemanticsConfiguration config) {
    super.describeSemanticsConfiguration(config);
    _semanticsInfo = text.getSemanticsInformation(); // <- 获取

    if (_semanticsInfo.any((InlineSpanSemanticsInformation info) => info.recognizer != null)) {
      config.explicitChildNodes = true;
      config.isSemanticBoundary = true;
    } else {
      final StringBuffer buffer = StringBuffer();
      for (InlineSpanSemanticsInformation info in _semanticsInfo) {
        buffer.write(info.semanticsLabel ?? info.text);
      }
      config.label = buffer.toString();
      config.textDirection = textDirection;
    }
  }

最后介绍几个概念：

• 当Flutter渲染控件树时，它还会维护第二个控件树，称为Semantics Tree。

• Semantics Tree的每个节点都是SemanticsNode，它可能对应于一个或一组Widget。

• 每个SemanticsNode都会对应一个SemanticsConfiguration，保存着语义属性信息。

点到为止，扯得有点多了。这部分主要为了说明Flutter已经在提供的Widget中全面支持了语义。下来说说具体怎么去使用。

使用

上面的源码中，我们应该已经接触到了Semantics 和 ExcludeSemantics。下面详细介绍一下：

Semantics

语义组件包含功能很多，当前有50个属性。这里我介绍一些重要的属性：

• label: 提供Widget的文本描述。也就是基础的语义信息。

• container: 该节点是否在语义树中引入一个新的语义节点（SemanticsNode）。它可以不受上层的语义拆分、合并，也就是独立出来。

• explicitChildNodes: 默认为false，表示是否强制显示子Widget的语义信息。可以理解为拆分语义。

• scopesRoute: 如果非空，该节点是否对应于子树的根，该子树应该声明路由名。通常与explicitChildNodes一起设置为true，使用在路由跳转地方，比如页面的跳转，Dialog、BottomSheet、PopupMenu 的弹出部分。

比如MaterialPageRoute中如下：

在这里插入图片描述
这样做的目的也是为了将各个Widget的语义信息显示出来，避免有些语义信息读取不出。

• namesRoute: 如果非空，则节点是否包含路由的语义标签。比如AppBar上的title，就表示当前路由名称。

其他的属性见名知意，我就不多解释了。语义说到这里，可能你还是觉得很抽象。那么你可以在MaterialApp中添加showSemanticsDebugger: true来查看语义视图。

ExcludeSemantics

作用是排除子Widget中的语义。比如有张图片只是装饰作用并不需要解释含义，可以使用ExcludeSemantics。

BlockSemantics

它放弃了在它之前的同一个语义容器中绘制的所有Widget的语义。这个Widget很少用到，整个Flutter源码中也就只有Drawer中用到了它，当抽屉打开时，可以去除其他语义，避免读屏器读出被抽屉覆盖的语义内容，造成使用者的困扰。

IndexedSemantics

用索引表示Widget的语义。索引被TalkBack/Voiceover用来通知当前滚动状态。比如ListView默认实现了它。并且ListView也会将item中的语义合并，便于阅读。

当然你也可以自定义索引语义。下面的例子处理了一个语义无关的Spacer分隔符。默认的索引语义会给Spacer提供一个语义索引，会导致滚动通知错误地告诉用户有四个可见item。

  ListView(
    addSemanticIndexes: false, /// <-- 去除默认的索引语义
    semanticChildCount: 2,  /// <-- 指定真实的语义数量
    children: const <Widget>[
      IndexedSemantics(index: 0, child: Text('First')), /// <---添加对应的索引
      Spacer(),
      IndexedSemantics(index: 1, child: Text('Second')),
      Spacer(),
    ],
  )

MergeSemantics

作用是将其子Widget的语义合并在一起。这个Widget我认为是很有重要的，通过它我们可以将信息合并，便于阅读。

使用案例

我用一个简单的页面举例：

实例页面

上图中都是图片及文字，我们来看看它的语义视图。

优化前效果

可以看到图片的部分因为没有添加语义，导致里面没有描述内容。有文字的部分，Widget的触摸范围很小，不便于操作，并且信息也不集中。你试想一下，一个视力障碍的人，怎么知道哪两段文字是一体？你是横向排列还是纵向排列？这个页面在他们那里就是失败的，即使你做的在漂亮。

其实优化的方法很简单。

• 去除Image的语义，使用我们上面提到的excludeFromSemantics属性或是ExcludeSemantics都行。我在处理Image的语义时比较极端，将excludeFromSemantics都改为了true。我的理解是大多数的图片都是装饰作用，屏幕上过多的语义描述也会带来不必要的困扰。如果有点击事件的图或者需要描述的图片，单独添加Semantics。

• 合并语义，将纵向排列的一组内容信息用MergeSemantics包裹即可。

代码这里就不贴出来，可以点击这里查看。

那么最终的效果如下：

优化后效果

不用我多说什么了吧，效果一目了然。当然这个例子只是一个很简单的示例。如果给CustomPainter 添加语义，就相对复杂了。这部分我们可以参考TimePicker的处理，或者Flutter Deer中饼状图的处理：

饼状图页面	饼状图未添加语义	饼状图添加语义

我这里就不展开说了，有兴趣的可以去了解一下。

语义添加的原则

• 语义信息的完整。比如日历上显示的都是数字，我们需要将完整的日期信息补足。

• 语义信息的整合。这个就是上面的例子，将同类信息合并，便于阅读。

• 去除多余的语义信息。尽量保证语义的简洁，比如图片这类的语义我们大多数都可以忽略。

有话想说

其实Flutter已经帮我们做了很多语义化的工作，甚至考虑的很全面（所以学习它的方法就在源码中）。我们真正需要处理的内容并不多。

我自己在添加语义的过程中，也尝试体验了TalkBack，尽管是看着手机操作的，但是还是很不方便。难以想象一个没有语义适配的页面是多么糟糕。

其实关于Semantics的资料是很少的，甚至在发展成熟的Android上也很少有人提及（iOS的情况不清楚）。感觉我们忽略了一群人，尽管他们可能不会用到我们的App。写这篇博客的初衷也是这样，补充一下这方面的资料，帮助有需要的人。

我也是根据自己的理解去实现语义化的，并不知道在实际的使用中是不是很合适。但是大方向一定没错。

最后我在我的开源项目Flutter Deer中也添加了语义的支持，有兴趣的可以查看，欢迎交流这方面的内容！

最后最后，还不点个赞？给作者我一点鼓励！

参考

• Flutter: Semantics控件