flutter悬浮框 flutter 底部弹出框

flutter- 全局悬浮可拖动的Widget

那天,产品经理说“我在微信朋友圈里点了别人分享出来的歌曲链接 听了会歌 那歌简直了 好听 退到聊天界面 出现了个悬浮的歌曲图标 那我们能不能做类似的 在所有页面都会存在这样一个悬浮图标 这个图标目前要有打客服电话功能”。

我一心想，这人真会搞事 哈哈。行 满足他

事实上有一个Overlay的widget,它的createState方法获取的就是OverlayState对象.

Overlay可以认为是一个UI上面的蒙版/浮空层,使用起来类似Stack;

相关问答

Q1: flutter android 原生浮窗组件 android_window 介绍

仓库地址：

pub 地址：

修改 MainActivity.kt 让 MainActivity 继承 qiuxiang.android_window.AndroidWindowActivity ：

创建 MainApplication.kt ：

修改 AndroidManifest.xml 的 application 新增属性 android:name=".MainApplication" ：

main.dart：

我们需要用 @pragma('vm:entry-point') 声明一个入口函数，默认函数名是 androidWindow ，当然你可以随意指定一个，只是调用 open 的时候需要同时指定参数 entryPoint: 。

android_window.dart:

浮窗 app 的写法就和我们平时写的 app 没什么区别了，如果需要支持窗口拖拽移动，则要在最外层使用 AndroidWindow 。

最终效果：

更完整的示例请参考：

主应用和浮窗都有 post 和 setHandler 方法用于发送消息以及设置监听处理函数。用法举例：

主应用发送消息到浮窗：

浮窗监听并处理主应用消息：

反过来同理。

Q2: Flutter之使用overlay显示悬浮控件

Overlay是一个Stack的widget，可以将overlay entry插入到overlay中，使独立的child窗口悬浮于其他widget之上。 因为Overlay本身使用的是[Stack]布局，所以overlay entry可以使用[Positioned] 或者 [AnimatedPositioned]在overlay中定位自己的位置。 当我们创建MaterialApp的时候，它会自动创建一个Navigator，然后创建一个Overlay; 然后利用这个Navigator来管理路由中的界面。

主要就是两个方法，往Overlay中插入entry，删除Overlay中的entry。

要将某个widget悬浮到页面顶部，就可以利用Overlay来实现。挺多场景都会用到，比如下面的例子。

如果自己写插件调用原生的Toast的话，比较麻烦，可能还会出一些适配的问题。所以可以在Flutter中利用Overlay实现Toast的效果，比较方便，而且无需担心适配的问题。 下面是简单地显示一个Toast，更多功能的话，自行封装咯。

比如实现微信首页右上角，点击“+”后的显示的弹窗效果。

（TODO：如何监听某个widget的焦点变化，我知道textform可以用focusNode来监听焦点变化，那其他widget如何监听焦点变化呢？）

关于flutter悬浮框和flutter 底部弹出框的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。