flutter 点击位置弹出菜单栏(仿微信文本长按位置下方弹出菜单)

在这里插入图片描述

在这里插入图片描述

代码:

importpackage:flutter/material.dart’;

class PopupMenu extends StatefulWidget {
@override
State createState() => _PopupMenuState();
}

class _PopupMenuState extends State {
Color bgColor = Colors.white;
GlobalKey anchorKey = GlobalKey();
@override
Widget build(BuildContext context) {
return GestureDetector(
child: Text(
‘张明月最近一直在加班,苦逼苦逼苦逼~~~’,
style: TextStyle(backgroundColor: bgColor,height: 1.5,fontSize: 15),
key:anchorKey ,
),
onLongPressStart: (detail) {
bgColor = Colors.grey;
setState(() {});
_showMenu(context, detail);
},
);
}

PopupMenuButton _popMenu() {
return PopupMenuButton(
itemBuilder: (context) => _getPopupMenu(context),
onSelected: (String value) {
print(‘onSelected’);
_selectValueChange(value);
},
onCanceled: () {
print(‘onCanceled’);
bgColor = Colors.white;
setState(() {});
},
);
}

_selectValueChange(String value) {
setState(() {});
}

_showMenu(BuildContext context, LongPressStartDetails detail) {
RenderBox renderBox = anchorKey.currentContext.findRenderObject();
var offset = renderBox.localToGlobal(Offset(0.0, renderBox.size.height));
final RelativeRect position = RelativeRect.fromLTRB(
detail.globalPosition.dx,//取点击位置坐弹出x坐标
offset.dy,//取text高度做弹出y坐标(这样弹出就不会遮挡文本)
detail.globalPosition.dx,
offset.dy);
var pop = _popMenu();
showMenu(
context: context,
items: pop.itemBuilder(context),
position: position,//弹出框位置
).then((String newValue) {
if (!mounted) return null;
if (newValue == null) {
if (pop.onCanceled != null) pop.onCanceled();
return null;
}
if (pop.onSelected != null) pop.onSelected(newValue);
});
}

_getPopupMenu(BuildContext context) {
return <PopupMenuEntry>[
PopupMenuItem(
value: ‘复制’,
child: Text(‘复制’),
),
PopupMenuItem(
value: ‘收藏’,
child: Text(‘收藏’),
),
];
}
}

好了, 去玩吧

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 `GestureDetector` 组件来监听按事件,并在按时显示一个底部的菜单栏,用于选择多个消息。下面是一个简单的示例代码: ```dart class ChatMessage { final String content; bool selected; ChatMessage(this.content, {this.selected = false}); } class ChatScreen extends StatefulWidget { @override _ChatScreenState createState() => _ChatScreenState(); } class _ChatScreenState extends State<ChatScreen> { final List<ChatMessage> messages = [ ChatMessage("Hello!"), ChatMessage("How are you?"), ChatMessage("I'm fine, thanks."), ChatMessage("What about you?"), ChatMessage("I'm good."), ]; List<ChatMessage> selectedMessages = []; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Chat"), ), body: ListView.builder( itemCount: messages.length, itemBuilder: (context, index) { final message = messages[index]; return GestureDetector( onLongPress: () { setState(() { message.selected = true; selectedMessages.add(message); }); }, child: Container( padding: EdgeInsets.all(16.0), color: message.selected ? Colors.grey[300] : null, child: Text(message.content), ), ); }, ), bottomNavigationBar: selectedMessages.isNotEmpty ? BottomAppBar( child: Row( children: [ IconButton( icon: Icon(Icons.delete), onPressed: () { setState(() { messages.removeWhere((message) => selectedMessages.contains(message)); selectedMessages.clear(); }); }, ), Text("${selectedMessages.length} selected"), ], ), ) : null, ); } } ``` 在这个示例中,我们创建了一个 `ChatMessage` 类来表示聊天消息。`selected` 属性表示该消息是否被选中。在 `ChatScreen` 中,我们创建了一个 `messages` 列表来存储所有的消息,以及一个 `selectedMessages` 列表来存储被选中的消息。在 `ListView.builder` 中,我们使用 `GestureDetector` 来监听按事件,并在按时将消息标记为选中状态,并将其添加到 `selectedMessages` 列表中。在底部菜单栏中,我们显示了一个删除按钮和一个文本框,用于显示选中的消息数量。当用户点击删除按钮时,我们从 `messages` 列表中删除所有被选中的消息,并清空 `selectedMessages` 列表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值