【Flutter】GestureDetectorで、「子Widget&背面のWidget」へのイベント伝播の設定

はじめに

GestureDetectorは、あるWidgetにおけるユーザーの画面操作(タップ、スワイプなど)を検知するWidgetです。
GestureDetectorで検知したいWidgetは、コーディング方法が2種類あります。

(1)GestureDetectorのchildプロパティに設定する

GestureDetector(
  child: WidgetXXX(),
);

(2)Stackを使って、GestureDetectorを重ねる

Stack(children: [
  WidgetXXX(),
  GestureDetector(),
]);

さて、以上のようにした場合、WidgetXXX()がElevatedButton()である時を考えます。
(有り得ないケースですが、説明のためにそうします。)

GestureDetectorのonTapプロパティでタップを検知するようにした、としましょう。
この時、ElevatedButtonをタップすると、どのような挙動になるでしょうか？

• GestureDetectorのみ反応して、ElevatedButtonは反応しない？
• GestureDetectorは反応せず、ElevatedButtonのみ反応する？
• GestureDetector, ElevatedButtonどちらも反応する？

この際の挙動を規定するのが、behaviorプロパティです。

注意

以降、ソースコードに記載されている英語が登場します。
併せて、日本語訳を載せていますが、分かりやすいよう意訳しています。
もし間違っていたら指摘ください。

behaviorプロパティ

How this gesture detector should behave during hit testing.

ユーザーが画面に対して何らかの操作(タップ, スワイプなど)をした際に、
このGestureDetectorがどのように動作するか？を規定します。

設定値の種類

behaviorプロパティには、enum HitTestBehaviorを設定します。
以降では、このenum型のメンバ＆その挙動を示します。

deferToChild

Targets that defer to their children receive events within their bounds only if one of their children is hit by the hit test.

子Widgetに委ねるターゲットは、子Widgetのいずれかがヒットテストでヒットした場合のみ、その境界内でイベントを受け取ります。
上手く訳せませんでした。。良い和訳を教えて下さい。。

(1)の場合

• GestureDetectorは反応しません。
• ElevatedButtonは反応します。

(2)の場合

• GestureDetectorは反応しません。
• ElevatedButtonは反応します。

opaque

Opaque targets can be hit by hit tests, causing them to both receive events within their bounds and prevent targets visually behind them from also receiving events.

不透明なターゲットは、ヒットテストによって、その境界内でイベントを受信し、その背後にあるターゲットがイベントを受信するのを視覚的に防止することができます。
上手く訳せませんでした。。良い和訳を教えて下さい。。

(1)の場合

• GestureDetectorは反応しません。
• ElevatedButtonは反応します。

(2)の場合

• GestureDetectorは反応します。
• ElevatedButtonは反応しません。

translucent

Translucent targets both receive events within their bounds and permit targets visually behind them to also receive events.

半透明のターゲットは、その境界内でイベントを受信し、視覚的にその背後にあるターゲットもイベントを受信することを許可します。
上手く訳せませんでした。。良い和訳を教えて下さい。。

(1)の場合

• GestureDetectorは反応しません。
• ElevatedButtonは反応します。

(2)の場合

• GestureDetectorは反応します。
• ElevatedButtonは反応しません。

デフォルト値

This defaults to [HitTestBehavior.deferToChild] if [child] is not null and [HitTestBehavior.translucent] if child is null.

• childがnullでない場合、HitTestBehavior.deferToChild
• childがnullの場合、HitTestBehavior.translucent

おわりに

うまく和訳できない英文ばかりでしたが、各設定値での挙動は分かったので、意義はあったと思ってます。
誰かのお役に立てれば幸いです。
では。