Flutter 分享工具,基于全屏/某child进行自定义位置的弹窗显示和更新。

49 篇文章 0 订阅
47 篇文章 0 订阅

开始

** 开发过程中,需要基于全屏或者某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)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的 Flutter 代码示例,实现一个自定义弹窗: ```dart import 'package:flutter/material.dart'; class MyDialog extends StatelessWidget { final String title; final String message; final VoidCallback onConfirm; MyDialog({ @required this.title, @required this.message, @required this.onConfirm, }); @override Widget build(BuildContext context) { return Dialog( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(16), ), child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Padding( padding: EdgeInsets.all(16), child: Text( title, style: TextStyle( fontWeight: FontWeight.bold, fontSize: 20, ), ), ), Padding( padding: EdgeInsets.symmetric(horizontal: 16), child: Text( message, textAlign: TextAlign.center, style: TextStyle(fontSize: 16), ), ), SizedBox(height: 16), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ FlatButton( child: Text('取消'), onPressed: () { Navigator.of(context).pop(); }, ), SizedBox(width: 16), RaisedButton( child: Text('确定'), onPressed: onConfirm, ), ], ), ], ), ); } } ``` 在这个示例中,我们定义了一个 `MyDialog` 类,它接收一个标题、一个消息和一个确认回调函数作为参数。在 `build` 方法中,我们使用 `Dialog` 来实现弹窗,使用 `Column` 和 `Row` 来组织弹窗中的内容。弹窗中包含一个标题、消息、一个“取消”按钮和一个“确定”按钮。我们使用 `FlatButton` 和 `RaisedButton` 来分别实现这两个按钮。 要使用这个自定义弹窗,只需要在需要的地方创建一个 `MyDialog` 实例,并将它传递给 `showDialog` 方法即可: ```dart showDialog( context: context, builder: (BuildContext context) { return MyDialog( title: '标题', message: '这是一条消息。', onConfirm: () { // 确认回调函数 }, ); }, ); ``` 在这个示例中,我们将 `MyDialog` 实例作为 `builder` 函数的返回值,传递给 `showDialog` 方法。当用户点击弹窗中的“确定”按钮时,传递给 `MyDialog` 的确认回调函数将被调用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值