• Flutter项目开发模版，开箱即用

    前言

    当前案例 Flutter SDK版本：3.22.2

    每当我们开始一个新项目，都会 引入常用库、封装工具类，配置环境等等，我参考了一些文档，将这些内容整合、简单修改、二次封装，得到了一个开箱即用的Flutter开发模版，即使看不懂封装的工具对象原理，也没关系，模版化的使用方式，小白也可以快速开发Flutter项目。

    快速上手

    用到的依赖库

    1.   dio: ^5.4.3+1 // 网络请求
    2.   fluro: ^2.0.5 // 路由
    3.   pull_to_refresh: ^2.0.0 // 下拉刷新 / 上拉加载更多

    修改规则

    默认使用的是Flutter团队制定的规则，但每个开发团队规则都不一样，违反规则的地方会出现黄色波浪下划线，比如我定义常量喜欢字母全部大写，这和默认规则不符；

    修改 Flutter项目里的 analysis_options.yaml 文件，找到 rules，添加以下配置；

    1.   rules:
    2.     use_key_in_widget_constructors: false
    3.     prefer_const_constructors: false
    4.     package_names: null

     修改前

    修改后 

    MVVM

    • MVVM 设计模式，相信大家应该不陌生，我简单说一下每层主要负责做什么；
    • Model: 数据相关操作；
    • View：UI相关操作；
    • ViewModel：业务逻辑相关操作。

    持有关系：

    View持有 ViewModel；

    Model持有ViewModel；

    ViewModel持有View；

    ViewModel持有Model；

    注意：这种持有关系，有很高的内存泄漏风险，所以我在基类的 dispose() 中进行了销毁，子类重写一定要调用 super.dispose()；

    1. /// BaseStatefulPageState的子类，重写 dispose()
    2. /// 一定要执行父类 dispose()，防止内存泄漏
    3. @override
    4. void dispose() {
    5.   /// 销毁顺序
    6.  
    7.   /// 1、Model 销毁其持有的 ViewModel
    8.   if(viewModel?.pageDataModel?.data is BaseModel?) {
    9.     BaseModel? baseModel = viewModel?.pageDataModel?.data as BaseModel?;
    10.     baseModel?.onDispose();
    11.   }
    12.   if(viewModel?.pageDataModel?.data is BasePagingModel?) {
    13.     BasePagingModel? basePagingModel = viewModel?.pageDataModel?.data as BasePagingModel?;
    14.     basePagingModel?.onDispose();
    15.   }
    16.  
    17.   /// 2、ViewModel 销毁其持有的 View
    18.   /// 3、ViewModel 销毁其持有的 Model
    19.   viewModel?.onDispose();
    20.  
    21.   /// 4、View 销毁其持有的 ViewModel
    22.   viewModel = null;
    23.  
    24.   /// 5、销毁监听App生命周期方法
    25.   lifecycleListener?.dispose();
    26.   super.dispose();
    27. }

    基类放在文章最后说，这里先忽略；

    Model

    1. class HomeListModel extends BaseModel {
    2.  
    3.     ... ... 
    4.  
    5. 	ValueNotifier<int> tapNum = ValueNotifier<int>(0); // 点击次数
    6.  
    7. 	@override
    8.     void onDispose() {
    9. 	  tapNum.dispose();
    10.       super.onDispose();
    11.     }
    12.  
    13.     ... ...
    14. 	
    15. }
    16.  
    17. ... ...

    View

    1. class HomeView extends BaseStatefulPage<HomeViewModel> {
    2.   HomeView({super.key});
    3.  
    4.   @override
    5.   HomeViewState createState() => HomeViewState();
    6. }
    7.  
    8. class HomeViewState extends BaseStatefulPageState<HomeView, HomeViewModel> {
    9.  
    10.   @override
    11.   HomeViewModel viewBindingViewModel() {
    12.  
    13.     /// ViewModel 和 View 相互持有
    14.     return HomeViewModel()..viewState = this;
    15.  
    16.   }
    17.  
    18.   /// 初始化 页面 属性
    19.   @override
    20.   void initAttribute() {
    21.     ... ...
    22.   }
    23.  
    24.   /// 初始化 页面 相关对象绑定
    25.   @override
    26.   void initObserver() {
    27.     ... ...
    28.   }
    29.  
    30.   @override
    31.   void dispose() {
    32.     ... ... 
    33.  
    34.     /// BaseStatefulPageState的子类，重写 dispose()
    35.     /// 一定要执行父类 dispose()，防止内存泄漏
    36.     super.dispose();
    37.   }
    38.  
    39.   ValueNotifier<int> tapNum = ValueNotifier<int>(0);
    40.  
    41.   @override
    42.   Widget appBuild(BuildContext context) {
    43.  
    44.     ... ...
    45.  
    46.   }
    47.  
    48.   /// 是否保存页面状态
    49.   @override
    50.   bool get wantKeepAlive => true;
    51.  
    52. }

    ViewModel

    1. class HomeViewModel extends PageViewModel<HomeViewState> {
    2.  
    3.   HomeViewState? state;
    4.  
    5.   @override
    6.   onCreate() {
    7.   
    8.     /// 拿到 页面状态里的 对象、属性 等等
    9.     debugPrint('---runSwitchLogin：${state.runSwitchLogin}');
    10.     ... ... 
    11.  
    12.     /// 初始化 网络请求
    13.     requestData();
    14.   }
    15.  
    16.   @override
    17.   onDispose() {
    18.     ... ...
    19.  
    20.     /// 别忘了执行父类的 onDispose
    21.     super.onDispose();
    22.   }
    23.  
    24.   /// 请求数据
    25.   @override
    26.   Future requestData({Map<String, dynamic>? params}) async {
    27.     
    28.     ... ...
    29.  
    30.   }
    31. }

    网络请求

    Get请求

    1. class HomeRepository {
    2.  
    3.   /// 获取首页数据
    4.   Future getHomeData({
    5.     required PageViewModel pageViewModel,
    6.     CancelToken? cancelToken,
    7.     int curPage = 0,
    8.   }) async {
    9.     try {
    10.       Response response = await DioClient().doGet('project/list/$curPage/json?cid=294', cancelToken: cancelToken);
    11.  
    12.       if(response.statusCode == REQUEST_SUCCESS) {
    13.         /// 请求成功
    14.         pageViewModel.pageDataModel?.type = NotifierResultType.success;
    15.  
    16.         /// ViewModel 和 Model 相互持有
    17.         HomeListModel model = HomeListModel.fromJson(response.data);
    18.         model.vm = pageViewModel;
    19.         pageViewModel.pageDataModel?.data = model;
    20.       } else {
    21.  
    22.         /// 请求成功，但业务不通过，比如没有权限
    23.         pageViewModel.pageDataModel?.type = NotifierResultType.unauthorized;
    24.         pageViewModel.pageDataModel?.errorMsg = response.statusMessage;
    25.       }
    26.  
    27.     } on DioException catch (dioEx) {
    28.       /// 请求异常
    29.       pageViewModel.pageDataModel?.type = NotifierResultType.dioError;
    30.       pageViewModel.pageDataModel?.errorMsg = dioErrorConversionText(dioEx);
    31.  
    32.     } catch (e) {
    33.       /// 未知异常
    34.       pageViewModel.pageDataModel?.type = NotifierResultType.fail;
    35.       pageViewModel.pageDataModel?.errorMsg = e.toString();
    36.     }
    37.  
    38.     return pageViewModel;
    39.   }
    40.  
    41. }

    Post请求

    1. class PersonalRepository {
    2.  
    3.   /// 注册
    4.   Future registerUser({
    5.     required PageViewModel pageViewModel,
    6.     Map<String, dynamic>? params,
    7.     CancelToken? cancelToken,
    8.   }) async {
    9.  
    10.     try {
    11.       Response response = await DioClient().doPost(
    12.         'user/register',
    13.         params: params,
    14.         cancelToken: cancelToken,
    15.       );
    16.  
    17.       if(response.statusCode == REQUEST_SUCCESS) {
    18.         /// 请求成功
    19.         pageViewModel.pageDataModel?.type = NotifierResultType.success; // 请求成功
    20.  
    21.         /// ViewModel 和 Model 相互持有
    22.         UserInfoModel model = UserInfoModel.fromJson(response.data)..isLogin = false;
    23.         model.vm = pageViewModel;
    24.         pageViewModel.pageDataModel?.data = model;
    25.       } else {
    26.  
    27.         /// 请求成功，但业务不通过，比如没有权限
    28.         pageViewModel.pageDataModel?.type = NotifierResultType.unauthorized;
    29.         pageViewModel.pageDataModel?.errorMsg = response.statusMessage;
    30.       }
    31.  
    32.     } on DioException catch (dioEx) {
    33.       /// 请求异常
    34.       pageViewModel.pageDataModel?.type = NotifierResultType.dioError;
    35.       pageViewModel.pageDataModel?.errorMsg = dioErrorConversionText(dioEx);
    36.  
    37.     } catch (e) {
    38.       /// 未知异常
    39.       pageViewModel.pageDataModel?.type = NotifierResultType.fail;
    40.       pageViewModel.pageDataModel?.errorMsg = e.toString();
    41.     }
    42.  
    43.     return pageViewModel;
    44.   }
    45.  
    46.   /// 登陆
    47.   Future loginUser({
    48.     required PageViewModel pageViewModel,
    49.     Map<String, dynamic>? params,
    50.     CancelToken? cancelToken,
    51.   }) async {
    52.  
    53.     try {
    54.       Response response = await DioClient().doPost(
    55.         'user/login',
    56.         params: params,
    57.         cancelToken: cancelToken,
    58.       );
    59.  
    60.       if(response.statusCode == REQUEST_SUCCESS) {
    61.         /// 请求成功
    62.         pageViewModel.pageDataModel?.type = NotifierResultType.success;
    63.  
    64.         /// ViewModel 和 Model 相互持有
    65.         UserInfoModel model = UserInfoModel.fromJson(response.data)..isLogin = true;
    66.         model.vm = pageViewModel;
    67.         pageViewModel.pageDataModel?.data = model;
    68.       } else {
    69.  
    70.         /// 请求成功，但业务不通过，比如没有权限
    71.         pageViewModel.pageDataModel?.type = NotifierResultType.unauthorized;
    72.         pageViewModel.pageDataModel?.errorMsg = response.statusMessage;
    73.       }
    74.  
    75.     } on DioException catch (dioEx) {
    76.       /// 请求异常
    77.       pageViewModel.pageDataModel?.type = NotifierResultType.dioError;
    78.       pageViewModel.pageDataModel?.errorMsg = dioErrorConversionText(dioEx);
    79.  
    80.     } catch (e) {
    81.       /// 未知异常
    82.       pageViewModel.pageDataModel?.type = NotifierResultType.fail;
    83.       pageViewModel.pageDataModel?.errorMsg = e.toString();
    84.     }
    85.  
    86.     return pageViewModel;
    87.   }
    88.  
    89. }

    分页数据请求

    1. class MessageRepository {
    2.  
    3.   /// 分页列表
    4.   Future getMessageData({
    5.     required PageViewModel pageViewModel,
    6.     CancelToken? cancelToken,
    7.     int curPage = 0,
    8.   }) async {
    9.     try {
    10.       Response response = await DioClient().doGet('article/list/$curPage/json', cancelToken: cancelToken);
    11.  
    12.       if(response.statusCode == REQUEST_SUCCESS) {
    13.         /// 请求成功
    14.         pageViewModel.pageDataModel?.type = NotifierResultType.success;
    15.  
    16.         /// 有分页
    17.         pageViewModel.pageDataModel?.isPaging = true;
    18.  
    19.         /// 分页代码
    20.         pageViewModel.pageDataModel?.correlationPaging(pageViewModel, MessageListModel.fromJson(response.data));
    21.       } else {
    22.  
    23.         /// 请求成功，但业务不通过，比如没有权限
    24.         pageViewModel.pageDataModel?.type = NotifierResultType.unauthorized;
    25.         pageViewModel.pageDataModel?.errorMsg = response.statusMessage;
    26.       }
    27.  
    28.     } on DioException catch (dioEx) {
    29.       /// 请求异常
    30.       pageViewModel.pageDataModel?.type = NotifierResultType.dioError;
    31.       pageViewModel.pageDataModel?.errorMsg = dioErrorConversionText(dioEx);
    32.     } catch (e) {
    33.       /// 未知异常
    34.       pageViewModel.pageDataModel?.type = NotifierResultType.fail;
    35.       pageViewModel.pageDataModel?.errorMsg = e.toString();
    36.     }
    37.  
    38.     return pageViewModel;
    39.   }
    40.  
    41. }

    剩下的 ResultFul API 风格请求，我就不一一演示了，DioClient 里都封装好了，照葫芦画瓢就好。

    ResultFul API 风格
    GET：从服务器获取一项或者多项数据
    POST：在服务器新建一个资源
    PUT：在服务器更新所有资源
    PATCH：更新部分属性
    DELETE：从服务器删除资源

    刷新页面

    NotifierPageWidget

    这个组件是我封装的，和 ViewModel 里的 PageDataModel 绑定，当PageDataModel里的数据发生改变，就可以通知 NotifierPageWidget 刷新；

    1. enum NotifierResultType {
    2.   // 不检查
    3.   notCheck,
    4.  
    5.   // 加载中
    6.   loading,
    7.  
    8.   // 请求成功
    9.   success,
    10.  
    11.   // 这种属于请求成功，但业务不通过，比如没有权限
    12.   unauthorized,
    13.  
    14.   // 请求异常
    15.   dioError,
    16.  
    17.   // 未知异常
    18.   fail,
    19. }
    20.  
    21. typedef NotifierPageWidgetBuilderextends BaseChangeNotifier> = Widget
    22.     Function(BuildContext context, PageDataModel model);
    23.  
    24. /// 这个是配合 PageDataModel 类使用的
    25. class NotifierPageWidget<T extends BaseChangeNotifier> extends StatefulWidget {
    26.   NotifierPageWidget({
    27.     super.key,
    28.     required this.model,
    29.     required this.builder,
    30.   });
    31.  
    32.   /// 需要监听的数据观察类
    33.   final PageDataModel? model;
    34.  
    35.   final NotifierPageWidgetBuilder builder;
    36.  
    37.   @override
    38.   _NotifierPageWidgetState createState() => _NotifierPageWidgetState();
    39. }
    40.  
    41. class _NotifierPageWidgetState<T extends BaseChangeNotifier>
    42.     extends State<NotifierPageWidget<T>> {
    43.   PageDataModel? model;
    44.  
    45.   /// 刷新UI
    46.   refreshUI() => setState(() {
    47.     model = widget.model;
    48.   });
    49.  
    50.   /// 对数据进行绑定监听
    51.   @override
    52.   void initState() {
    53.     super.initState();
    54.  
    55.     model = widget.model;
    56.  
    57.     // 先清空一次已注册的Listener，防止重复触发
    58.     model?.removeListener(refreshUI);
    59.  
    60.     // 添加监听
    61.     model?.addListener(refreshUI);
    62.   }
    63.  
    64.   @override
    65.   void didUpdateWidget(covariant NotifierPageWidget oldWidget) {
    66.     super.didUpdateWidget(oldWidget);
    67.     if (oldWidget.model != widget.model) {
    68.       // 先清空一次已注册的Listener，防止重复触发
    69.       oldWidget.model?.removeListener(refreshUI);
    70.  
    71.       model = widget.model;
    72.  
    73.       // 添加监听
    74.       model?.addListener(refreshUI);
    75.     }
    76.   }
    77.  
    78.   @override
    79.   Widget build(BuildContext context) {
    80.  
    81.     if (model?.type == NotifierResultType.notCheck) {
    82.       return widget.builder(context, model!);
    83.     }
    84.  
    85.     if (model?.type == NotifierResultType.loading) {
    86.       return Center(
    87.         child: Text('加载中...'),
    88.       );
    89.     }
    90.  
    91.     if (model?.type == NotifierResultType.success) {
    92.       if (model?.data == null) {
    93.         return Center(
    94.           child: Text('数据为空'),
    95.         );
    96.       }
    97.       if(model?.isPaging ?? false) {
    98.         var lists = model?.data?.datas as List?;
    99.         if(lists?.isEmpty ?? false){
    100.           return Center(
    101.             child: Text('列表数据为空'),
    102.           );
    103.         };
    104.       }
    105.       return widget.builder(context, model!);
    106.     }
    107.  
    108.     if (model?.type == NotifierResultType.unauthorized) {
    109.       return Center(
    110.         child: Text('业务不通过：${model?.errorMsg}'),
    111.       );
    112.     }
    113.  
    114.     /// 异常抛出，会在终端会显示，可帮助开发阶段，快速定位异常所在，
    115.     /// 但会阻断，后续代码执行，建议 非开发阶段 关闭
    116.     if(EnvConfig.throwError) {
    117.       throw Exception('${model?.errorMsg}');
    118.     }
    119.  
    120.     if (model?.type == NotifierResultType.dioError) {
    121.       return Center(
    122.         child: Text('dioError异常：${model?.errorMsg}'),
    123.       );
    124.     }
    125.  
    126.     if (model?.type == NotifierResultType.fail) {
    127.       return Center(
    128.         child: Text('未知异常：${model?.errorMsg}'),
    129.       );
    130.     }
    131.  
    132.     return Center(
    133.       child: Text('请联系客服：${model?.errorMsg}'),
    134.     );
    135.   }
    136.  
    137.   @override
    138.   void dispose() {
    139.     widget.model?.removeListener(refreshUI);
    140.     super.dispose();
    141.   }
    142. }

    使用 

    1. class HomeView extends BaseStatefulPage<HomeViewModel> {
    2.   HomeView({super.key});
    3.  
    4.   @override
    5.   HomeViewState createState() => HomeViewState();
    6. }
    7.  
    8. class HomeViewState extends BaseStatefulPageState<HomeView, HomeViewModel> { 
    9.  
    10.   @override
    11.   Widget appBuild(BuildContext context) {
    12.  
    13.     return Scaffold(
    14.       ... ... 
    15.  
    16.       body: NotifierPageWidget(
    17.           model: viewModel?.pageDataModel,
    18.           builder: (context, dataModel) {
    19.  
    20.             final data = dataModel.data as HomeListModel?;
    21.             ... ... 
    22.  
    23.             return Stack(
    24.               children: [
    25.  
    26.                 ListView.builder(
    27.                     padding: EdgeInsets.zero,
    28.                     itemCount: data?.datas?.length ?? 0,
    29.                     itemBuilder: (context, index) {
    30.                       return Container(
    31.                         width: MediaQuery.of(context).size.width,
    32.                         height: 50,
    33.                         alignment: Alignment.center,
    34.                         child: Text('${data?.datas?[index].title}'),
    35.                       );
    36.                     }),
    37.  
    38.                 ... ...
    39.  
    40.               ],
    41.             );
    42.           }
    43.       ),
    44.     );
    45.   }
    46.  
    47. }

    ValueListenableBuilder

    这个就是Flutter自带的组件，配合ValueNotifier使用，我主要用它做局部刷新；

    1. class HomeView extends BaseStatefulPage<HomeViewModel> {
    2.   HomeView({super.key});
    3.  
    4.   @override
    5.   HomeViewState createState() => HomeViewState();
    6. }
    7.  
    8. class HomeViewState extends BaseStatefulPageState<HomeView, HomeViewModel> {
    9.  
    10.   ... ...  
    11.  
    12.   ValueNotifier<int> tapNum = ValueNotifier<int>(0);
    13.  
    14.   @override
    15.   Widget appBuild(BuildContext context) {
    16.  
    17.     return Scaffold(
    18.       appBar: AppBar(
    19.         backgroundColor: AppBarTheme.of(context).backgroundColor,
    20.  
    21.         /// 局部刷新
    22.         title: ValueListenableBuilder<int>(
    23.           valueListenable: tapNum,
    24.           builder: (context, value, _) {
    25.             return Text(
    26.               'Home：$value',
    27.               style: TextStyle(fontSize: 20),
    28.             );
    29.           },
    30.         ),
    31.  
    32.         ... ... 
    33.       ),
    34.     );
    35.  
    36.   }
    37.  
    38. }

    演示效果

    路由

    配置

    1. class Routers {
    2.   static FluroRouter router = FluroRouter();
    3.  
    4.   // 配置路由
    5.   static void configureRouters() {
    6.     router.notFoundHandler = Handler(handlerFunc: (_, __) {
    7.       // 找不到路由时，返回指定提示页面
    8.       return Scaffold(
    9.         body: const Center(
    10.           child: Text('404'),
    11.         ),
    12.       );
    13.     });
    14.  
    15.     // 初始化路由
    16.     _initRouter();
    17.   }
    18.  
    19.   // 设置页面
    20.  
    21.   // 页面标识
    22.   static String root = '/';
    23.  
    24.   // 页面A
    25.   static String pageA = '/pageA';
    26.  
    27.   // 页面B
    28.   static String pageB = '/pageB';
    29.  
    30.   // 页面C
    31.   static String pageC = '/pageC';
    32.  
    33.   // 页面D
    34.   static String pageD = '/pageD';
    35.  
    36.   // 注册路由
    37.   static _initRouter() {
    38.  
    39.     // 根页面
    40.     router.define(
    41.       root,
    42.       handler: Handler(
    43.         handlerFunc: (_, __) => AppMainPage(),
    44.       ),
    45.     );
    46.  
    47.     // 页面A 需要 非对象类型 参数
    48.     router.define(
    49.       pageA,
    50.       handler: Handler(
    51.         handlerFunc: (_, Map<String, List<String>> params) {
    52.  
    53.           // 获取路由参数
    54.           String? name = params['name']?.first;
    55.           String? title = params['title']?.first;
    56.           String? url = params['url']?.first;
    57.           String? age = params['age']?.first ?? '-1';
    58.           String? price = params['price']?.first ?? '-1';
    59.           String? flag = params['flag']?.first ?? 'false';
    60.  
    61.           return PageAView(
    62.             name: name,
    63.             title: title,
    64.             url: url,
    65.             age: int.parse(age),
    66.             price: double.parse(price),
    67.             flag: bool.parse(flag)
    68.           );
    69.  
    70.         },
    71.       ),
    72.     );
    73.  
    74.     // 页面B 需要 对象类型 参数
    75.     router.define(
    76.       pageB,
    77.       handler: Handler(
    78.         handlerFunc: (context, Map<String, List<String>> params) {
    79.           // 获取路由参数
    80.           TestParamsModel? paramsModel = context?.settings?.arguments as TestParamsModel?;
    81.           return PageBView(paramsModel: paramsModel);
    82.         },
    83.       ),
    84.     );
    85.  
    86.     // 页面C 无参数
    87.     router.define(
    88.       pageC,
    89.       handler: Handler(
    90.         handlerFunc: (_, __) => PageCView(),
    91.       ),
    92.     );
    93.  
    94.     // 页面D 无参数
    95.     router.define(
    96.       pageD,
    97.       handler: Handler(
    98.         handlerFunc: (_, __) => PageDView(),
    99.       ),
    100.     );
    101.   }
    102.  
    103. }

    普通无参跳转

    NavigatorUtil.push(context, Routers.pageA);

    传参跳转 - 非对象类型

    1.   /// 传递 非对象参数 方式
    2.   /// 在path后面，使用 '?' 拼接，再使用 '&' 分割
    3.  
    4.   String name = 'jk';
    5.  
    6.   /// Invalid argument(s): Illegal percent encoding in URI
    7.   /// 出现这个异常，说明相关参数，需要转码一下
    8.   /// 当前举例：中文、链接
    9.   String title = Uri.encodeComponent('张三');
    10.   String url = Uri.encodeComponent('https://www.baidu.com');
    11.  
    12.   int age = 99;
    13.   double price = 9.9;
    14.   bool flag = true;
    15.  
    16.   /// 注意：使用 path拼接方式 传递 参数，会改变原来的 路由页面 Path
    17.   /// path会变成：/pageA?name=jk&title=%E5%BC%A0%E4%B8%89&url=https%3A%2F%2Fwww.baidu.com&age=99&price=9.9&flag=true
    18.   /// 所以再次匹配pageA，找不到，需要还原一下，getOriginalPath(path)
    19.   NavigatorUtil.push(context,'${Routers.pageA}?name=$name&title=$title&url=$url&age=$age&price=$price&flag=$flag');
    20.

    传参跳转 - 对象类型

    1. NavigatorUtil.push(
    2.     context,
    3.     Routers.pageB,
    4.     arguments: TestParamsModel(
    5.       name: 'jk',
    6.       title: '张三',
    7.       url: 'https://www.baidu.com',
    8.       age: 99,
    9.       price: 9.9,
    10.       flag: true,
    11.     )
    12. );

    拦截

    1. /// 监听路由栈状态
    2. class PageRouteObserver extends NavigatorObserver {
    3.   ... ...
    4.  
    5.   @override
    6.   void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    7.     super.didPush(route, previousRoute);
    8.  
    9.     /// 当前所在页面 Path
    10.     String? currentRoutePath = getOriginalPath(previousRoute);
    11.  
    12.     /// 要前往的页面 Path
    13.     String? newRoutePath = getOriginalPath(route);
    14.  
    15.     /// 拦截指定页面
    16.     /// 如果从 PageA 页面，跳转到 PageD，将其拦截
    17.     if(currentRoutePath == Routers.pageA) {
    18.  
    19.       if(newRoutePath == Routers.pageD) {
    20.         assert((){
    21.           debugPrint('准备从 PageA页面 进入 pageD页面，进行登陆信息验证');
    22.  
    23.           // if(验证不通过) {
    24.             /// 注意：要延迟一帧
    25.             WidgetsBinding.instance.addPostFrameCallback((_){
    26.               // 我这里是pop，视觉上达到无法进入新页面的效果，
    27.               // 正常业务是跳转到 登陆页面
    28.               NavigatorUtil.back(navigatorKey.currentContext!);
    29.             });
    30.           // }
    31.  
    32.           return true;
    33.         }());
    34.       }
    35.     }
    36.  
    37.     ... ... 
    38.   }
    39.  
    40.  ... ...
    41.   
    42. }
    43.  
    44. /// 获取原生路径
    45. /// 使用 path拼接方式 传递 参数，会改变原来的 路由页面 Path
    46. ///
    47. /// 比如：NavigatorUtil.push(context,'${Routers.pageA}?name=$name&title=$title&url=$url&age=$age&price=$price&flag=$flag');
    48. /// path会变成：/pageA?name=jk&title=%E5%BC%A0%E4%B8%89&url=https%3A%2F%2Fwww.baidu.com&age=99&price=9.9&flag=true
    49. /// 所以再次匹配pageA，找不到，需要还原一下，getOriginalPath(path)
    50. String? getOriginalPath(Route<dynamic>? route) {
    51.   // 获取原始的路由路径
    52.   String? fullPath = route?.settings.name;
    53.  
    54.   if(fullPath != null) {
    55.     // 使用正则表达式去除查询参数
    56.     return fullPath.split('?')[0];
    57.   }
    58.  
    59.   return fullPath;
    60. }

    演示效果

    全局通知

    有几种业务需求，需要在不重启应用的情况下，更新每个页面的数据；

    比如 切换主题，什么暗夜模式，还有就是 切换登录 等等，这里我偷了个懒，没有走完整的业务，只是调用当前 已经存在的所有页面的 didChangeDependencies() 方法；

    注意：核心代码 我写在 BaseStatefulPageState 里，所以只有 继承 BaseStatefulPage + BaseStatefulPageState 的 页面才能被通知。

    具体原理：是 InheritedWidget 的特性，Provider 就是基于它实现的；
    从 Flutter 源码看 InheritedWidget 内部实现原理

    切换登录

    在每个页面的 didChangeDependencies 里处理逻辑，重新请求接口；

    1.   @override
    2.   void didChangeDependencies() {
    3.     var operate = GlobalOperateProvider.getGlobalOperate(context: context);
    4.  
    5.     assert((){
    6.       debugPrint('HomeView.didChangeDependencies --- $operate');
    7.       return true;
    8.     }());
    9.  
    10.     // 切换用户
    11.     // 正常业务流程是：从本地存储，拿到当前最新的用户ID，请求接口，我这里偷了个懒 😄
    12.     // 直接使用随机数，模拟 不同用户ID
    13.     if (operate == GlobalOperate.switchLogin) {
    14.       runSwitchLogin = true;
    15.  
    16.       // 重新请求数据
    17.       // 如果你想刷新的时候，显示loading，加上这个两行
    18.       viewModel?.pageDataModel?.type = NotifierResultType.loading;
    19.       viewModel?.pageDataModel?.refreshState();
    20.  
    21.       viewModel?.requestData(params: {'curPage': Random().nextInt(20)});
    22.     }
    23.   }

    这是两个基类的完整代码

    1. import 'package:flutter/material.dart';
    2.  
    3. /// 在执行全局操作后，所有继承 BaseStatefulPageState 的子页面，
    4. /// 都会执行 didChangeDependencies() 方法，然后执行 build() 方法
    5. ///
    6. /// 具体原理：是 InheritedWidget 的特性
    7. /// https://loveky.github.io/2018/07/18/how-flutter-inheritedwidget-works/
    8.  
    9. /// 全局操作类型
    10. enum GlobalOperate {
    11.   /// 默认空闲
    12.   idle,
    13.  
    14.   /// 切换登陆
    15.   switchLogin,
    16.  
    17.   /// ... ...
    18. }
    19.  
    20. /// 持有 全局操作状态 的 InheritedWidget
    21. class GlobalNotificationWidget extends InheritedWidget {
    22.   GlobalNotificationWidget({
    23.     required this.globalOperate,
    24.     required super.child});
    25.  
    26.   final GlobalOperate globalOperate;
    27.  
    28.   static GlobalNotificationWidget? of(BuildContext context) {
    29.     return context
    30.         .dependOnInheritedWidgetOfExactType();
    31.   }
    32.  
    33.   /// 通知所有建立依赖的 子Widget
    34.   @override
    35.   bool updateShouldNotify(covariant GlobalNotificationWidget oldWidget) =>
    36.       oldWidget.globalOperate != globalOperate &&
    37.       globalOperate != GlobalOperate.idle;
    38. }
    39.  
    40. /// 具体使用的 全局操作 Widget
    41. ///
    42. /// 执行全局操作： GlobalOperateProvider.runGlobalOperate(context: context, operate: GlobalOperate.switchLogin);
    43. /// 获取全局操作类型 GlobalOperateProvider.getGlobalOperate(context: context)
    44. class GlobalOperateProvider extends StatefulWidget {
    45.   const GlobalOperateProvider({super.key, required this.child});
    46.  
    47.   final Widget child;
    48.  
    49.   /// 执行全局操作
    50.   static runGlobalOperate({
    51.     required BuildContext? context,
    52.     required GlobalOperate operate,
    53.   }) {
    54.     context
    55.         ?.findAncestorStateOfType<_GlobalOperateProviderState>()
    56.         ?._runGlobalOperate(operate: operate);
    57.   }
    58.  
    59.   /// 获取全局操作类型
    60.   static GlobalOperate? getGlobalOperate({required BuildContext? context}) {
    61.     return context
    62.         ?.findAncestorStateOfType<_GlobalOperateProviderState>()
    63.         ?.globalOperate;
    64.   }
    65.  
    66.   @override
    67.   State createState() => _GlobalOperateProviderState();
    68. }
    69.  
    70. class _GlobalOperateProviderState extends State<GlobalOperateProvider> {
    71.   GlobalOperate globalOperate = GlobalOperate.idle;
    72.  
    73.   /// 执行全局操作
    74.   _runGlobalOperate({required GlobalOperate operate}) {
    75.     // 先重置
    76.     globalOperate = GlobalOperate.idle;
    77.  
    78.     // 再赋值
    79.     globalOperate = operate;
    80.  
    81.     /// 别忘了刷新，如果不刷新，子widget不会执行 didChangeDependencies 方法
    82.     setState(() {});
    83.   }
    84.  
    85.   @override
    86.   Widget build(BuildContext context) {
    87.     return GlobalNotificationWidget(
    88.       globalOperate: globalOperate,
    89.       child: widget.child,
    90.     );
    91.   }
    92. }

    演示效果

    最好执行完全局操作后，将全局操作状态，重置回 空闲，我是拦截器里面，这个在哪重置，大家随意；

    1. /// Dio拦截器
    2. class DioInterceptor extends InterceptorsWrapper {
    3.  
    4.   @override
    5.   void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    6.     
    7.     ... ... 
    8.  
    9.     /// 重置 全局操作状态
    10.     if (EnvConfig.isGlobalNotification) {
    11.       GlobalOperateProvider.runGlobalOperate(
    12.           context: navigatorKey.currentContext, operate: GlobalOperate.idle);
    13.     }
    14.  
    15.     ... ...
    16.    
    17.   }
    18.  
    19. }

    开发环境配置

    我直接创建了三个启动文件；

    测试环境

    1. /// 开发环境 入口函数
    2. void main() => Application.runApplication(
    3.       envTag: EnvTag.develop, // 开发环境
    4.       platform: ApplicationPlatform.app, // 手机应用
    5.       baseUrl: 'https://www.wanandroid.com/', // 域名
    6.       proxyEnable: true, // 是否开启抓包
    7.       caughtAddress: '192.168.1.3:8888', // 抓包工具的代理地址 + 端口
    8.       isGlobalNotification: true, // 是否有全局通知操作，比如切换用户
    9.       /// 异常抛出，会在终端会显示，可帮助开发阶段，快速定位异常所在，
    10.       /// 但会阻断，后续代码执行，建议 非开发阶段 关闭
    11.       throwError: false,
    12.     );

    预发布环境

    1. /// 预发布环境 入口函数
    2. void main() => Application.runApplication(
    3.       envTag: EnvTag.preRelease, // 预发布环境
    4.       platform: ApplicationPlatform.app, // 手机应用
    5.       baseUrl: 'https://www.wanandroid.com/', // 域名
    6.     );

    正式环境

    1. /// 正式环境 入口函数
    2. void main() => Application.runApplication(
    3.       envTag: EnvTag.release, // 正式环境
    4.       platform: ApplicationPlatform.app, // 手机应用
    5.       baseUrl: 'https://www.wanandroid.com/', // 域名
    6.     );

    Application

    1. class Application {
    2.  
    3.   Application.runApplication({
    4.     required EnvTag envTag, // 开发环境
    5.     required String baseUrl, // 域名
    6.     required ApplicationPlatform platform, // 平台
    7.     bool proxyEnable = false, // 是否开启抓包
    8.     String? caughtAddress, // 抓包工具的代理地址 + 端口
    9.     bool isGlobalNotification = false, // 是否有全局通知操作，比如切换用户
    10.     bool throwError = false // 异常抛出，会在终端会显示，可帮助开发阶段，快速定位异常所在，但会阻断，后续代码执行
    11.   }) {
    12.     EnvConfig.envTag = envTag;
    13.     EnvConfig.baseUrl = baseUrl;
    14.     EnvConfig.platform = platform;
    15.     EnvConfig.proxyEnable = proxyEnable;
    16.     EnvConfig.caughtAddress = caughtAddress;
    17.     EnvConfig.isGlobalNotification = isGlobalNotification;
    18.     EnvConfig.throwError = throwError;
    19.  
    20.     /// runZonedGuarded 全局异常监听，实现异常上报
    21.     runZonedGuarded(() {
    22.       /// 确保一些依赖，全部初始化
    23.       WidgetsFlutterBinding.ensureInitialized();
    24.  
    25.       /// 监听全局Widget异常，如果发生，将该Widget替换掉
    26.       ErrorWidget.builder = (FlutterErrorDetails flutterErrorDetails) {
    27.         return Material(
    28.           child: Center(
    29.             child: Text("请联系客服。"),
    30.           ),
    31.         );
    32.       };
    33.  
    34.       // 初始化路由
    35.       Routers.configureRouters();
    36.  
    37.       // 运行App
    38.       runApp(App());
    39.  
    40.     }, (Object error, StackTrace stack) {
    41.       // 使用第三方服务（例如Sentry）上报错误
    42.       // Sentry.captureException(error, stackTrace: stackTrace);
    43.     });
    44.   }
    45.  
    46. }

    网络请求抓包

    在Dio里配置的;

    注意：如果开启了抓包，但没有启动 抓包工具，Dio 会报 连接异常 DioException [connection error]

    1.   /// 代理抓包，测试阶段可能需要
    2.   void proxy() {
    3.     if (EnvConfig.proxyEnable) {
    4.       if (EnvConfig.caughtAddress?.isNotEmpty ?? false) {
    5.         (httpClientAdapter as IOHttpClientAdapter).createHttpClient = () {
    6.           final client = HttpClient();
    7.           client.findProxy = (uri) => 'PROXY ' + EnvConfig.caughtAddress!;
    8.  
    9.           client.badCertificateCallback = (cert, host, port) => true;
    10.           return client;
    11.         };
    12.       }
    13.     }
    14.   }

    演示效果

    如何抓包

    https://juejin.cn/post/7131928652568231966

    https://juejin.cn/post/7035652365826916366

    核心基类

    Model基类

    1. class BaseModel<VM extends PageViewModel> {
    2.  
    3.   VM? vm;
    4.  
    5.   void onDispose() {
    6.     vm = null;
    7.   }
    8. }

    View基类

    1. abstract class BaseStatefulPage<VM extends PageViewModel> extends BaseViewModelStatefulWidget<VM> {
    2.   BaseStatefulPage({super.key});
    3.  
    4.   @override
    5.   BaseStatefulPageState createState();
    6. }
    7.  
    8. abstract class BaseStatefulPageState<T extends BaseStatefulPage, VM extends PageViewModel>
    9.     extends BaseViewModelStatefulWidgetState<T, VM>
    10.     with AutomaticKeepAliveClientMixin {
    11.  
    12.   /// 定义对应的 viewModel
    13.   VM? viewModel;
    14.  
    15.   /// 监听应用生命周期
    16.   AppLifecycleListener? lifecycleListener;
    17.  
    18.   /// 获取应用状态
    19.   AppLifecycleState? get lifecycleState =>
    20.       SchedulerBinding.instance.lifecycleState;
    21.  
    22.   /// 是否打印 监听应用生命周期的 日志
    23.   bool debugPrintLifecycleLog = false;
    24.  
    25.   /// 进行初始化ViewModel相关操作
    26.   @override
    27.   void initState() {
    28.     super.initState();
    29.  
    30.     /// 初始化页面 属性、对象、绑定监听
    31.     initAttribute();
    32.     initObserver();
    33.  
    34.     /// 初始化ViewModel，并同步生命周期
    35.     viewModel = viewBindingViewModel();
    36.  
    37.     /// 调用viewModel的生命周期，比如 初始化 请求网络数据 等
    38.     viewModel?.onCreate();
    39.  
    40.     /// Flutter 低版本 使用 WidgetsBindingObserver，高版本 使用 AppLifecycleListener
    41.     lifecycleListener = AppLifecycleListener(
    42.       // 监听状态回调
    43.       onStateChange: onStateChange,
    44.  
    45.       // 可见，并且可以响应用户操作时的回调
    46.       onResume: onResume,
    47.  
    48.       // 可见，但无法响应用户操作时的回调
    49.       onInactive: onInactive,
    50.  
    51.       // 隐藏时的回调
    52.       onHide: onHide,
    53.  
    54.       // 显示时的回调
    55.       onShow: onShow,
    56.  
    57.       // 暂停时的回调
    58.       onPause: onPause,
    59.  
    60.       // 暂停后恢复时的回调
    61.       onRestart: onRestart,
    62.  
    63.       // 当退出 并将所有视图与引擎分离时的回调（IOS 支持，Android 不支持）
    64.       onDetach: onDetach,
    65.  
    66.       // 在退出程序时，发出询问的回调（IOS、Android 都不支持）
    67.       onExitRequested: onExitRequested,
    68.     );
    69.  
    70.     /// 页面布局完成后的回调函数
    71.     lifecycleListener?.binding.addPostFrameCallback((_) {
    72.       assert(context != null, 'addPostFrameCallback throw Error context');
    73.  
    74.       /// 初始化 需要context 的属性、对象、绑定监听
    75.       initContextAttribute(context);
    76.       initContextObserver(context);
    77.     });
    78.   }
    79.  
    80.   @override
    81.   void didChangeDependencies() {
    82.     assert((){
    83.       debugPrint('BaseStatefulPage.didChangeDependencies --- ${GlobalOperateProvider.getGlobalOperate(context: context)}');
    84.       return true;
    85.     }());
    86.   }
    87.  
    88.   /// 监听状态
    89.   onStateChange(AppLifecycleState state) => mLog('app_state：$state');
    90.  
    91.   /// =============================== 根据应用状态的产生的各种回调 ===============================
    92.  
    93.   /// 可见，并且可以响应用户操作时的回调
    94.   /// 比如从应用后台调度到前台时，在 onShow() 后面 执行
    95.   onResume() => mLog('onResume');
    96.  
    97.   /// 可见，但无法响应用户操作时的回调
    98.   onInactive() => mLog('onInactive');
    99.  
    100.   /// 隐藏时的回调
    101.   onHide() => mLog('onHide');
    102.  
    103.   /// 显示时的回调，从应用后台调度到前台时
    104.   onShow() => mLog('onShow');
    105.  
    106.   /// 暂停时的回调
    107.   onPause() => mLog('onPause');
    108.  
    109.   /// 暂停后恢复时的回调
    110.   onRestart() => mLog('onRestart');
    111.  
    112.   /// 这两个回调，不是所有平台都支持，
    113.  
    114.   /// 当退出 并将所有视图与引擎分离时的回调（IOS 支持，Android 不支持）
    115.   onDetach() => mLog('onDetach');
    116.  
    117.   /// 在退出程序时，发出询问的回调（IOS、Android 都不支持）
    118.   /// 响应 [AppExitResponse.exit] 将继续终止，响应 [AppExitResponse.cancel] 将取消终止。
    119.   Future onExitRequested() async {
    120.     mLog('onExitRequested');
    121.     return AppExitResponse.exit;
    122.   }
    123.  
    124.   /// BaseStatefulPageState的子类，重写 dispose()
    125.   /// 一定要执行父类 dispose()，防止内存泄漏
    126.   @override
    127.   void dispose() {
    128.     /// 销毁顺序
    129.  
    130.     /// 1、Model 销毁其持有的 ViewModel
    131.     if(viewModel?.pageDataModel?.data is BaseModel?) {
    132.       BaseModel? baseModel = viewModel?.pageDataModel?.data as BaseModel?;
    133.       baseModel?.onDispose();
    134.     }
    135.     if(viewModel?.pageDataModel?.data is BasePagingModel?) {
    136.       BasePagingModel? basePagingModel = viewModel?.pageDataModel?.data as 
    137.     BasePagingModel?;
    138.       basePagingModel?.onDispose();
    139.     }
    140.  
    141.     /// 2、ViewModel 销毁其持有的 View
    142.     /// 3、ViewModel 销毁其持有的 Model
    143.     viewModel?.onDispose();
    144.  
    145.     /// 4、View 销毁其持有的 ViewModel
    146.     viewModel = null;
    147.  
    148.     /// 5、销毁监听App生命周期方法
    149.     lifecycleListener?.dispose();
    150.     super.dispose();
    151.   }
    152.  
    153.   /// 是否保持页面状态
    154.   @override
    155.   bool get wantKeepAlive => false;
    156.  
    157.   /// View 持有对应的 ViewModel
    158.   VM viewBindingViewModel();
    159.  
    160.   /// 子类重写，初始化 属性、对象
    161.   /// 这里不是 网络请求操作，而是页面的初始化数据
    162.   /// 网络请求操作，建议在viewModel.onCreate() 中实现
    163.   void initAttribute();
    164.  
    165.   /// 子类重写，初始化 需要 context 的属性、对象
    166.   void initContextAttribute(BuildContext context) {}
    167.  
    168.   /// 子类重写，初始化绑定监听
    169.   void initObserver();
    170.  
    171.   /// 子类重写，初始化需要 context 的绑定监听
    172.   void initContextObserver(BuildContext context) {}
    173.  
    174.   /// 输出日志
    175.   void mLog(String info) {
    176.     if (debugPrintLifecycleLog) {
    177.       assert(() {
    178.         debugPrint('--- $info');
    179.         return true;
    180.       }());
    181.     }
    182.   }
    183.  
    184.   /// 手机应用
    185.   Widget appBuild(BuildContext context) => SizedBox();
    186.  
    187.   /// Web
    188.   Widget webBuild(BuildContext context) => SizedBox();
    189.  
    190.   /// PC应用
    191.   Widget pcBuild(BuildContext context) => SizedBox();
    192.  
    193.   @override
    194.   Widget build(BuildContext context) {
    195.     /// 使用 AutomaticKeepAliveClientMixin 需要 super.build(context);
    196.     ///
    197.     /// 注意：AutomaticKeepAliveClientMixin 只是保存页面状态，并不影响 build 方法执行
    198.     /// 比如 PageVie的 子页面 使用了AutomaticKeepAliveClientMixin 保存状态，
    199.     /// PageView切换子页面时，子页面的build的还是会执行
    200.     if(wantKeepAlive) {
    201.       super.build(context);
    202.     }
    203.  
    204.     /// 和 GlobalNotificationWidget，建立依赖关系
    205.     if(EnvConfig.isGlobalNotification) {
    206.       GlobalNotificationWidget.of(context);
    207.     }
    208.  
    209.     switch (EnvConfig.platform) {
    210.       case ApplicationPlatform.app: {
    211.         if (Platform.isAndroid || Platform.isIOS) {
    212.           // 如果，还想根据当前设备屏幕尺寸细分，
    213.           // 使用MediaQuery，拿到当前设备信息，进一步适配
    214.           return appBuild(context);
    215.         }
    216.       }
    217.       case ApplicationPlatform.web: {
    218.           return webBuild(context);
    219.       }
    220.       case ApplicationPlatform.pc: {
    221.         if(Platform.isWindows || Platform.isMacOS) {
    222.           return pcBuild(context);
    223.         }
    224.       }
    225.     }
    226.     return Center(
    227.       child: Text('当前平台未适配'),
    228.     );
    229.   }
    230.  
    231. }

    ViewModel基类

    1. /// 基类
    2. abstract class BaseViewModel {
    3.  
    4. }
    5.  
    6. /// 页面继承的ViewModel，不直接使用 BaseViewModel，
    7. /// 是因为BaseViewModel基类里代码，还是不要太多为好，扩展创建新的子类就好
    8. abstract class PageViewModel<T extends State> extends BaseViewModel {
    9.  
    10.   /// 定义对应的 view
    11.   BaseStatefulPageState? viewState;
    12.  
    13.   /// 使用 直接拿它
    14.   T get state => viewState as T;
    15.  
    16.   /// 页面数据model
    17.   PageDataModel? pageDataModel;
    18.  
    19.   /// 尽量在onCreate方法中编写初始化逻辑
    20.   void onCreate();
    21.  
    22.   /// 对应的widget被销毁了，销毁相关引用对象，避免内存泄漏
    23.   void onDispose() {
    24.     viewState = null;
    25.     pageDataModel = null;
    26.   }
    27.  
    28.   /// 请求数据
    29.   Future requestData({Map<String, dynamic>? params});
    30.  
    31. }

    分页Model基类

    1. /// 内部 有分页列表集合 的实体需要继承 BasePagingModel
    2. class BasePagingModel<VM extends PageViewModel> {
    3.   int? curPage;
    4.   List? datas;
    5.   int? offset;
    6.   bool? over;
    7.   int? pageCount;
    8.   int? size;
    9.   int? total;
    10.  
    11.   VM? vm;
    12.  
    13.   BasePagingModel({this.curPage, this.datas, this.offset, this.over,
    14.     this.pageCount, this.size, this.total});
    15.  
    16.   void onDispose() {
    17.     vm = null;
    18.   }
    19. }
    20.  
    21. /// 是分页列表 集合子项 实体需要继承 BasePagingItem
    22. class BasePagingItem {}

    分页处理核心类

    1. /// 分页数据相关
    2.  
    3. /// 分页行为：下拉刷新/上拉加载更多
    4. enum PagingBehavior {
    5.   /// 空闲，默认状态
    6.   idle,
    7.  
    8.   /// 加载
    9.   load,
    10.  
    11.   /// 刷新
    12.   refresh;
    13. }
    14.  
    15. /// 分页状态：执行完 下拉刷新/上拉加载更多后，得到的状态
    16. enum PagingState {
    17.   /// 空闲，默认状态
    18.   idle,
    19.  
    20.   /// 加载成功
    21.   loadSuccess,
    22.  
    23.   /// 加载失败
    24.   loadFail,
    25.  
    26.   /// 没有更多数据了
    27.   loadNoData,
    28.  
    29.   /// 正在加载
    30.   curLoading,
    31.  
    32.   /// 刷新成功
    33.   refreshSuccess,
    34.  
    35.   /// 刷新失败
    36.   refreshFail,
    37.  
    38.   /// 正在刷新
    39.   curRefreshing,
    40. }
    41.  
    42. /// 分页数据对象
    43. class PagingDataModel<DM extends BaseChangeNotifier, VM extends PageViewModel> {
    44.   // 当前页码
    45.   int curPage;
    46.  
    47.   // 总共多少页
    48.   int pageCount;
    49.  
    50.   // 总共 数据数量
    51.   int total;
    52.  
    53.   // 当前页 数据数量
    54.   int size;
    55.  
    56.   /// 响应的完整数据
    57.   /// 你可能还需要，响应数据的 其他字段，
    58.   ///
    59.   /// assert((){
    60.   ///    var mListModel = pageDataModel?.data as MessageListModel?; // 转化成对应的Model
    61.   ///    debugPrint('---pageCount：${mListModel?.pageCount}'); // 获取字段
    62.   ///    return true;
    63.   /// }());
    64.   dynamic data;
    65.  
    66.   // 分页参数 字段，一般情况都是固定的，以防万一
    67.   String? curPageField;
    68.  
    69.   // 数据列表
    70.   List<dynamic> listData = [];
    71.  
    72.   // 当前的PageDataModel
    73.   DM? pageDataModel;
    74.  
    75.   // 当前的PageViewModel
    76.   VM? pageViewModel;
    77.  
    78.   PagingBehavior pagingBehavior = PagingBehavior.idle;
    79.  
    80.   PagingState pagingState = PagingState.idle;
    81.  
    82.   PagingDataModel(
    83.       {this.curPage = 0,
    84.       this.pageCount = 0,
    85.       this.total = 0,
    86.       this.size = 0,
    87.       this.data,
    88.       this.curPageField = 'curPage',
    89.       this.pageDataModel}) : listData = [];
    90.  
    91.   /// 这两个方法，由 RefreshLoadWidget 组件调用
    92.  
    93.   /// 加载更多，追加数据
    94.   Future loadListData() async {
    95.     PagingState pagingState = PagingState.curLoading;
    96.     pagingBehavior = PagingBehavior.load;
    97.     Map<String, dynamic>? param = {curPageField!: curPage++};
    98.     PageViewModel? currentPageViewModel = await pageViewModel?.requestData(params: param);
    99.     if(currentPageViewModel?.pageDataModel?.type == NotifierResultType.success) {
    100.       // 没有更多数据了
    101.       if(currentPageViewModel?.pageDataModel?.total == listData.length) {
    102.         pagingState = PagingState.loadNoData;
    103.       } else {
    104.         pagingState = PagingState.loadSuccess;
    105.       }
    106.     } else {
    107.       pagingState = PagingState.loadFail;
    108.     }
    109.     return pagingState;
    110.   }
    111.  
    112.   /// 下拉刷新数据
    113.   Future refreshListData() async {
    114.     PagingState pagingState = PagingState.curRefreshing;
    115.     pagingBehavior = PagingBehavior.refresh;
    116.     curPage = 0;
    117.     Map<String, dynamic>? param = {curPageField!: curPage};
    118.     PageViewModel? currentPageViewModel = await pageViewModel?.requestData(params: param);
    119.     if(currentPageViewModel?.pageDataModel?.type == NotifierResultType.success) {
    120.       pagingState = PagingState.refreshSuccess;
    121.     } else {
    122.       pagingState = PagingState.refreshFail;
    123.     }
    124.     return pagingState;
    125.   }
    126.  
    127. }

    源码地址 

    GitHub - LanSeLianMa/flutter_develop_template: Flutter项目开发模版，开箱即用

    参考文档

     Dio：https://juejin.cn/post/7360227158662807589

    路由：Flutter中封装Fluro路由配置，以及无context跳转与传参 - 掘金

    MVVM：https://juejin.cn/post/7166503123983269901

    API

    玩Android平台的开放 API；

    玩Android 开放API-玩Android - wanandroid.com

  • 相关阅读:
    网络安全的学习方向和路线是怎么样的？
    MyBatis ognl.NoSuchPropertyException 或者 Invalid bound statement (not found)
    外汇天眼：亏亏亏，为什么亏损的总是我？大数据分析报告告诉你答案
    Microsoft Office Word 远程命令执行漏洞(CVE-2022-30190)分析与利用
    SpringCloudSleuth异步线程支持和传递
    Java异常处理
    [附源码]java毕业设计美妆销售系统
    2022杭电多校联赛第三场 题解
    JavaScript -- 01. 基础语法介绍
    47、Dynamic View Synthesis from Dynamic Monocular Video
  • 原文地址：https://blog.csdn.net/Lan_Se_Tian_Ma/article/details/139563305