Flutterでのクリック、ドラッグ、その他のジェスチャー

2789 ワード

Androidでは、呼び出し方法setOnClickListenerでOnClickをボタンなどのviewにバインドできます.Flutterでは、タッチリスナーを追加するには、次の2つの方法があります.
  • Widgetがイベントリスニングをサポートしている場合、関数を渡して処理できます.たとえば、RaisedButtonには、onPressedパラメータ
  • があります.
    @override
    Widget build(BuildContext context) {
      return new RaisedButton(
          onPressed: () {
            print("click");
          },
          child: new Text("Button"));
    }
    

    2.Widgetがイベントリスニングをサポートしていない場合は、このWidgetをGestureDetectorにパッケージし、処理関数をonTapパラメータに渡すことができます.
    class SampleApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            body: new Center(
          child: new GestureDetector(
            child: new FlutterLogo(
              size: 200.0,
            ),
            onTap: () {
              print("tap");
            },
          ),
        ));
      }
    }
    

    ジェスチャー
    ジェスチャーは、複数の個別のポインタイベント(さらには複数の個別のポインタ)から識別できる意味動作(例えば、タップ、ドラッグ、スケール)を表す.完全なジェスチャーは、ジェスチャーのライフサイクル(たとえば、ドラッグの開始、ドラッグの更新、ドラッグの終了)に対応する複数のイベントを割り当てることができます.
  • Tap
  • onTapDownポインタは、特定の位置でスクリーンに接触する
  • である.
  • onTapUpポインタは、特定の位置でスクリーンとの接触を停止する
  • .
  • onTap tapイベントトリガ
  • onTapCancel以前のポインタによってトリガされたonTapDownはtapイベント
  • をトリガしない.
  • ダブルクリック
  • onDoubleTapユーザーは、同じ位置でスクリーン
  • を2回連続でタップ
  • 長押ししonLongPress
  • onLongPressポインタは同じ位置で長時間スクリーンと接触する
  • を保持する.
  • 垂直ドラッグonVerticalDragStart
  • onVerticalDragStartポインタが画面に接触し、
  • の垂直移動を開始する可能性があります.
  • onVerticalDragUpdateポインタが画面に接触し、
  • が垂直方向に移動しました.
  • onVerticalDragEnd以前に画面に接触して垂直に移動するポインタは画面に接触せず、画面に接触を停止したときに特定の速度で
  • 移動する.
  • 水平ドラッグ
  • onHorizontalDragStartポインタが画面に接触し、
  • の水平移動を開始する可能性があります.
  • onHorizontalDragUpdateポインタが画面に接触し、
  • が水平方向に移動する.
  • onHorizontalDragEnd以前に画面に接触して水平に移動したポインタは画面に接触することなく、画面に接触を停止したときに特定の速度で
  • 移動する.

    WidgetレイヤからジェスチャーをリスニングするにはGestureDetectorを使用します.
    非空コールバックに対応するジェスチャーを認識しようとします.
    If this widget has a child, it defers to that child for its sizing behavior. If it does not have a child, it grows to fit the parent instead.このwidgetにchildがある場合、その寸法挙動に従ってこのchildを遅らせる.childがなければparentに適応するために成長します.デフォルトでは、非表示のサブアイテムを持つGestureDetectorはタッチを無視します.このような行為は制御できる行為である.GestureDetectorはまた、アクセス可能なイベントをリスニングし、コールバック関数にマッピングします.アクセシビリティイベントを無視するには、excludeFromSemanticsをtrueに設定します.この例では、_を設定します.ライトフィールドは矩形応答をクリックします.
      new GestureDetector(
        onTap: () {
          setState(() {
            lights = true;
          });
        },
        child: new Container(
          color: Colors.yellow,
          child: new Text('TURN LIGHTS ON'),
        ),
      );
    

    Material Componentsを使用している場合は、ほとんどのwidgetがtapまたはジェスチャーに応答しています.例えば、IconButtonとFlatButtonがpresses(taps)に応答し、ListViewがスライドイベントに応答してスクロールをトリガーする.これらのwidgetを使用しないで、クリック時に「インクが飛ぶ」効果を出すにはInkWellを使用します.