Flutter MVVM 簡單實踐

隔壁的李叔叔發表於2021-03-13

FlutterMVVM

接著上一篇文章：基於MVVM架構封裝Flutter基礎庫

這篇文章主要使用基礎庫對MVVM做簡單實踐：Demo地址

一、MVVM回顧

Model：資料模型

1、XApi
2、通常來說，Model中儲存了相關業務的資料，負責提取和處理資料，資料來源可以是本地資料庫，也可以來自網路；

View：檢視

1、BaseView
2、View只做和UI相關的工作，不涉及任何業務邏輯，不涉及運算元據，不處理資料；
3、通俗講就是展示給使用者的介面及控制元件，比如Flutter中參與介面展示的Widget；

ViewModel：檢視模型

1、BaseViewModel
2、ViewModel將View和Model進行解耦，並且實現View與Model的互動；
3、簡單講就是所有的業務邏輯都由它負責，而不是將業務邏輯和View都糅合在一起；

Data Binding：繫結器

1、Provider
2、View通過資料繫結來關心ViewModel的資料變化；
3、通過Provider的Consumer/Selector等元件來實現資料繫結；

二、基礎庫MVVM元件介紹

1、BaseView功能說明

通過Consumer實現View和ViewModel繫結，ViewModel資料變化時通知View重新整理；
BaseView配合BaseViewModel使用，進入頁面時通過BaseViewModel.onLoading()方法觸發http請求；
BaseView通過FutureBuilder實現非同步UI更新，從而實現http通用載入錯誤頁，空白頁以及正常顯示頁UI和邏輯；

///@date:  2021/3/1 13:38
///@author:  lixu
///@description:View 基類,配合[BaseViewModel]使用
///封裝http載入錯誤頁，空白頁以及正常顯示頁UI和邏輯，UI可自定義
class BaseView<T extends BaseViewModel> extends StatefulWidget {
    ///載入成功後顯示的頁面
    final Widget child;
    
    ///載入中頁面
    final Widget loadingChild;
    
    ///資料為空的頁面
    final Widget emptyChild;
    
    ///請求失敗顯示的頁面
    final Widget errorChild;

    BaseView({@required this.child, this.loadingChild, 
    this.emptyChild, this.errorChild}) : assert(child != null);

    @override
    _BaseViewState<T> createState() => _BaseViewState<T>();
}

class _BaseViewState<T extends BaseViewModel> extends State<BaseView> 
                                    with AutomaticKeepAliveClientMixin {
    @override
    Widget build(BuildContext context) {
        super.build(context);
        ///資料繫結
        return Consumer<T>(
            child: widget.child,
            builder: (BuildContext context, T viewModel, Widget child) {
                if (viewModel.isSuccess()) {
                    return child;
                } else {
                    ///非同步UI更新
                    return FutureBuilder(
                        ///觸發網路請求：BaseViewModel.onLoading(context)
                        future: viewModel.onLoading(context),
                        builder: (context, snapshot) {
                             if (snapshot.connectionState == 
                                          ConnectionState.done) {
                                if (viewModel.isFail()) {
                                    ///載入失敗
                                    return _getErrorWidget(viewModel);
                                } else if (viewModel.isEmpty()) {
                                    ///資料為空
                                    return _getEmptyWidget(viewModel);
                                } else {
                                    ///載入成功
                                    return child;
                                }
                             } else {
                                ///載入中
                                return _getLoadingWidget();
                             }
                        },
                    );
                }
            },
       );
   }

    ...省略部分程式碼

    @override
    bool get wantKeepAlive => true;
}
複製程式碼

2、BaseViewModel功能說明

進入頁面時，需要http獲取資料後才能顯示UI的場景繼承BaseViewModel類，配合 BaseView使用，實現http載入錯誤頁，空白頁以及正常顯示頁UI和邏輯；

///@date:  2021/3/1 11:09
///@author:  lixu
///@description: ViewModel基類
///進入View頁面時，需要http獲取資料後才能顯示UI的場景繼承[BaseViewModel]類，配合[BaseView]使用
///泛型T：進入頁面時，http獲取資料物件的型別
///1.列表載入(分頁載入)
///2.單個物件載入
abstract class BaseViewModel<T> extends BaseCommonViewModel {

...省略其它程式碼

///介面獲取的是否是列表資料,否則就是單個資料物件
///預設true
bool _isRequestListData;

///資料來源:針對列表請求
List<T> dataList;

///資料來源:針對單個物件請求
T dataBean;

///獲取http請求引數
Map<String, dynamic> getRequestParams();

///獲取http請求url
String getUrl();

///載入資料：進入頁面時觸發該方法
Future onLoading(BuildContext context) async {
    LogUtils.i(getTag(), 'onLoading');
    
    if (isLoading) {
      LogUtils.w(getTag(), 'onLoading() is Loading');
      return;
    }
    
    isLoading = true;
    _refreshedText = '重新整理成功';
    CancelToken cancelToken = CancelToken();
    cancelTokenList.add(cancelToken);
    
    if (_isRequestListData) {
        ///請求列表資料
        await api.requestList<T>(
                getUrl(),
                params: getRequestParams(),
                isShowLoading: false,
                isShowFailToast: isShowFailToast(false),
                cancelToken: cancelToken,
                onSuccess: (List<T> list) {
                    ///請求成功回撥
                    dataList = [];
                    list = list ?? [];
                    
                    ///解析json
                    dataList.addAll(list);
    
                    if (_isPageLoad) {
                        ///list分頁載入
                        if (list.length < _pageSize) {
                            _canLoadMore = false;
                        } else {
                            _canLoadMore = true;
                            _pageNum++;
                        }
                    } else {
                        ///list沒有分頁載入
                        _canLoadMore = false;
                    }
                },
                onError: (HttpErrorBean errorBean) {
                    ///請求失敗回撥
                    _refreshedText = '重新整理失敗';
                    onErrorCallback(errorBean);
                },
                onComplete: () {
                    ///請求完成回撥
                    isLoading = false;
                    cancelTokenList?.remove(cancelToken);
                },
            );    
    } else {
        ///請求單個資料物件
        await api.request<T>(
                getUrl(),
                params: getRequestParams(),
                isShowLoading: false,
                isShowFailToast: isShowFailToast(false),
                cancelToken: cancelToken,
                onSuccess: (T bean) {
                    ///請求成功回撥
                    dataBean = bean;
                },
                onError: (HttpErrorBean errorBean) {
                    ///請求失敗回撥
                    _refreshedText = '重新整理失敗';
                    onErrorCallback(errorBean);
                },
                onComplete: () {
                    ///請求完成回撥
                    isLoading = false;
                    cancelTokenList?.remove(cancelToken);
                },
            );
    }
}
        
      
///請求失敗：重試重新整理頁面
void retryRefresh() {
    if (!isDispose) {
        notifyListeners();
    } else {
        LogUtils.e(getTag(), 'call retryRefresh() had dispose()');
    }
}

///請求是否成功
bool isSuccess() {
    if (_isRequestListData) {
        return dataList != null && dataList.length > 0;
    } else {
        return dataBean != null;
    }
}

///請求是否失敗
bool isFail() {
    if (_isRequestListData) {
        return dataList == null;
    } else {
        return dataBean == null;
    }
}

///請求資料是否為空
bool isEmpty() {
    if (_isRequestListData) {
        return dataList == null || dataList.isEmpty;
    } else {
        return dataBean == null;
    }
}

...省略其它程式碼

}
複製程式碼

3、BaseCommonViewModel功能說明

ViewModel 基類，進入View頁面時，直接顯示UI（不需要請求http獲取資料）的 場景__繼承BaseCommonViewModel類；

///@date:  2021/3/1 11:05
///@author:  lixu
///@description: ViewModel 基類
///進入View頁面時，直接顯示UI（不需要請求http獲取資料）的場景繼承[BaseCommonViewModel]類
abstract class BaseCommonViewModel with ChangeNotifier {
///是否已經呼叫了dispose()方法
bool _isDispose = false;

///是否正在請求中
bool isLoading = false;

///網路請求物件，充當MVVM的Model層
XApi api = XApi();

///獲取tag,用於日誌tag
String getTag();

///儲存請求token，用於頁面關閉時取消請求
List<CancelToken> cancelTokenList = [];

///重新整理頁面
@override
notifyListeners() {
    LogUtils.v(getTag(), 'notifyListeners() isDispose:$_isDispose');
    if (!_isDispose) {
        super.notifyListeners();
    }
}

bool get isDispose => _isDispose;

///頁面關閉時回撥該方式，釋放資源
///使用ChangeNotifierProvider的預設構造方法來注入ViewModel，才能保證資源能正確釋放
@override
void dispose() {
    super.dispose();
    ///頁面關閉取消請求
    api?.cancelList(cancelTokenList);
    _isDispose = true;
    LogUtils.v(getTag(), 'dispose()');
}

}
複製程式碼

三、MVVM實踐

1、Model（UserDetailBean和XApi）

///@date:  2021/3/2 11:20
///@author:  lixu
///@description: 使用者詳情物件
class UserDetailBean {
    ///頭像
    String icon;
    
    ///使用者id
    String userId;
    
    ///使用者名稱
    String name;
    
    UserDetailBean.fromJsonMap(Map<String, dynamic> map)
          : userId = map["userId"]?.toString(),
    name = map["name"],
    icon = map["icon"];
}
複製程式碼

2、View（UserPage）

///@date:  2021/3/11
///@author:  lixu
///@description:使用者列表頁面
///進入頁面時呼叫介面(使用者列表)獲取資料成功後，才能顯示UI
class UserPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('使用者列表頁面(MVVM)')),
            ///使用ChangeNotifierProvider的預設構造方法來注入ViewModel，
            ///保證資源能正確釋放
            body: ChangeNotifierProvider(
                create: (_) {
                    return UserListViewModel();
                },    
                child: BaseView<UserListViewModel>(
                    ///UserListView為請求成功後顯示的View（使用者列表）
                    child: UserListView(),
                    ///自定義請求失敗的View
                    ///如果不設定，會使用全域性失敗頁面(IResConfig中配置的資源)
                    errorChild: Center(
                          child: Text(
                            '這是自定義請求失敗的頁面：\n請求失敗，點選重試',
                            style: TextStyle(color: Colors.red, 
                                             fontSize: 20),
                            textAlign: TextAlign.center,
                          ),
                    ),
                 ),
           ),
        );
    }
}
複製程式碼

3、ViewModel（UserListViewModel）

///@date:  2021/3/2 11:26
///@author:  lixu
///@description: 使用者列表viewModel
///泛型[UserDetailBean]：進入頁面時，http獲取資料物件的型別
class UserListViewModel extends BaseViewModel<UserDetailBean> {

    UserListViewModel() : super(isPageLoad: false);

    ///獲取http請求引數
    @override
    Map<String, dynamic> getRequestParams() {
        return {
            'userId': loginInfo.userBean?.userId,
            'token': loginInfo.token,
        };
    }
    
    @override
    String getTag() {
        return 'UserListViewModel';
    }
    
    ///獲取http請求url
    @override
    String getUrl() {
        return HttpUrls.userListUrl;
    }

}
複製程式碼

四、總結

通過使用：BaseView+BaseViewModel+Provider+XApi 對MVVM進行了簡單的實現，更多功能可以下載demo體驗

MVVM架構在Flutter中的簡單實踐
2019-03-09
MVVM架構Flutter
Flutter mvvm簡單實戰
2021-03-19
FlutterMVVM
實現一個簡單的MVVM（Compile）
2019-06-06
MVVMCompile
使用 Proxy 實現簡單的 MVVM 模型
2019-02-16
MVVM模型
Flutter 中的 MVVM 實現
2021-08-06
FlutterMVVM
avalon框架,簡單的MVVM
2020-04-05
框架MVVM
mvvm-simple雙向繫結簡單實現
2021-09-09
MVVM
試著用Proxy 實現一個簡單mvvm
2018-07-03
MVVM
Proxy實現vue MVVM實踐
2018-11-29
VueMVVM
FaaS的簡單實踐
2018-12-17
Flutter實現簡單爆炸效果
2021-07-05
Flutter
three.js簡單實踐
2024-03-06
JS
Swift-MVVM 簡單演練(一)
2019-03-04
SwiftMVVM
Swift-MVVM 簡單演練(三)
2019-02-07
SwiftMVVM
擼一個簡單的MVVM例子
2018-06-27
MVVM
10分鐘瞭解MVVM，實現簡易MVVM
2023-02-17
MVVM
基於ES5`defineProperty` 實現簡單的 Mvvm框架
2019-02-17
MVVM框架
簡單實現 VUE 中 MVVM – step4 – 優化Watcher實現
2018-04-13
VueMVVM優化
Flutter MVVM重構Flutter Mall
2020-05-22
FlutterMVVM
MVVM 最佳解讀和實踐
2018-06-22
MVVM
Flutter實踐
2018-12-17
Flutter
簡陋版 MVVM 原理實現
2020-11-19
MVVM
Model-based learning 簡單實踐
2022-06-09
Dubbo入門(2) – 簡單實踐
2019-03-04
Dubbo入門(2) - 簡單實踐
2018-05-18
簡單專案實戰flutter（功能篇）
2019-04-15
Flutter
【C#入門超簡單】簡單的專案實踐
2024-06-22
C#
Flutter | 超實用簡單選單彈出框 PopupMenuButton
2019-08-05
Flutter
從零到一實現類vue2.*的簡單MVVM框架
2019-02-02
VueMVVM框架
基於vue實現一個簡單的MVVM框架（原始碼分析）
2018-08-04
VueMVVM框架原始碼
Flutter 版知乎日報簡單實現
2019-09-15
Flutter
簡單專案實戰flutter（佈局篇）
2019-04-10
Flutter
簡單實踐搭建 nginx 負載均衡
2020-06-26
Nginx負載
Flutter 最佳實踐
2021-07-19
Flutter
【Flutter 實戰】簡約而不簡單的計算器
2020-06-30
Flutter
簡單實踐實現 MySQL 主從複製
2020-07-01
MySql
Swift + RxSwift MVVM 模組化專案實踐
2019-04-14
SwiftMVVM
基於Vue的簡易MVVM實現
2019-05-12
VueMVVM