flutter 自定义 LoadingView、LoadingD

页面状态管理控件

项目github地址

项目简介

    项目开发中会使用到加载弹窗和页面状态管理控件，本项目有两个自定义控件，ios 和android 效果一致

    一个是加载弹窗控件 LoadingDialog

    一个是页面状态管理控件 LoadingView

实现方式

    加载动画弹窗使用的 showDialog() 方式实现，通过传入自定义的控件 LoadingDialog 来达到效果

    页面状态管理控件通过传入 state，根据 steta 返回不同的页面来实现的

加载弹窗的使用

    showDialog(

        context: context,

        builder: (_) {

          return LoadingDialog();

        }

    );

    如果需要监听控件关闭时的动作传入 dismissListener 即可

    showDialog(

        context: context,

        builder: (_) {

          return LoadingDialog(

            dismissListener: () {

              //弹窗消失时操作

            },

          );

        }

    );

    默认点击控件外部会隐藏，如果需要点击外部不隐藏，可以传入 outsideDismiss 参数为 false 或者修改默认值

    页面状态控件使用

    return Scaffold(

      body: LoadingView(

        state: _state,

        //加载成功时显示的页面

        contentWidget: _buildContentView (),

        //自定义状态页面，当 state 为 custom 时显示

        customWidget: _buildCustomView (),

        allRetryListener: () {

          _showLoadingNow(LoadingState.loading);

          _startTimer(LoadingState.success);

        },

      ),

    );

    如果需要对单独页面的重新加载进行处理，比如网络异常需要单独处理如下

    return Scaffold(

      body: LoadingView(

        state: _state,

        //加载成功时显示的页面

        contentWidget: _buildContentView (),

        //自定义状态页面，当 state 为 custom 时显示

        customWidget: _buildCustomView (),

        allRetryListener: () {

          //统一的重新加载处理

        },

        intentErrorRetryListener: () {

          //单独设置来网络异常的处理，当在网络异常页面点击重新加载的时候会走这里而不会走统一处理的函数

        },

      ),

    );

附上 android、ios 运行效果图

项目github地址