Flutter Listview 点击事件和长按事件实现

前言：

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

效果图：

image

image

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

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

image

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

image

2 具体实现 :

image

具体代码 :

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()+"条数据");
 }

image

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

 void _onItemLongPressed(int index) {
    setState(() {
    showCustomDialog(context,index);
  });
 }

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

image

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

最后总结：

listview item点击事件和 长按事件实现相对简单 对比原生写法也更简洁 ，希望我的代码能帮助到大家，我也是一个flutter学习的新手。各位同学如果觉得文章还不错 ,麻烦给关注和star小弟在这里谢过啦 ，