1. 程式人生 > >Flutter中的點選、拖動和其它手勢

Flutter中的點選、拖動和其它手勢

在Android中,您可以通過呼叫方法setOnClickListener將OnClick繫結到按鈕等view上.
在Flutter中,新增觸控監聽器有兩種方法:

  1. 如果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 使用者快速連續兩次在同一位置輕敲螢幕
  • 長按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。此示例通過設定_lights欄位使得矩形響應被點選:

  new GestureDetector(
    onTap: () {
      setState(() {
        lights = true;
      });
    },
    child: new Container(
      color: Colors.yellow,
      child: new Text('TURN LIGHTS ON'),
    ),
  );

如果您使用的是Material Components,那麼大多數widget已經對tap或手勢做出了響應。 例如IconButtonFlatButton響應presses(taps),ListView響應滑動事件觸發滾動。 如果您不使用這些widget,但想要在點選時上出現“墨水飛濺”效果,可以使用InkWell