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

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      automaticallyImplyLeading: false, //不显示返回按钮
      title: Text("今日任务"),
      actions: [
        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: [
      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: [
              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(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;
  });
}

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