タップ、ドラッグ、その他のジェスチャ

コンテンツ

この文書では、次のことを聞いて対応する方法について説明します。ジェスチャー flutterで。ジェスチャの例には、タップ、ドラッグ、スケーリングなどがあります。

Flutter のジェスチャシステムには 2 つの別々のレイヤーがあります。最初の層には、次のような生のポインターイベントが含まれています。ポインターの位置と動き (例: タッチ、マウス、スタイラスなど）を画面全体に表示します。 2番目の層には、ジェスチャー意味論を記述するもの 1 つ以上のポインターの動きで構成されるアクション。

ポインタ

ポインタはユーザーのインタラクションに関する生データを表しますデバイスの画面で。ポインタイベントには 4 つのタイプがあります。

PointerDownEvent: ポインタが画面の特定の位置に接触しました。
PointerMoveEvent: ポインタが画面上のある場所から別の場所に移動しました。
PointerUpEvent: ポインタが画面に触れなくなりました。
PointerCancelEvent: このポインターからの入力は、このアプリに向けられなくなります。

ポインタが下にあると、フレームワークは次の処理を実行します。ヒットテストあなたのアプリ上での場所にどのウィジェットが存在するかを判断します。ポインタが画面に触れました。ポインタダウンイベント (およびそのポインターの後続のイベント) がディスパッチされますヒットテストで見つかった最も内側のウィジェットに。そこから、イベントがツリーをバブルアップしてディスパッチされます。最も内側からパス上のすべてのウィジェットにウィジェットをツリーのルートに追加します。のためのメカニズムはありませんポインターイベントがさらにディスパッチされるのをキャンセルまたは停止します。

ウィジェットレイヤーからポインターイベントを直接リッスンするには、Listenerウィジェット。ただし、一般的には、代わりに、ジェスチャー (後述) を使用することを検討してください。

ジェスチャー

ジェスチャは意味論的なアクション (タップ、ドラッグ、およびスケール) 複数の個別のポインタから認識されるイベント、場合によっては複数の個別のポインターも含まれます。ジェスチャは、ジェスチャのライフサイクル (例: ドラッグの開始、ドラッグして更新し、ドラッグして終了します):

タップ

onTapDown: タップの原因となるポインタが接触しました特定の場所の画面。
onTapUp: タップをトリガーするポインターが接触しなくなった特定の場所の画面。
onTap: 以前にトリガーしたポインターonTapDownも引き起こしましたonTapUpそれがタップの原因になります。
onTapCancel: 以前にトリガーしたポインターonTapDownタップが発生することはありません。

ダブルタップ

onDoubleTap: ユーザーが画面の同じ場所を 2 回タップしました。素早い連続。

長押し

onLongPress: ポインタは接触したままです長時間同じ場所で画面を見続ける。

垂直方向のドラッグ

onVerticalDragStart: ポインタが画面に触れ、動き始める可能性があります。垂直に移動します。
onVerticalDragUpdate: 画面に触れているポインタと、垂直に移動すると垂直方向に移動します。
onVerticalDragEnd: 以前に画面に触れていたポインタそして垂直方向に動くと接触しなくなります。画面が表示され、特定の速度で移動していたとき画面への接触を停止しました。

水平方向のドラッグ

onHorizontalDragStart: ポインタが画面に触れ、動き始める可能性があります。水平方向に移動します。
onHorizontalDragUpdate: 画面に触れているポインタと、水平方向に移動すると、水平方向に移動します。
onHorizontalDragEnd: 以前に接触していたポインタ画面と水平移動が接触しなくなりました画面とともに特定の速度で移動していた画面に接触しなくなったとき。

パン

onPanStart: ポインタが画面に触れて動き始める可能性があります水平方向または垂直方向。このコールバックは次の場合にクラッシュします。onHorizontalDragStartまたonVerticalDragStartが設定されています。
onPanUpdate: 画面に触れて動いているポインタ垂直方向または水平方向。このコールバッククラッシュする場合onHorizontalDragUpdateまたonVerticalDragUpdateが設定されています。
onPanEnd: 以前に画面に触れていたポインタ画面との接触がなくなり、移動していますスクリーンとの接触をやめたとき、特定の速度で移動します。このコールバックは次の場合にクラッシュします。onHorizontalDragEndまたonVerticalDragEndが設定されています。

ウィジェットにジェスチャ検出を追加する

ウィジェットレイヤーからジェスチャーを聞くには、使うGestureDetector。

マテリアルコンポーネントを使用している場合、これらのウィジェットの多くはすでにタップやジェスチャーに反応しています。例えば、IconButtonとTextButton押す（タップ）に反応し、ListViewスワイプに反応してスクロールをトリガーします。これらのウィジェットを使用していないが、タップ時の「インクスプラッシュ」エフェクトを使用できます。InkWell。

ジェスチャーの曖昧さ回避

画面上の特定の場所で、複数のジェスチャ検出器が存在する可能性があります。例えば：

あListTile応答するタップ認識機能があります全体にListTile、そしてその周りにネストされたもの末尾のアイコンボタン。の画面四角形末尾のアイコンが 2 つのジェスチャで覆われるようになりました誰が処理するかを交渉する必要がある認識者タップされた場合のジェスチャ。
独身者GestureDetector画面領域をカバーする複数のジェスチャを処理するように構成されており、長押しやタップなど。のtap認識者はネゴシエートする必要がありますとともにlong press認識器のときユーザーが画面のその部分に触れます。そのポインタで次に何が起こるかに応じて、 2 つの認識エンジンのうちの 1 つがジェスチャを受信し、ユーザーがジェスチャを受信しない場合、またはどちらもジェスチャを受信しませんタップでも長押しでもない何かを実行します。

これらのジェスチャ検出器はすべてストリームをリッスンします通過して認識しようとするポインタイベントの数特定のジェスチャー。のGestureDetectorウィジェットが決めるどのジェスチャに基づいて認識を試みるかコールバックはnull以外です。

特定のジェスチャ認識機能が複数ある場合画面上のポインタ、フレームワークはどちらを明確にするか各認識エンジンを参加させることでユーザーが意図するジェスチャーを実現のジェスチャーアリーナ。ジェスチャーアリーナがどちらを決定するか次のルールを使用すると、ジェスチャが優先されます。

レコグナイザーはいつでもそれ自体を削除し、アリーナ。アリーナにレコグナイザーが 1 つだけ残っている場合、その認識エンジンが勝ちます。
認識者はいつでも自分自身が勝者であると宣言できます。その結果、残りのすべての認識エンジンが失われます。

たとえば、水平方向と垂直方向のドラッグを明確にする場合、両方の認識装置はポインタを受け取るとアリーナに入りますダウンイベント。認識機能はポインタ移動イベントを監視します。ユーザーがポインタを一定の回数以上移動すると、水平方向の論理ピクセル。水平認識機能が宣言します。勝利とジェスチャは水平方向のドラッグとして解釈されます。同様に、ユーザーが論理的な数を超えて移動した場合、垂直方向のピクセル数に応じて、垂直認識エンジンがそれ自体を宣言します勝者。

ジェスチャーアリーナは、水平方向しかない場合に有益です。 (または垂直) ドラッグ認識機能。その場合、一つだけありますアリーナ内の認識装置と水平方向のドラッグが認識されるすぐに、これは水平移動の最初のピクセルを意味しますドラッグとして扱うことができるため、ユーザーは待つ必要がありません。さらなるジェスチャーの曖昧さの解消。