Flutter PopupMenu 仿微信聊天长按弹出菜单,删除,分享,更多,撤回

在开发IM应用时,需要实现长按消息显示删除、分享、更多和撤回选项的功能。本文展示了如何使用Flutter的PopupMenu实现这一效果,并提供了相关代码示例和详细教程链接。
摘要由CSDN通过智能技术生成
最近在开发IM软件,需要做:长按弹出菜单,删除,分享,更多,撤回.
先看看效果是不是你想要的



使用处的代码

_menuView() {
    bool isCanRecall = DateTime.now().millisecondsSinceEpoch -
            dateTime.millisecondsSinceEpoch <
        12000;
    var _data = ['复制', '转发', '删除'];
    var menuWidth = 150.0;
    if (isCanRecall && direct == 1) {
      _data.add('撤回');
      menuWidth = 200.0;
    }
    return WPopupMenu(
        menuWidth: menuWidth,
        menuHeight: 30,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(5))),
        ),
        onValueChanged: (int selected) {
          switch (_data[selected]) {
            case '复制':
              ToastUtils.toast(context, msg: '复制成功');
              Clipboard.setData(ClipboardData(text: text));
              break;
            case '转发':
              _selectMemberPage();
              break;
            case '删除':
              _deleteMsg();
              break;
            case '撤回':
              _recallMsg();
              break;
          }
        },
        pressType: PressType.longPress,
        actions: _data,
        child: _backView(context));
  }
WPopupMenu.dart
import 'package:flutter/material.dart';
import 'package:wechat/common/view/triangle_painter.dart';

const double _kMenuScreenPadding = 8.0;

class WPopupMenu extends StatefulWidget {
  WPopupMenu({
    Key key,
    @required this.onValueChanged,
    @required this.actions,
    @required this.child,
    this.pressType = PressType.longPress,
    this.pageMaxChildCount = 5,
    this.backgroundColor = Colors.black,
    this.menuWidth = 250,
    this.menuHeight = 42,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
  })  : assert(onValueChanged != null),
        assert(actions != null && actions.length > 0),
        assert(child != null),
        assert(margin == null || margin.isNonNegative),
        assert(padding == null || padding.isNonNegative),
        assert(decoration == null || decoration.debugAssertIsValid()),
        assert(constraints == null || constraints.debugAssertIsValid()),
        assert(
            color == null || decoration == null,
            'Cannot provide both a color and a decoration\n'
            'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'),
        decoration =
            decoration ?? (color != null ? BoxDecoration(color: color) : null),
        constraints = (width != null || height != null)
            ? constraints?.tighten(width: width, height: height) ??
                BoxConstraints.tightFor(width: width, height: height)
            : constraints,
        super(key: key);

  final BoxConstraints constraints;
  final Decoration decoration;
  final AlignmentGeometry alignment;
  final EdgeInsets padding;
  final Decoration foregroundDecoration;
  final EdgeInsets margin;
  final Matrix4 transform;
  final ValueChanged<int> onValueChanged;
  final List<String> actions;
  final Widget child;
  final PressType pressType; // 点击方式 长按 还是单击
  final int pageMaxChildCount;
  final Color backgroundColor;
  final double menuWidth;
  final double menuHeight;

  @override
  _WPopupMenuState createState() => _WPopupMenuState();
}

class _WPopupMenuState extends State<WPopupMenu> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        key: widget.key,
        padding: widget.padding,
       
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值