Flutter 点击事件浅析

Flutter 点击事件研究一下下,先看代码:

 _onClick(){
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: GestureDetector(
        onTap: _onClick,//写入方法名称就可以了,但是是无参的
        child: Text("dianji"),
      ),
    );
  }

现在我们看看GestureDetector 类,的onTap 是什么?

  final GestureTapCallback onTap;//手势点击事件对象
   typedef GestureTapCallback = void Function();//声明无参数无返回值的函数

从这里我们可看出来是一个函数。
既然知道是个函数,那我们该如何使用呢:

class tesState extends State{

//menu 函数声明
  _onTap(int postion){
    print(postion);
  }
  @override
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return menu('menu',_onTap);//_onTap menu 点击事件
  }
}


//声明参数为int,无返回值的callback函数 MenuCallBack
typedef MenuCallBack = void Function(int position);

class menu extends StatelessWidget{

  var title;
  MenuCallBack onTap; //声明函数对象
  menu(this.title,this.onTap);

//手势函数声明
  _onClick(){

    onTap(1); //调用函数对象,参数为1
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: GestureDetector(
        onTap: _onClick,//手势函数名
        child: Text("$title"),
      ),
    );
  }
}

以上我们就可轻松的使用了。

你可能感兴趣的:(Flutter 点击事件浅析)