flutter實現(xiàn)點擊事件

更新時間：2020年08月26日 16:47:51 作者：WongKyunban

這篇文章主要為大家詳細(xì)介紹了flutter實現(xiàn)點擊事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了flutter實現(xiàn)點擊事件的具體代碼，供大家參考，具體內(nèi)容如下

在Android中，您可以通過調(diào)用方法setOnClickListener將OnClick綁定到按鈕等view上。

在Flutter中，有兩種方法:

1.如果Widget支持事件監(jiān)聽，則可以將一個函數(shù)傳遞給它并進(jìn)行處理。例如，RaisedButton有一個onPressed參數(shù)

@override
Widget build(BuildContext context) {
 return new RaisedButton(
  onPressed: () {
  print("click");
  },
  child: new Text("Button"));
}

2.如果Widget不支持事件監(jiān)聽，則可以將該Widget包裝到GestureDetector中，并將處理函數(shù)傳遞給onTap參數(shù)

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");
  },
  ),
 ));
 }
}

2.1.使用GestureDetector，可以監(jiān)聽多種手勢

（1）Tap

onTapDown
onTapUp
onTap
onTapCancel

(2)Double tap

onDoubleTap 用戶快速連續(xù)兩次在同一位置輕敲屏幕

(3)長按

onLongPress

(4)垂直拖動

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

(5)水平拖拽

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

2.2.示例：監(jiān)聽FlutterLogo的雙擊事件，雙擊時使其旋轉(zhuǎn)。

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
  title: '導(dǎo)航演示1',
  home: new MyAppHome(),
 );
 }
}

class MyAppHome extends StatefulWidget{
 @override
 _MyAppHomeState createState() => _MyAppHomeState();

}
class _MyAppHomeState extends State<MyAppHome> with TickerProviderStateMixin{
 AnimationController controller;
 CurvedAnimation curve;

 @override
 void initState() {
 super.initState();
 controller = new AnimationController(
  duration: const Duration(milliseconds: 2000), vsync: this);
 curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
 }

 @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();
   }
  },
  ),
 ));
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: