一種更優雅的Flutter Dialog解決方案

xdd666 發表於 2020-12-04

前言

系統自帶的Dialog實際上就是Push了一個新頁面,這樣存在很多好處,但是也存在一些很難解決的問題

  • 必須傳BuildContext
    • loading彈窗一般都封裝在網路框架中,多傳個context引數就很頭疼;用fish_redux還好,effect層直接能拿到context,要是用bloc還得在view層把context傳到bloc或者cubit裡面。。。
  • 無法穿透暗色背景,點選dialog後面的控制元件
    • 這個是真頭痛,想了很多辦法都沒在自帶dialog上面解決
  • 系統自帶Dialog寫成的Loading彈窗,在網路請求和跳轉頁面的情況,會存在路由混亂的情況
    • 情景覆盤:loading庫封裝在網路層,某個頁面提交完表單,要跳轉頁面,提交操作完成,進行頁面跳轉,loading關閉是在非同步回撥中進行(onError或者onSuccess),會出現執行了跳轉操作時,彈窗還未關閉,延時一小會關閉,因為用的都是pop頁面方法,會把跳轉的頁面pop掉
    • 上面是一種很常見的場景,涉及到複雜場景更加難以預測,解決方法也有:定位頁面棧的棧頂是否是Loading彈窗,選擇性Pop,實現麻煩

上面這些痛點,簡直個個致命,當然,還存在一些其它的解決方案,例如:

  • 每個頁面頂級使用Stack
  • 使用Overlay

很明顯,使用Overlay可移植性最好,目前很多Toast和dialog三方庫便是使用該方案,使用了一些loading庫,看了其中原始碼,穿透背景解決方案,和預期想要的效果大相徑庭、一些dialog庫自帶toast顯示,但是toast顯示卻又不能和dialog共存(toast屬於特殊的資訊展示,理應能獨立存在),導致我需要多依賴一個Toast庫

SmartDialog

基於上面那些難以解決的問題,只能自己去實現,花了一些時間,實現了一個Pub包,基本該解決的痛點都已解決了,用於實際業務沒什麼問題

效果

smartDialog

引入

dependencies:
  flutter_smart_dialog: ^1.0.1

使用

  • 主入口配置
    • 在主入口這地方需要配置,這樣就可以不傳BuildContext使用Dialog
    • 只需要在MaterialApp的builder引數處配置下即可
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SmartDialogPage(),
      builder: (BuildContext context, Widget child) {
        return Material(
          type: MaterialType.transparency,
          child: FlutterSmartDialog(child: child),
        );
      },
    );
  }
}

使用FlutterSmartDialog包裹下child即可,下面就可以愉快的使用SmartDialog了

  • 使用Toast
    • msg:必傳資訊
    • time:可選,Duration型別
    • alignment:可控制toast位置
    • 如果想使用花裡花哨的Toast效果,使用show方法定製就行了,炒雞簡單喔,懶得寫,抄下我的ToastWidget,改下屬性即可
SmartDialog.instance.showToast('test toast');
  • 使用Loading
//open loading
SmartDialog.instance.showLoading();

//delay off
await Future.delayed(Duration(seconds: 2));
SmartDialog.instance.dismiss();
  • 自定義dialog
    • 使用SmartDialog.instance.show()方法即可,裡面含有眾多'Temp'為字尾的引數,和下述無'Temp'為字尾的引數功能一致
SmartDialog.instance.show(
    alignmentTemp: Alignment.bottomCenter,
    clickBgDismissTemp: true,
    widget: Container(
      color: Colors.blue,
      height: 300,
    ),
);
  • SmartDialog配置引數說明
    • 為了避免instance裡面暴露過多屬性,導致使用不便,此處諸多引數使用instance中的config屬性管理
引數 功能說明
alignment 控制自定義控制元件位於螢幕的位置
Alignment.center: 自定義控制元件位於螢幕中間,且是動畫預設為:漸隱和縮放,可使用isLoading選擇動畫
Alignment.bottomCenter、Alignment.bottomLeft、Alignment.bottomRight:自定義控制元件位於螢幕底部,動畫預設為位移動畫,自下而上,可使用animationDuration設定動畫時間
Alignment.topCenter、Alignment.topLeft、Alignment.topRight:自定義控制元件位於螢幕頂部,動畫預設為位移動畫,自上而下,可使用animationDuration設定動畫時間
Alignment.centerLeft:自定義控制元件位於螢幕左邊,動畫預設為位移動畫,自左而右,可使用animationDuration設定動畫時間
Alignment.centerRight:自定義控制元件位於螢幕左邊,動畫預設為位移動畫,自右而左,可使用animationDuration設定動畫時間
isPenetrate 預設:false;是否穿透遮罩背景,互動遮罩之後控制元件,true:點選能穿透背景,false:不能穿透;穿透遮罩設定為true,背景遮罩會自動變成透明(必須)
clickBgDismiss 預設:false;點選遮罩,是否關閉dialog---true:點選遮罩關閉dialog,false:不關閉
maskColor 遮罩顏色
animationDuration 動畫時間
isUseAnimation 預設:true;是否使用動畫
isLoading 預設:true;是否使用Loading動畫;true:內容體使用漸隱動畫 false:內容體使用縮放動畫,僅僅針對中間位置的控制元件
isExist 預設:false;主體SmartDialog(OverlayEntry)是否存在在介面上
isExistExtra 預設:false;額外SmartDialog(OverlayEntry)是否存在在介面上
  • 返回事件,關閉彈窗解決方案

使用Overlay的依賴庫,基本都存在一個問題,難以對返回事件的監聽,導致觸犯返回事件難以關閉彈窗佈局之類,想了很多辦法,沒辦法在依賴庫中解決該問題,此處提供一個BaseScaffold,在每個頁面使用BaseScaffold,便能解決返回事件關閉Dialog問題

typedef ScaffoldParamVoidCallback = void Function();

class BaseScaffold extends StatefulWidget {
    const BaseScaffold({
        Key key,
        this.appBar,
        this.body,
        this.floatingActionButton,
        this.floatingActionButtonLocation,
        this.floatingActionButtonAnimator,
        this.persistentFooterButtons,
        this.drawer,
        this.endDrawer,
        this.bottomNavigationBar,
        this.bottomSheet,
        this.backgroundColor,
        this.resizeToAvoidBottomPadding,
        this.resizeToAvoidBottomInset,
        this.primary = true,
        this.drawerDragStartBehavior = DragStartBehavior.start,
        this.extendBody = false,
        this.extendBodyBehindAppBar = false,
        this.drawerScrimColor,
        this.drawerEdgeDragWidth,
        this.drawerEnableOpenDragGesture = true,
        this.endDrawerEnableOpenDragGesture = true,
        this.isTwiceBack = false,
        this.isCanBack = true,
        this.onBack,
    })  : assert(primary != null),
    assert(extendBody != null),
    assert(extendBodyBehindAppBar != null),
    assert(drawerDragStartBehavior != null),
    super(key: key);

    ///系統Scaffold的屬性
    final bool extendBody;
    final bool extendBodyBehindAppBar;
    final PreferredSizeWidget appBar;
    final Widget body;
    final Widget floatingActionButton;
    final FloatingActionButtonLocation floatingActionButtonLocation;
    final FloatingActionButtonAnimator floatingActionButtonAnimator;
    final List<Widget> persistentFooterButtons;
    final Widget drawer;
    final Widget endDrawer;
    final Color drawerScrimColor;
    final Color backgroundColor;
    final Widget bottomNavigationBar;
    final Widget bottomSheet;
    final bool resizeToAvoidBottomPadding;
    final bool resizeToAvoidBottomInset;
    final bool primary;
    final DragStartBehavior drawerDragStartBehavior;
    final double drawerEdgeDragWidth;
    final bool drawerEnableOpenDragGesture;
    final bool endDrawerEnableOpenDragGesture;

    ///增加的屬性
    ///點選返回按鈕提示是否退出頁面,快速點選倆次才會退出頁面
    final bool isTwiceBack;

    ///是否可以返回
    final bool isCanBack;

    ///監聽返回事件
    final ScaffoldParamVoidCallback onBack;

    @override
    _BaseScaffoldState createState() => _BaseScaffoldState();
}

class _BaseScaffoldState extends State<BaseScaffold> {
    //上次點選時間
    DateTime _lastPressedAt; 

    @override
    Widget build(BuildContext context) {
        return WillPopScope(
            child: Scaffold(
                appBar: widget.appBar,
                body: widget.body,
                floatingActionButton: widget.floatingActionButton,
                floatingActionButtonLocation: widget.floatingActionButtonLocation,
                floatingActionButtonAnimator: widget.floatingActionButtonAnimator,
                persistentFooterButtons: widget.persistentFooterButtons,
                drawer: widget.drawer,
                endDrawer: widget.endDrawer,
                bottomNavigationBar: widget.bottomNavigationBar,
                bottomSheet: widget.bottomSheet,
                backgroundColor: widget.backgroundColor,
                resizeToAvoidBottomPadding: widget.resizeToAvoidBottomPadding,
                resizeToAvoidBottomInset: widget.resizeToAvoidBottomInset,
                primary: widget.primary,
                drawerDragStartBehavior: widget.drawerDragStartBehavior,
                extendBody: widget.extendBody,
                extendBodyBehindAppBar: widget.extendBodyBehindAppBar,
                drawerScrimColor: widget.drawerScrimColor,
                drawerEdgeDragWidth: widget.drawerEdgeDragWidth,
                drawerEnableOpenDragGesture: widget.drawerEnableOpenDragGesture,
                endDrawerEnableOpenDragGesture: widget.endDrawerEnableOpenDragGesture,
            ),
            onWillPop: dealWillPop,
        );
    }

    ///控制元件返回按鈕
    Future<bool> dealWillPop() async {
        if (widget.onBack != null) {
            widget.onBack();
        }

        //處理彈窗問題
        if (SmartDialog.instance.config.isExist) {
            SmartDialog.instance.dismiss();
            return false;
        }

        //如果不能返回,後面的邏輯就不走了
        if (!widget.isCanBack) {
            return false;
        }

        if (widget.isTwiceBack) {
            if (_lastPressedAt == null ||
                DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
                //兩次點選間隔超過1秒則重新計時
                _lastPressedAt = DateTime.now();

                //彈窗提示
                SmartDialog.instance.showToast("再點一次退出");
                return false;
            }
            return true;
        } else {
            return true;
        }
    }
}

幾個問題解決方案

穿透背景

  • 穿透背景有倆個解決方案,這裡都說明下

AbsorbPointer、IgnorePointer

當時想解決穿透暗色背景,和背景後面的控制元件互動的時候,我幾乎立馬想到這倆個控制元件,先了解下這倆個控制元件吧

  • AbsorbPointer
    • 阻止子樹接收指標事件,AbsorbPointer本身可以響應事件,消耗掉事件

    • absorbing 屬性(預設true)

      • true:攔截向子Widget傳遞的事件 false:不攔截
AbsorbPointer(
    absorbing: true,
    child: Listener(
        onPointerDown: (event){
            LogUtil.log('+++++++++++++++++++++++++++++++++');
        },
    )
)
  • IgnorePointer
    • 阻止子樹接收指標事件,IgnorePointer本身無法響應事件,其下的控制元件可以接收到點選事件(父控制元件)
    • ignoring 屬性(預設true)
      • true:攔截向子Widget傳遞的事件 false:不攔截
IgnorePointer(
    ignoring: true,
    child: Listener(
        onPointerDown: (event){
            LogUtil.log('----------------------------------');
        },
    )
)

分析

  • 這裡來分析下,首先AbsorbPointer這個控制元件是不合適的,因為AbsorbPointer本身會消費觸控事件,事件被AbsorbPointer消費掉,會導致背景後的頁面無法獲取到觸控事件;IgnorePointer本身無法消費觸控事件,又由於IgnorePointerAbsorbPointer都具有遮蔽子Widget獲取觸控事件的作用,這個貌似靠譜,這裡試了,可以和背景後面的頁面互動!但是又存在一個十分坑的問題
  • 因為使用IgnorePointer遮蔽子控制元件的觸控事件,而IgnorePointer本身又不消耗觸控事件,會導致無法獲取到背景的點選事件!這樣點選背景會無法關閉dialog彈窗,只能手動關閉dialog;各種嘗試,實在沒辦法獲取到背景的觸控事件,此種穿透背景的方案只能放棄

Listener、behavior

這種方案,成功實現想要的穿透效果,這裡瞭解下behavior的幾種屬性

  • deferToChild:僅當一個孩子被命中測試擊中時,屈服於其孩子的目標才會在其範圍內接收事件
  • opaque:不透明目標可能會受到命中測試的打擊,導致它們既在其範圍內接收事件,又在視覺上阻止位於其後方的目標也接收事件
  • translucent:半透明目標既可以接收其範圍內的事件,也可以在視覺上允許目標後面的目標也接收事件

有戲了!很明顯translucent是有希望的,嘗試了幾次,然後成功實現了想要的效果

注意,這邊有幾個坑點,提一下

  • 務必使用Listener控制元件來使用behavior屬性,使用GestureDetector中behavior屬性會存在一個問題,一般來說:都是Stack控制元件裡面的Children,裡面有倆個控制元件,分上下層,在此處,GestureDetector設定behavior屬性,倆個GestureDetector控制元件上下疊加,會導致下層GestureDetector獲取不到觸控事件,很奇怪;使用Listener不會產生此問題

  • 我們的背景使用Container控制元件,裡面的color不要設定值,我這裡設定了Colors.transparent,直接會導致下層接受不到觸控事件,color為空才能使下層控制元件接受到觸控事件,此處不要設定color即可

下面是寫的一個驗證小示例

class TestLayoutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _buildBg(children: [
      //底下
      Listener(
        onPointerDown: (event) {
          print(context, '底部藍色區域++++++++');
        },
        child: Container(
          height: 300,
          width: 300,
          color: Colors.blue,
        ),
      ),

      //上面 事件穿透
      Listener(
        behavior: HitTestBehavior.translucent,
        onPointerDown: (event) {
          print(context, '上面紅色區域---------');
        },
        child: Container(
          height: 200,
          width: 200,
        ),
      ),
    ]);
  }

  Widget _buildBg({List<Widget> children}) {
    return Scaffold(
      appBar: AppBar(title: Text('測試佈局')),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: children,
        ),
      ),
    );
  }
}

Toast和Loading衝突

  • 這個問題,從理論上肯定會存在的,因為一般Overlay庫只會使用一個OverlayEntry控制元件,這會導致,全域性只能存在一個浮窗佈局,Toast本質是一個全域性彈窗,Loading也是一個全域性彈窗,使用其中一個都會導致另一個消失

  • Toast明顯是應該獨立於其他彈窗的一個訊息提示,封裝在網路庫中的關閉彈窗的dismiss方法,也會將Toast訊息在不適宜的時間關閉,在實際開發中就碰到此問題,只能多引用一個Toast三方庫來解決,在規劃這個dialog庫的時候,就像必須解決此問題

    • 此處內部多使用了一個OverlayEntry來解決該問題,提供了相關引數來分別控制,完美使Toast獨立於其它的dialog彈窗
    • 此處只多提供一個OverlayEntryExtra,如果需要更多,可copy本庫,自行定義,多增加一個OverlayEntry都會讓內部邏輯和方法使用急劇複雜,維護也會變得不可預期,故只多提供一個OverlayEntry
  • FlutterSmartDialog提供OverlayEntryOverlayEntryExtra可以高度自定義,相關實現,可檢視內部實現

  • FlutterSmartDialog內部已進行相關實現,使用show()方法中的isUseExtraWidget區分

最後

這個庫花了一些時間去構思實現,算是解決幾個很大的痛點

  • 如果大家對返回事件有什麼好的處理思路,麻煩在評論裡告知,謝謝!

FlutterSmartDialog一些資訊