flutter 图解_Flutter 22: 图解 PopupMenu 那些事儿

最新推荐文章于 2024-07-09 22:14:32 发布
最新推荐文章于 2024-07-09 22:14:32 发布
阅读量858 收藏
点赞数
文章标签： flutter 图解
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42510841/article/details/111958299
版权
本文详细介绍了Flutter中的PopupMenu及其组件，包括PopupMenuItem的基本样式、CheckedPopupMenuItem的选中样式、PopupMenuDivider的使用，以及如何通过showMenu在指定位置显示菜单。示例展示了如何自定义菜单项，包括文字、图标和选中状态，并提供了在不同位置弹出菜单的方法。
摘要由CSDN通过智能技术生成

小菜需要处理标题栏弹出对话框 PopupMenu 样式，Flutter 当然提供了一些处理方式，类似 PopupMenuEntry 等，小菜仅就最基础的使用方式进行初步的学习和整理。

PopupMenuItem 基本样式

PopupMenuItem 为单个 item 的弹出样式，默认为 48px 高，可根据需求自行定义。item 中可以自定义需要的样式，包括文字图片等一系列样式。

@override

Widget build(BuildContext context) {

return new Scaffold(

appBar: AppBar(

title: Text('PopMenuDemo'),

actions: [_NomalPopMenu()],

),

body: Center(child: new Text(_bodyStr)));

}

Widget _NomalPopMenu() {

return new PopupMenuButton(

itemBuilder: (BuildContext context) => >[

new PopupMenuItem(

value: 'value01', child: new Text('Item One')),

new PopupMenuItem(

value: 'value02', child: new Text('Item Two')),

new PopupMenuItem(

value: 'value03', child: new Text('

最低0.47元/天 解锁文章
权芜虞
关注
Flutter PopupMenuButton 菜单
10-26
Flutter PopupMenuButton 菜单
flutter PopupMenu
hanyingzhong的专栏
11-17 1275
onTap: () async { final result = await showMenu( context: context, position: RelativeRect.fromLTRB(100.0, 200.0, 100.0, 100.0), // position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 10.0), items: <PopupMenuItem<String>>[ .
PopupMenuButton组件的用法
最新发布
talk_8的专栏
07-09 566
我们在本章回中介绍的PopupMenuButton组件位于AppBar右侧，通常显示三个圆点图标，点击该图标时弹出的菜单就是PopupMenuButton
Flutter实现PopupMenu（弹出设置菜单）
江上清风山间明月的博客
05-19 4357
PopupMenuButton是一个用于创建弹出菜单的小部件。它通常与IconButton或其他触发菜单显示的小部件一起使用。当用户点击触发按钮时，PopupMenuButton会在屏幕上方或下方弹出一个菜单，显示一组选项供用户选择。
【Flutter】PopupMenuButton列表框以及点击选项进入新页面
weixin_43915790的博客
11-27 1733
PopupMenuButton作业 今天做Flutter作业，一个小小的页面跳转搞了一晚上，不懂原理真难搞啊 记录一下，以防以后会用到。 一、PopupMenuButton 如上图，很快可以实现在appBar里使用PopupMenuButton组件，可是如何处理按键嘞。。。 二、使用步骤 需要定义一个记录 PopupMenuItem value的值，然后在onSelected中处理，就可以完成跳转。 enum WhyFarther{add,delet} const PopupMenuItem&lt
(16)Flutter PopupMenuItem
丿灬安之若死
02-01 1067
效果 点击弹出按钮并可以选中 源码 import 'package:flutter/material.dart'; class PupupMenuDemo extends StatefulWidget { @override _PupupMenuDemoState createState() => _PupupMenuDemoState(); } class _PupupMenuDemoState extends State<PupupMenuDemo> { S
flutter_plugin_amap:amap flutter插件
05-26
flutter_plugin_amap (高德地图插件) flutter_plugin_amap: git: url: https://github.com/chuguofei/flutter_plugin_amap.git ref: main ｜ - - 地图操作 定位当前位置 切换地图模式 绘制驾车路线 跳转内部导航 ...
flutter_cached_pdfview:Flutter的增强PDF视图
03-06
flutter_cached_pdfview 用于显示iOS和Android的本机PDF视图的软件包，支持从其他资源（例如Path，Asset或Url）打开并对其进行缓存。 支持= [ ]； 从路径打开Pdf（本地文件） 从资产打开PDF 从URl中打开Pdf并将...
flutter_full_pdf_viewer:在两个平台上都具有完整功能的pdf查看器
05-05
PDF查看器的颤动 Android和iOS的pdf查看器！... import 'package:flutter_full_pdf_viewer/flutter_full_pdf_viewer.dart'; import 'package:flutter_full_pdf_viewer/full_pdf_viewer_plugin.dart'; i
flutter_zomato_ui:Flutter Zomato App UI代码教程:grinning_face_with_sweat::victory_hand:
03-09
Flutter Zomato Ui :mobile_phone: Gif 下载以下应用进行预览 :desktop_computer: 颤振教程 所有Flutter教程以及其他代码和较短的帖子都可以在。 :mobile_phone: 屏幕截图 设计学分： : :gear: 内置惊人的工具 ...
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开发之——Menu(1)，2018年安卓面试题
m0_66264533的博客
01-20 106
this.value, this.enabled = true, this.height = kMinInteractiveDimension, this.textStyle, this.mouseCursor, required this.child, }) 3.2 属性说明 | 属性 | 说明 | 取值 | | :-: | :-: | :-: | | value | 当此项选中后，此值将会通过onSelected返回 | T | | enabled | 此项是否可用 | bool | | height
Flutter学习笔记（五）聊天界面：PopupMenu，ListView的使用以及简单聊天布局
qq_41912380的博客
08-17 6043
Flutter学习笔记（五）聊天界面：PopupMenu，ListView的使用以及简单聊天布局PopupMenu的使用ListView的使用简单的聊天布局 距离上一次更新也过了一段时间了，期间忙着学车去了，现在有空再来写一篇。 PopupMenu的使用 为什么要用这个PopupMenu呢，因为大多数消息界面的右上角，都会有一个设置的选项，而这个选项最常用的就是通过PopupMenu来实现。首...
flutter实现下拉菜单组件——基于PopupMenuButton
baorant24的博客
04-11 3408
问题背景 客户端日常开发和学习过程，下拉菜单是一个很常见的组件，本文主要介绍flutter中实现下拉菜单组件的一个方案，基于PopupMenuButton来进行实现。 问题分析 PopupMenuButton PopupMenuButton 是一个非常常见的弹出菜单栏。 属性介绍： 问题解决 话不多说，直接上代码 (1)...
Flutte PopupMenuButton(弹出菜单) Card （卡片布局）
berge
05-07 4244
card 效果 new Card( elevation: 10.0, //高度 显示出立体感 立体阴影 shape: new Border.all( color: Colors.red, width: 3.0, style: BorderStyle.solid), //图形边框 // margin: const EdgeInsets....
Flutter PopupMenuButton下拉菜单
xiangzhihong8的专栏
10-30 816
下拉菜单是移动应用交互中一种常见的交互方式，可以使用下拉列表来展示多个内容标签，实现页面引导的作用。在Flutter开发中，实现下拉弹框主要有两种方式，一种是继承Dialog组件使用自定义布局的方式实现，另一种则是使用官方的PopupMenuButton组件进行实现。使用PopupMenuButton组件实现下拉弹框时，需要传入itemBuilder、child和一些必要的属性即可，代码如下。如果没有特殊的展示要求，使用官方提供的PopupMenuButton组件即可实现下拉菜单效果，如下图所示。
flutter 点击位置弹出菜单栏（仿微信文本长按位置下方弹出菜单）
qq_36071410的博客
04-15 6979
效果图： 添加链接描述
Flutter PopupMenuButton示例 PopupWindow
u013788239的专栏
04-26 1678
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); enum ConferenceItem { AddMember, LockConference, ModifyLayout, TurnoffAll } class MyApp extends StatelessWidget { ...
flutter overlay_Flutter自绘组件：微信悬浮窗（五）
05-25
在上一篇文章中，我们实现了微信悬浮窗的拖动功能。本篇文章将继续讲解如何实现微信悬浮窗的缩放功能。 ## 实现思路 微信悬浮窗的缩放功能可以通过手势识别来实现。具体来说，当用户使用两个手指捏合或张开时，我们可以识别出缩放手势，并按照缩放手势的大小来更新悬浮窗的大小。 ## 实现步骤 1. 定义缩放手势识别器。 ```dart final scaleGestureDetector = ScaleGestureRecognizer(); ``` 2. 在 initState 方法中，将缩放手势识别器添加到 GestureDetector 中。 ```dart @override void initState() { super.initState(); // 添加缩放手势识别器 scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } @override Widget build(BuildContext context) { return GestureDetector( onLongPressMoveUpdate: _handleDragUpdate, onLongPressEnd: _handleDragEnd, child: CustomPaint( size: Size(widget.width, widget.height), painter: _FloatWindowPainter(), ), // 添加缩放手势识别器 scaleGestureDetector: scaleGestureDetector, ); } ``` 3. 在 _handleScaleUpdate 方法中，根据缩放手势的大小来更新悬浮窗的大小。 ```dart void _handleScaleUpdate(ScaleUpdateDetails details) { // 计算缩放比例 double scale = details.scale; if (scale < 1.0) { // 缩小悬浮窗 widget.width *= scale; widget.height *= scale; } else { // 放大悬浮窗 widget.width += (details.scale - 1.0) * widget.width; widget.height += (details.scale - 1.0) * widget.height; } // 更新悬浮窗位置 _updatePosition(); // 通知父组件更新悬浮窗大小 widget.onSizeChanged(widget.width, widget.height); // 刷新界面 setState(() {}); } ``` 4. 在 _handleScaleEnd 方法中，重置缩放手势识别器。 ```dart void _handleScaleEnd(ScaleEndDetails details) { // 重置缩放手势识别器 scaleGestureDetector.dispose(); scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } ``` ## 完整代码 ```dart import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; class FloatWindow extends StatefulWidget { final double x; final double y; double width; double height; final Widget child; final Function(double, double) onPositionChanged; final Function(double, double) onSizeChanged; FloatWindow({ Key key, this.x, this.y, this.width, this.height, this.child, this.onPositionChanged, this.onSizeChanged, }) : super(key: key); @override _FloatWindowState createState() => _FloatWindowState(); } class _FloatWindowState extends State<FloatWindow> { Offset _offset = Offset.zero; Offset _position = Offset.zero; bool _dragging = false; final scaleGestureDetector = ScaleGestureRecognizer(); @override void initState() { super.initState(); // 添加缩放手势识别器 scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } @override Widget build(BuildContext context) { return GestureDetector( onLongPressMoveUpdate: _handleDragUpdate, onLongPressEnd: _handleDragEnd, child: CustomPaint( size: Size(widget.width, widget.height), painter: _FloatWindowPainter(), ), // 添加缩放手势识别器 scaleGestureDetector: scaleGestureDetector, ); } @override void dispose() { // 释放缩放手势识别器 scaleGestureDetector.dispose(); super.dispose(); } void _handleScaleStart(ScaleStartDetails details) { // 记录当前悬浮窗大小 widget.width = context.size.width; widget.height = context.size.height; } void _handleScaleUpdate(ScaleUpdateDetails details) { // 计算缩放比例 double scale = details.scale; if (scale < 1.0) { // 缩小悬浮窗 widget.width *= scale; widget.height *= scale; } else { // 放大悬浮窗 widget.width += (details.scale - 1.0) * widget.width; widget.height += (details.scale - 1.0) * widget.height; } // 更新悬浮窗位置 _updatePosition(); // 通知父组件更新悬浮窗大小 widget.onSizeChanged(widget.width, widget.height); // 刷新界面 setState(() {}); } void _handleScaleEnd(ScaleEndDetails details) { // 重置缩放手势识别器 scaleGestureDetector.dispose(); scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } void _handleDragUpdate(LongPressMoveUpdateDetails details) { if (!_dragging) { _dragging = true; _offset = Offset(widget.x, widget.y); } setState(() { _position = _offset + details.offset; widget.onPositionChanged(_position.dx, _position.dy); }); } void _handleDragEnd(LongPressEndDetails details) { _dragging = false; } void _updatePosition() { if (_position.dx + widget.width / 2 > MediaQuery.of(context).size.width) { _position = Offset( MediaQuery.of(context).size.width - widget.width / 2, _position.dy, ); } if (_position.dx - widget.width / 2 < 0) { _position = Offset(widget.width / 2, _position.dy); } if (_position.dy + widget.height / 2 > MediaQuery.of(context).size.height) { _position = Offset( _position.dx, MediaQuery.of(context).size.height - widget.height / 2, ); } if (_position.dy - widget.height / 2 < 0) { _position = Offset(_position.dx, widget.height / 2); } widget.onPositionChanged(_position.dx, _position.dy); } } class _FloatWindowPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) {} @override bool shouldRepaint(_FloatWindowPainter oldDelegate) { return false; } } ``` ## 总结 本篇文章讲解了如何使用手势识别器来实现微信悬浮窗的缩放功能。通过本篇文章的学习，你已经掌握了手势识别器的使用方法，以及如何在自绘组件中使用手势识别器。在下一篇文章中，我们将讲解如何实现微信悬浮窗的旋转功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值