in Androidandroid
in Flutterless
下面兩個例子對兩種實現方法作簡要說明:ide
@override
Widget build(BuildContext context) {
return new RaisedButton(
onPressed: () {
print("click");
},
child: new Text("Button"));
}
複製代碼
這個例子描述瞭如何使用第一種方法實現點擊事件監聽。其實很簡單,在構造RaisedButton時直接傳遞一個用於處理事件的方法給onPressed參數就能夠了,當RaisedButton被點擊時名爲onPressed的參數所指向的方法就會被調用。在這裏就是簡單的打印出"click"。post
Note: 這種方法僅當Widget自己已經支持事件監聽時使用。好比這裏的RaisedButton是系統提供的一個Widget,其自己已經支持了事件監聽,因此能夠直接在構造時傳遞一個用於處理事件的方法給它。動畫
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");
},
),
));
}
}
複製代碼
這個例子描述瞭如何使用第二種方法實現點擊事件監聽。這裏的關鍵是GestureDetector,咱們將須要響應點擊事件的Widget包裹到GestureDetector內部,而且傳遞一個用來處理點擊事件的方法給GestureDetector的onTap參數,當點擊事件發生時onTap所指向的方法就會被調用。在這裏就是簡單的打印出"tap"。ui
Note: 這種方法在Widget自己不支持事件監聽時使用。this
小結: 在Flutter中實現點擊事件的監聽處理有兩種方法。 針對自己支持事件監聽的Widget能夠直接在構造Widget時傳入一個方法用於點擊事件處理。 針對自己不支持事件監聽的Widget能夠將其包裹在一個GestureDetector內部來實現點擊事件處理。spa
in Androidcode
in Flutter接口
在Flutter中GestureDetector能夠監聽如下事件:
Tap
Double tap
Long press
Vertical drag
Horizontal drag
下面的例子簡單展現瞭如何使用GestureDetector來監聽一個Double tap事件:
AnimationController controller;
CurvedAnimation curve;
@override
void initState() {
controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
}
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new GestureDetector(
child: new RotationTransition(
turns: curve,
child: new FlutterLogo(
size: 200.0,
)),
onDoubleTap: () {
if (controller.isCompleted) {
controller.reverse();
} else {
controller.forward();
}
},
),
));
}
}
複製代碼
在這個例子中咱們想讓一個FlutterLogo響應Double tap事件,可是FlutterLogo自己是不支持事件處理的Widget,因此這裏將其包裹在GestureDetector內部,並經過GestureDetector的onDoubleTap參數來傳遞一個用於處理Double tap事件的方法。 由於這個例子是想FlutterLogo在接收到Double tap事件後去執行一個旋轉動畫,因此這裏並非直接將FlutterLogo包裹在GestureDetector內部,而是先用描述一個旋轉動畫的組件RotationTransition包裹FlutterLogo,接着再在外層用GestureDetector包裹RotationTransition組件。關於在Flutter中實現動畫的介紹能夠參閱FFAD-Views。
小結: 在Flutter中使用GestureDetector能夠監聽處理大多數類型的事件,使用時只要將咱們想要接收事件的Widget包裹在GestureDetector內部,並傳遞事件處理方法給相應的參數便可。