Flutter ListView子项长按浮层菜单实现

ListView是一个常用控件，而且大多数ListView都会进行功能扩展，如左滑出现菜单选项、左滑删除、长按出现菜单选项等，本文讲介绍如何实现长按出现菜单选项功能。废话不多说，直接上代码：

@override
Widget build(BuildContext context) {return Scaffold(appBar: AppBar(automaticallyImplyLeading: false, //不显示返回按钮title: Text("今日任务"),actions: <Widget>[IconButton(icon: Icon(Icons.share),onPressed: () {_onShared();}),],),body: ListView.separated(addAutomaticKeepAlives: true,itemBuilder: (context, index) {if (index == curData.length - 1) {count++;_retrieveData();if (loadData.length != 0) {return Container(padding: const EdgeInsets.all(16.0),alignment: Alignment.center,child: SizedBox(width: 24.0,height: 24.0,child: CircularProgressIndicator(strokeWidth: 2.0)),);} else {return Container(alignment: Alignment.center,padding: EdgeInsets.all(16.0),child: Text("没有更多了",style: TextStyle(color: Colors.grey),));}}//显示列表项return itemWidget(index);},separatorBuilder: (context, index) {return Divider(color: Colors.grey,height: .0,);},itemCount: curData.length,),);
}

ListView item(核心代码)

/// * ListView item布局
Widget itemWidget(int index) {return Stack(alignment: Alignment.center,children: <Widget>[Offstage(offstage: false,child: ListTile(leading: Image.network("https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),title: Text(curData[index].toString()),subtitle: Text(curData[index].toString()),trailing: Text(curData[index].toString()),onTap: () {_onItemPressed(index);},onLongPress: () {_onItemLongPressed(index);},),),Offstage(offstage: (_curIndex == index) ? false : true,child: Container(padding: const EdgeInsets.all(8.0),color: Colors.black12,child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[FlatButton(padding: const EdgeInsets.all(17.0),color: Colors.grey,shape: CircleBorder(side: BorderSide.none),onPressed: () {_cancel();},child: Text("取消",style: TextStyle(color: Colors.white),)),FlatButton(padding: const EdgeInsets.all(17.0),color: Store.value<SharedValuesModel>(context).theme,shape: CircleBorder(side: BorderSide.none),onPressed: () {},child: Text("已完成",style: TextStyle(color: Colors.white),)),FlatButton(padding: const EdgeInsets.all(17.0),color: Colors.red,shape: CircleBorder(side: BorderSide.none),child: Text("删除",style: TextStyle(color: Colors.white),),onPressed: () {_deleteMission(_curIndex);},),],),),),],);
}

///* item长按
void _onItemLongPressed(int index) {setState(() {_curIndex = index;});
}

以上就是实现该功能主要代码，最后放上一张效果图以供参考。

Flutter ListView子项长按浮层菜单实现相关推荐

Flutter ListView解决底部或顶部留白问题
Flutter ListView解决底部或顶部留白问题在没有设置padding的情况下,上下都有留白方法一: ListView.builder(padding: EdgeInsets.zero,i ...
Flutter ListView封装，下拉刷新、上拉加载更多
Flutter ListView封装,下拉刷新.上拉加载更多封装了Flutter的ListView,只要传递请求数据的方法和绘制item的方法进去就可以绘制ListView,同时支持下拉刷新.上 ...
Flutter ListView （动态）列表组件、水平列表组件、图标组件详解
Flutter ListView (动态)列表组件.水平列表组件.图标组件 Flutter ListView 基础列表组件.水平列表组件.图标组件列表常见的几种情况: 垂直列表垂直图文列表横向列 ...
uni-app text、文本、selectable、自定义长按选择菜单、修改系统菜单键(双端)
uni-app text.文本.selectable.自定义长按选择菜单.修改系统菜单键(双端):https://ext.dcloud.net.cn/plugin?id=10586 <templ ...
Flutter ListView不显示出来
Flutter ListView不显示Item的问题解决写代码的时候我碰到了一个这样的需求,一般来说,用LIstView就可以解决 Card(shape: const RoundedRectangl ...
flutter listview 滚动到指定位置_flutter入门
flutter的布局方法 Flutter一切皆组件widget. 使用Scaffold是最容易的,它是 Material Components库中的一个widget,它提供了一个默认banner,背景 ...
Flutter ListView使用
Flutter 小知识:ListView使用 ListView参数介绍 ScrollController的使用 ListTile ListView全选 ListView多选 ListView单选 Li ...
Flutter ListView详解
ListView详解 ListView常用构造 ListView ListView 默认构建效果 ListView ListTile ListTile 属性 ListTile 使用效果 ListV ...
Android实现导航菜单随着ListView联动，当导航菜单遇到顶部菜单时停止在哪里，并且listview仍能滑动...
需求:现要实现一个特殊UI的处理,如下图所示: 该布局的上面是一个"按钮",中间是一个"空白布局(当然也可以是ViewPager等)",下面是一个页面的导航菜单 ...
flutter listview 滚动到底部_Flutter常用Widget详解（三）
前言前面两篇文章给大家介绍了Widget中对应原生开发中的一些常用基础控件,Text.TextField.Button.Dialog.Picker等,本篇我们将和大家一起学习ListView.Gri ...

Flutter ListView子项长按浮层菜单实现

Flutter ListView子项长按浮层菜单实现相关推荐

最新文章

热门文章