說說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)這兩個屬性，一個用於描述圖片語義，一個表示是否去除圖片語義。源碼中表現爲：

那麼這裏就使用到了Semantics，同時image屬性爲true，告訴我們這個Widget是一個圖片。

再看一個例子：IconButton的語義屬性button爲true，告訴我們這個Widget是個按鈕，是否可點擊通過onPressed來決定。在IconButton中有一個tooltip屬性。添加了tooltip最終就是嵌套一個Tooltip組件。

而Tooltip它其實就是一個萬能的語義。我們正常使用時，長按就可以看到描述Widget的信息。使用讀屏時，可以直接讀出對應的描述信息。

而對於基礎組件的語義，比如Text、Switch、TextField等都在RenderObject的void describeSemanticsConfiguration(SemanticsConfiguration config)這個重寫方法中實現。將組件的語義添加至SemanticsConfiguration中。比如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的觸摸範圍很小，不便於操作，並且信息也不集中。你試想一下，一個視力障礙的人，怎麼知道哪兩段文字是一體？你是橫向排列還是縱向排列？這個頁面在他們那裏就是失敗的，即使你做的UI效果再漂亮。

其實優化的方法很簡單。

• 去除Image的語義，使用我們上面提到的excludeFromSemantics屬性或是ExcludeSemantics都行。我在處理Image的語義時比較極端，將excludeFromSemantics都改爲了true。我的理解是大多數的圖片都是裝飾作用，屏幕上過多的語義描述也會帶來不必要的困擾。如果有點擊事件的圖或者需要描述的圖片，單獨添加Semantics。

• 合併語義，將縱向排列的一組內容信息用MergeSemantics包裹即可。

代碼這裏就不貼出來，可以點擊這裏查看。

那麼最終的效果如下：

不用我多說什麼了吧，效果一目瞭然。當然這個例子只是一個很簡單的示例。如果給CustomPainter 添加語義，就相對複雜了。這部分我們可以參考TimePicker的處理，或者Flutter Deer中餅狀圖的處理：

餅狀圖頁面	餅狀圖未添加語義	餅狀圖添加語義

我這裏就不展開說了，有興趣的可以去了解一下。

語義添加的原則

• 語義信息的完整。比如日曆上顯示的都是數字，我們需要將完整的日期信息補足。

• 語義信息的整合。這個就是上面的例子，將同類信息合併，便於閱讀。

• 去除多餘的語義信息。儘量保證語義的簡潔，比如圖片這類的語義我們大多數都可以忽略。

有話想說

其實Flutter已經幫我們做了很多語義化的工作，甚至考慮的很全面（所以學習它的方法就在源碼中）。我們真正需要處理的內容並不多。

我自己在添加語義的過程中，也嘗試體驗了TalkBack，儘管是看着手機操作的，但是還是很不方便。難以想象一個沒有語義適配的頁面是多麼糟糕。

其實關於Semantics的資料是很少的，甚至在發展成熟的Android上也很少有人提及（iOS的情況不清楚）。感覺我們忽略了一羣人，儘管他們可能不會用到我們的App。寫這篇博客的初衷也是這樣，補充一下這方面的資料，幫助有需要的人。

我也是根據自己的理解去實現語義化的，並不知道在實際的使用中是不是很合適。但是大方向一定沒錯。

最後我在我的開源項目Flutter Deer中也添加了語義的支持，有興趣的可以查看，歡迎交流這方面的內容！

最後最後，還不點個贊？給作者我一點鼓勵！

參考

• Flutter: Semantics控件