Flutter 中listview 点击事件和长按事件实现

前言：

        在Android  和iOS  常用APP经常有listview列表组件 展示数据  以及点击事件和长按事件的处理  今天我们来讲下flutter里面的子元素item的点击事件和长按事件 

---

效果图：

1准备工作 需要用到的三方库

toast: ^0.1.5   在pubspec.yaml文件中添加依赖  

然后在控制台敲 flutter   pub  get  来下载依赖  

2 具体实现 :

具体代码 :
import 'package:flutter/material.dart';

import 'ToastUtil.dart';

class Listviewextends StatefulWidget {

Listview({Key key}) :super(key: key);

  @override

  _ListviewStatecreateState() {

return _ListviewState();

  }

}

class _ListviewStateextends State {

@override

  void initState() {

super.initState();

  }

@override

  void dispose() {

super.dispose();

  }

@override

  Widgetbuild(BuildContext context) {

// TODO: implement build

    return Scaffold(

appBar:AppBar(

title:Text("listview"),

      ),

      body:LayOut(),

    );

  }

}

class LayOutextends StatefulWidget {

LayOut({Key key}) :super(key: key);

  @override

  _LayOutStatecreateState() {

return _LayOutState();

  }

}

class _LayOutStateextends State {

@override

  void initState() {

super.initState();

  }

@override

  void dispose() {

super.dispose();

  }

@override

  Widgetbuild(BuildContext context) {

// TODO: implement build

    return  ListView.builder(

itemCount:20,

        itemBuilder: (BuildContext context, int position){

return getItem(position);

    });

  }

WidgetgetItem(int index){

return GestureDetector(

child:Container(

height:40,

        child:Text("掏粪男孩"),

      ),

      //item 点击事件

      onTap: (){

print("点击到第"+index.toString());

      setState(() {

onItemClick(index);

      });

      },

        //item 长按事件

      onLongPress: (){

setState(() {

_onItemLongPressed(index);

        });

        print("长按"+index.toString());

      }

);

  }

void  onItemClick(int index){

ToastUtil.showinfo(context, "你点击到第"+index.toString()+"条数据");

  }

///* item长按

  void _onItemLongPressed(int index) {

setState(() {

showCustomDialog(context,index);

    });

  }

void showCustomDialog(BuildContext context,int position ){

print("position ---- >  "+position.toString());

    showDialog(

context: context,

        builder: (BuildContext context) {

return new AlertDialog(

title:new Text("点击提示"),

            content:new SingleChildScrollView(

child:new ListBody(children: [new Text("${"点击到第"+position.toString()+"条数据"}")])),

            actions: [

new FlatButton(

child:new Text("取消"),

                onPressed: () {

Navigator.of(context).pop();

                },

              ),

              new FlatButton(

child:new Text("确认"),

                onPressed: (){

Navigator.of(context).pop();

                },

              ),

            ],

          );

        });

  }

}

这里我们通过 ListView.builder 添加20条数据  显示20条text 

然后在GestureDetector 组件里面 分别item 点击事件方法  onTap   （点击事件方法） onLongPress（长按事件） 进行处理   点击item 我们toast 弹出当前点击到那一条数据  

void onItemClick(int index){

ToastUtil.showinfo(context, "你点击到第"+index.toString()+"条数据");

}

长按我们对 onLongPress（）进行处理  

void _onItemLongPressed(int index) {

setState(() {

showCustomDialog(context,index);

  });

}

长按我们弹出dialog做提示处理   

到此我们对listview item的点击事件和长按事件 就讲完了    主要是对GestureDetector  类里面的onTap  点击事件方法    以及·onLongPress 长按事件 的实现 进行我们具体的业务处理  

---

最后总结：

listview  item点击事件和 长按事件实现相对简单  对比原生写法也更简洁 ，希望我的代码能帮助到大家，我也是一个flutter学习的新手 有兴趣的同学可以私聊多多交流