Flutter 仿微信右上角弹窗pop menus

白昼lx

已于 2024-09-14 20:10:52 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter 开发文章标签： flutter android iOS menus

于 2022-11-22 20:01:55 首次发布

本文链接：https://blog.youkuaiyun.com/HQ_LIN/article/details/127988796

Flutter 开发专栏收录该内容

10 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文展示了如何在Flutter中创建一个仿微信右上角弹出菜单的效果，通过代码实现了一个简单的弹窗功能。

Flutter 仿微信右上角弹窗pop menus

效果图
代码实现

效果图

请添加图片描述

代码实现

代码比较简单直接上代码

import 'package:flutter/material.dart';
import 'dart:ui' as ui show window;

import 'package:flutter_learn_demo/utils/l_screen_utils.dart';

List _listData =

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

白昼lx

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

Flutter开发专家指南：如何优雅地实现弹出菜单

理论都是虚的，代码才是王道。

05-30

454

你可以通过自定义MenuItem的样式和行为来进一步定制弹出菜单。例如，你可以改变文本的颜色、添加图标、或者改变菜单的布局。MenuItem(Text('选项1', style: TextStyle(color: Colors.blue)),],),print('选项1被点击');},),// 其他菜单项...],),在这个例子中，我们为MenuItem添加了一个Icon和一个自定义颜色的文本。

Flutter | 超实用简单菜单弹出框 PopupMenuButton

Flutter笔记

08-06

7200

相信在实际开发过程当中，肯定少不了这样的功能：点击AppBar右上角的按钮，弹出一个菜单供用户选择。幸运的是，Flutter 提供给我们了一个 Widget，直接就能...

参与评论您还未登录，请先登录后发表或查看评论

Flutter - 仿微信右上角pop弹框封装 - JhPopMenus

iotjin的专栏

08-17

2006

demo 地址: https://github.com/iotjin/jh_flutter_demo 效果图： Examples 样式1 - 带分隔线 // 带分割线不带背景 JhPopMenus.showLinePop(context, clickCallback: (index, selText) { print('选中index: ${index}'); print('选中text: ${selText}'); if (selText.

Flutter实现仿微信消息弹窗的效果

qq_52871405的博客

09-20

1119

本文通过使用GetX的Snackbar功能，封装了一个仿微信消息弹窗的效果。通过自定义的布局、毛玻璃背景效果和圆角图片，我们实现了仿微信的消息弹窗。接下来，我们通过封装一个自定义的showCodeSnackBar方法来实现消息弹窗的显示。Snackbar的布局会包含一个带圆角的图标、消息标题、消息内容，同时使用毛玻璃背景效果来增强弹窗的视觉体验。而为了提高用户体验，通知的展示效果往往是我们关注的重点。本文将使用Flutter框架以及GetX的Snackbar功能，来实现一个类似微信的消息弹窗效果。

Flutter实现仿微信底部菜单栏功能

10-16

主要介绍了Flutter实现仿微信底部菜单栏,需要的朋友可以参考下

flutter 仿微信长按弹出复制粘贴弹窗

weixin_44911775的博客

03-02

945

flutter 仿微信长按弹出复制粘贴弹窗

Flutter实现类似Android中的PopupWindow控件

小久久的博客

06-29

9249

最近在网上看到一段话。产品有三宝-弹窗，浮层加引导，设计有三宝-透明，阴影加圆角，运营有三宝-短信，push加红包。在日常开发中经常会遇到弹窗、浮层之类的效果，这些在Android中实现很简单，可以用PopupWindow完成。但是在flutter中怎么做呢，起初我是用flutter中的PopupMenuItem来做，但是这种效果体验特差，不能自定义内容、不能自定义位置，所以放弃了该方案。于是我看...

Flutter 仿微信长按发送语音

09-04

引用 package：文件路径：path_provider 录制与振幅：audio_waveforms

精选资源

flutter_plugin_record:flutter 仿微信录制语音功能支持android和ios

05-02

使用Flutter实现仿微信录音的插件插件支持android 和IOS 插件提供的功能录制录制语音, 播放录音, 录制声音大小的监听提供录制时长的监听提供类似微信的录制组件提供播放音频结束的监听提供根据传递的路径...

Flutter仿微信

最新发布

yan1915766026的博客

09-26

728

本项目为flutter仿微信项目，实现一些基础功能，如各种tab页的切换、列表页、路由跳转、基础组件的使用等flutter 3.19版本（推荐3.16、3.19、3.23版本）dart 3.4版本（目前最新3.5+）按照上述内容，可以搭建基础框架，后续会出每个tab页的具体实现过程的文档。

Flutter实现PopupMenu（弹出设置菜单）

江上清风山间明月的博客

05-19

5590

PopupMenuButton是一个用于创建弹出菜单的小部件。它通常与IconButton或其他触发菜单显示的小部件一起使用。当用户点击触发按钮时，PopupMenuButton会在屏幕上方或下方弹出一个菜单，显示一组选项供用户选择。

Flutter 超实用简单菜单弹出框 PopupMenuButton功能

12-09

相信在实际开发过程当中，肯定少不了这样的功能：点击 AppBar 右上角的按钮，弹出一个菜单供用户选择。幸运的是，Flutter 提供给我们了一个 Widget，直接就能实现如上的效果。 PopupMenuButton 还是老规矩，先看官方的说明： Displays a menu when pressed and calls onSelected [1] when the menu is dismissed because an item was selected. The value passed to onSelected [2] is the value of the sele

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

qq_36071410的博客

04-15

7156

效果图：添加链接描述

Flutter输入框下方弹出历史下拉选择PopWindow(输入框不失去焦点)

Monster的博客

12-08

860

Flutter中TextField输入的同时弹出Pop，点击Pop输入框不失去焦点

Flutter仿微信扫一扫(扫码,图片翻译)

weixin_46364914的博客

05-30

2534

仓库地址: GitHub - autumn-moon-py/wechat_scan扫描单个二维码开关手电筒相册选择双击放大缩小双指捏合放大缩小二维码生成二维码保存图片图片翻译相册选择get: ^4.6.5 路由管理,简化弹窗,底部抽屉,验证URLurl_launcher: ^6.1.8 打开浏览器访问网站wechat_assets_picker: ^8.5.0 微信资源选择器qrscan: ^0.3.3 扫描相册二维码mobile_scanner: ^3.2.0 扫描相机二维码vibration: ^1.7

Flutter | 可能是目前最好用的仿微信聊天长按弹出框 WPopupMenu

Flutter笔记

08-09

4264

很多用 iOS 的小伙伴都用过该功能：微信聊天窗口，长按某一条消息，弹出弹框，选择「复制、转发...」等等。基于这个需求，我封装了一个「WPopupMenu」。WPop...

Flutter之Overlay(弹窗)

AdrianAndroid的专栏

02-14

7161

资料 Flutter之使用overlay显示悬浮控件类似于Toast的弹窗 class Toast { // 自定义Toast static void show({ required BuildContext context, required String message, }) { // 创建一个OverlayEntry对象 OverlayEntry overlayEntry = new OverlayEntry(builder: (context) {

Flutter仿写微信导航栏快速实现页面导航

江上清风山间明月的博客

05-17

1202

前面介绍了APP顶部导航栏AppBar，今天来介绍下Flutter实现APP底部导航栏。我们以仿写微信的底部导航栏来举例说明。要实现类似微信底部的导航栏可以使用TabBar或者BottomNavigationBar来实现。下面分别介绍。在Flutter中，TabBar是一个用于创建选项卡式导航的常用组件。它通常与TabBarView一起使用，用于在不同的选项卡之间切换内容。TabBarView是一个用于显示与TabBar选项卡相对应的内容的组件。

android弹出flutter弹窗,Flutter质感设计之弹出菜单

weixin_42533120的博客

05-27

298

PopupMenuButton控件即弹出菜单控件，点击控件会出现菜单。import 'package:flutter/material.dart';class MenusDemo extends StatefulWidget {@override_MenusDemoState createState() => new _MenusDemoState();}class _MenusDemoSt...