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學習的新手。各位同學如果覺得文章還不錯 ,麻煩給關注和star小弟在這里謝過啦 ，