flutter活动popup,flutterapp

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Flutter 22: 图解 PopupMenu 那些事儿

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

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

Tips: 若需要处理带图标的样式时，官网提供的 Demo 是借助的 ListTile 来处理的，但是小菜测试发现图标与文字距离偏大，原因在于 ListTile 默认左侧图标 leading 距离不可直接调整，建议用 Row 或其他方式调整。

CheckedPopupMenuItem 是一个带有复选标记的弹出菜单项。默认高度同样是 48px ，水平布局使用 ListTile 复选标记是 Icons.done 图标，显示在 leading 位置；同时只有在状态为选中时才会显示图标。

PopupMenuDivider 是一条水平分割线，注意数组要使用父类 PopupMenuEntry ，配合其他 item 样式共同使用。 PopupMenuDivider 可以调整高度，但无法调整颜色，有需要的话可以进行自定义。

PopupMenu 默认的弹框位置都是在右上角，且会挡住标题栏，如果有需要在其他位置弹框就需要借助 showMenu ，主要通过 position 属性定位弹框位置。

menu 的宽高与内容相关，小菜的理解是在水平和竖直方向上会将设置的 position 位置加上 menu 宽高，再与屏幕匹配，超过屏幕宽高，根据 position 按照 LTRB 顺序贴近屏幕边框展示。

Tips: 如果 item 个数过多也无需担心，Flutter 支持默认超过屏幕滑动效果。

小菜目前的学习还仅限于基本的使用，稍高级的自定义涉及较少，如果又不对的地方还希望多多指出。

相关问答

Q1: Flutter中webview添加图片的长按操作

开发过程工我们会用webview显示一些活动或是变动比较频繁的页面,若是webview中包含图片,一般会有保存图片的需求,我们可以采用js交互的形式获取图片的url,话不多说直接看操作

获取点击位置的element,中的src值,即可

补充问题

1、在安卓设备上发现长按手势并没有调用，翻看 webview_flutter 发现需要设置安卓的类型，展示webview之前设置

2、获取到的url也就是开始返回的value值，安卓会带有”“，需要自行去掉

Q2: Flutter项目Android Studio一直连接不上模拟器Loading问题

打开MAC活动监视器，搜索git-remote-https进程，然后点击退出这个进程

Q3: flutter-动画

1.动画原理：在一段时间内快速的多次改变UI外观，由于人眼会产生视觉暂留所以最终看到的就是一个连续的动画。

UI的一次改变称为一个动画帧，对应一次屏幕刷新。

FPS：帧率，每秒的动画帧数。

flutter动画分为两类：

常见动画模式：

是一个抽象类，主要的功能是保存动画的值和状态。常用的一个Animation类是Animation double ,是一个在一段时间内依次生成一个区间之间的值的类，可以是线性或者曲线或者其他。

可以生成除double之外的其他类型值，如：Animation Color 或 Animation Size 。

是一个动画控制器，控制动画的播放状态，在屏幕刷新的每一帧，就会生成一个新的值。

包含动画的启动forward()、停止stop() 、反向播放 reverse()等方法，在给定的时间段内线性的生成从0.0到1.0（默认区间）的数字。

curve:描述动画的曲线过程。

curvedAnimation:指定动画的曲线。

常用Curve：

继承自Animatable T ，表示的就是一个 Animation 对象的取值范围，只需要设置开始和结束的边界值(值也支持泛型)。它唯一的工作就是定义输入范围到输出范围的映射。

例如，Tween可能会生成从红到蓝之间的色值，或者从0到255。

Tween.animate:返回一个Animation。

映射过程：

1). Tween.animation通过传入 aniamtionController 获得一个_AnimatedEvaluation 类型的 animation 对象(基类为 Animation)，并且将 aniamtionController 和 Tween 对象传入了 _AnimatedEvaluation 对象。

2). animation.value方法即是调用 _evaluatable.evaluate(parent)方法，而 _evaluatable 和 parent 分别为 Tween 对象和 AnimationController 对象。

3). 这里的 animation 其实就是前面的 AnimationController 对象， transform 方法里面的 animation.value则就是 AnimationController 线性生成的 0.0~1.0 直接的值。在 lerp 方法里面我们可以看到这个 0.0~1.0 的值被映射到了 begin 和 end 范围内了。

接收一个TickerProvider类型的对象，它的主要职责是创建Ticker。

防止屏幕外动画消耗资源。

[图片上传失败...(image-115b94-1636441483468)]

过程：

回调：

不使用addListener()和setState()来给widget添加动画。

使用AnimatedWidget，将widget分离出来，创建一个可重用动画的widget，AnimatedWidget中会自动调用addListener()和setState()

AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition

如何渲染过渡，把渲染过程也抽象出来：

AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。

MaterialPageRoute：平台风格一致的路由切换动画

CupertinoPageRoute：左右切换风格

自定义：PageRouteBuilder

1.要创建交织动画，需要使用多个动画对象（Animation）。

2.一个AnimationController控制所有的动画对象。

3.给每一个动画对象指定时间间隔（Interval）

可以同时对其新、旧子元素添加显示、隐藏动画.

当AnimatedSwitcher的child发生变化时（类型或Key不同），旧child会执行隐藏动画，新child会执行执行显示动画。

希望大家支持一下，感谢

Q4: Flutter2.0 一定要区分好上线文（BuildContext context），不然页面都没法关闭