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

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

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

1.  
   @override
2.  
   Widget build(BuildContext context) {
3.  
   return Scaffold(
4.  
   appBar: AppBar(
5.  
   automaticallyImplyLeading: false, //不显示返回按钮
6.  
   title: Text("今日任务"),
7.  
   actions: <Widget>[
8.  
   IconButton(
9.  
   icon: Icon(Icons.share),
10.  
    onPressed: () {
11.  
    _onShared();
12.  
    }),
13.  
    ],
14.  
    ),
15.  
    body: ListView.separated(
16.  
    addAutomaticKeepAlives: true,
17.  
    itemBuilder: (context, index) {
18.  
    if (index == curData.length - 1) {
19.  
    count++;
20.  
    _retrieveData();
21.  
    if (loadData.length != 0) {
22.  
    return Container(
23.  
    padding: const EdgeInsets.all(16.0),
24.  
    alignment: Alignment.center,
25.  
    child: SizedBox(
26.  
    width: 24.0,
27.  
    height: 24.0,
28.  
    child: CircularProgressIndicator(strokeWidth: 2.0)),
29.  
    );
30.  
    } else {
31.  
    return Container(
32.  
    alignment: Alignment.center,
33.  
    padding: EdgeInsets.all(16.0),
34.  
    child: Text(
35.  
    "没有更多了",
36.  
    style: TextStyle(color: Colors.grey),
37.  
    ));
38.  
    }
39.  
    }
40.  
    //显示列表项
41.  
    return itemWidget(index);
42.  
    },
43.  
    separatorBuilder: (context, index) {
44.  
    return Divider(
45.  
    color: Colors.grey,
46.  
    height: .0,
47.  
    );
48.  
    },
49.  
    itemCount: curData.length,
50.  
    ),
51.  
    );
52.  
    }

ListView item(核心代码)

1.  
   /// * ListView item布局
2.  
   Widget itemWidget(int index) {
3.  
   return Stack(
4.  
   alignment: Alignment.center,
5.  
   children: <Widget>[
6.  
   Offstage(
7.  
   offstage: false,
8.  
   child: ListTile(
9.  
   leading: Image.network(
10.  
    "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
11.  
    title: Text(curData[index].toString()),
12.  
    subtitle: Text(curData[index].toString()),
13.  
    trailing: Text(curData[index].toString()),
14.  
    onTap: () {
15.  
    _onItemPressed(index);
16.  
    },
17.  
    onLongPress: () {
18.  
    _onItemLongPressed(index);
19.  
    },
20.  
    ),
21.  
    ),
22.  
    Offstage(
23.  
    offstage: (_curIndex == index) ? false : true,
24.  
    child: Container(
25.  
    padding: const EdgeInsets.all(8.0),
26.  
    color: Colors.black12,
27.  
    child: Row(
28.  
    mainAxisAlignment: MainAxisAlignment.center,
29.  
    children: <Widget>[
30.  
    FlatButton(
31.  
    padding: const EdgeInsets.all(17.0),
32.  
    color: Colors.grey,
33.  
    shape: CircleBorder(side: BorderSide.none),
34.  
    onPressed: () {
35.  
    _cancel();
36.  
    },
37.  
    child: Text(
38.  
    "取消",
39.  
    style: TextStyle(color: Colors.white),
40.  
    )),
41.  
    FlatButton(
42.  
    padding: const EdgeInsets.all(17.0),
43.  
    color: Store.value<SharedValuesModel>(context).theme,
44.  
    shape: CircleBorder(side: BorderSide.none),
45.  
    onPressed: () {},
46.  
    child: Text(
47.  
    "已完成",
48.  
    style: TextStyle(color: Colors.white),
49.  
    )),
50.  
    FlatButton(
51.  
    padding: const EdgeInsets.all(17.0),
52.  
    color: Colors.red,
53.  
    shape: CircleBorder(side: BorderSide.none),
54.  
    child: Text(
55.  
    "删除",
56.  
    style: TextStyle(color: Colors.white),
57.  
    ),
58.  
    onPressed: () {
59.  
    _deleteMission(_curIndex);
60.  
    },
61.  
    ),
62.  
    ],
63.  
    ),
64.  
    ),
65.  
    ),
66.  
    ],
67.  
    );
68.  
    }

1.  
   ///* item长按
2.  
   void _onItemLongPressed(int index) {
3.  
   setState(() {
4.  
   _curIndex = index;
5.  
   });
6.  
   }

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