说说Flutter中的Semantics

本篇是“说说”系列第二篇,另两篇链接奉上:

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

介绍

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

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

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

举几个例子:Image中就有 semanticLabelexcludeFromSemantics(默认false)这两个属性,一个用于描述图片语义,一个表示是否去除图片语义。源码中表现为:
Image源码
那么这里就使用到了Semantics,同时image属性为true,告诉我们这个Widget是一个图片。

再看一个例子:IconButton的语义属性button为true,告诉我们这个Widget是个按钮,是否可点击通过onPressed来决定。在IconButton中有一个tooltip属性。添加了tooltip最终就是嵌套一个Tooltip组件。
IconButton源码
Tooltip它其实就是一个万能的语义。我们正常使用时,长按就可以看到描述Widget的信息。使用读屏时,可以直接读出对应的描述信息。
Tooltip源码
而对于基础组件的语义,比如Text、Switch、TextField等都在RenderObjectvoid 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中全面支持了语义。下来说说具体怎么去使用。

使用

上面的源码中,我们应该已经接触到了SemanticsExcludeSemantics。下面详细介绍一下:

Semantics

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

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

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

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

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

比如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的触摸范围很小,不便于操作,并且信息也不集中。你试想一下,一个视力障碍的人,怎么知道哪两段文字是一体?你是横向排列还是纵向排列?这个页面在他们那里就是失败的,即使你做的UI效果再漂亮。

其实优化的方法很简单。

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

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

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

那么最终的效果如下:
在这里插入图片描述

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

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

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

语义添加的原则

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

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

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

有话想说

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

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

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

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

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

最后最后,还不点个赞?给作者我一点鼓励!

参考

展开阅读全文
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值