开始
** 开发过程中,需要基于全屏或者某child的位置进行弹窗显示,在网上找了一些,始终没有满意的,就自己改造了一番,觉得还不错,分享给有需要的人。
菜鸟一枚,代码还有很多需要优化的地方,欢迎指正,如果需要加功能可以发出来一起研究。 😃
在此感谢网上的开源文章和官方非常齐全的注释,给了我很多帮助。**
简介
1、基于全屏幕定位,进行弹窗显示:
2、基于某child widget定位,进行弹窗显示:
使用方法
** 我们以上图中的第一个按钮为例(简称 按钮A):
在实际布局中,我们只需用PopupWindowWidget进行对按钮A的包裹(对应参数名是:child), window参数则是要显示的弹窗内容。
之后,child A会自动添加点击事件,点击后显示弹窗。**
** 另外要说一下,isLocalToGlobal这个参数,决定是以什么方式为基准进行定位:
true : 以全屏幕为进准进行定位 ,当为true时,可以通过globalOffset参数进行定位偏移
false : 以child为基准进行定位 , 当为false时,可以通过offset参数进行定位偏移
这两个offset可以不填,也可以都填,具体使用哪个定位取决于上面的bool值。**
PopupWindowWidget({
Key key,
this.child,
this.window,
@required this.isLocalToGlobal,
///globalOffset 和offset 根据上面的值 二选一
this.globalOffset = Offset.zero,
this.offset = Offset.zero,
this.elevation = 2.0,
this.duration = 300,
this.type = MaterialType.card,
this.pressCallBack,
this.windowDismiss,
this.barrierColor,
this.barrierDismissible = true,
}) : super(key: key);
关于弹窗(Dialog…)的更新
** 因为类似showDialog(),所以是不同的路由(可以看做另一个页面),当你需要更新弹窗内容时,直接本页面调用setstate((){}),是无法进行更新的。
** 这里你可以借助statefulBuilder包裹这个window,并拿到stateSetter,然后通过调用stateSetter((){}),就可以刷新了。**
** 例如:**
return StatefulBuilder(
builder:(ctx,state){
///这里的state 它的类名是StateSetter,通过这个你就可以刷新下面的widget了。
return YourWidget();
}
);
**
我的做法:因为实际项目中,弹窗内容可能比较丰富,而且动态变化程度高,所以我是直接封装成了一个widget,内部通过VM层配合Provider进行控制刷新,感觉是非常不错的。
**
最后
**
我留了一些参数,用于控制诸如动画时间、背景颜色、是否点击背景dismiss等等,可以直接复制一份代码到自己的项目,根据自己的需求进行更改。
**
DEMO
[demo地址](https://github.com/bladeofgod/pop_window_demo)