Flutter Provider狀態(tài)管理---MVVM架構(gòu)實戰(zhàn)

文章系列

Flutter Provider狀態(tài)管理---介紹、類圖分析、基本使用

Flutter Provider狀態(tài)管理---八種提供者使用分析

Flutter Provider狀態(tài)管理---四種消費者使用分析

Flutter Provider狀態(tài)管理---MVVM架構(gòu)實戰(zhàn)

視頻系列

Flutter Provider狀態(tài)管理---介紹、類圖分析、基本使用

Flutter Provider狀態(tài)管理---八種提供者使用分析

Flutter Provider狀態(tài)管理---四種消費者使用分析

Flutter Provider狀態(tài)管理---MVVM架構(gòu)實戰(zhàn)

源碼倉庫地址

github倉庫地址

MVVM介紹

MVVM架構(gòu)分為M(Model)、V(View)、VM(ViewModel)三個部分，他們分別處理自己的分工，在View和Model之間使用ViewModel作為中介者，使View和Model不受業(yè)務(wù)邏輯影響。

Model: 模型層，處理Api數(shù)據(jù)、模型相關(guān)業(yè)務(wù)

View: 視圖層，UI呈現(xiàn)、使用者互動等。

ViewModel: 視圖模型，處理邏輯、將數(shù)據(jù)綁定給View展示。

MVVM運行原理

當(dāng)界面需要展示數(shù)據(jù)時，View跟ViewModel綁定，ViewModel向Model取得數(shù)據(jù)后，在ViewModel處理對應(yīng)的業(yè)務(wù)邏輯，然后將數(shù)據(jù)處理，最后通過View更新并展示。

MVVM優(yōu)點

  • 易于變更需求，降低耦合
  • 權(quán)責(zé)分工明確
  • 方便測試

MVVM缺點

  • 文件數(shù)量增加
  • bug定位較為不易
  • 數(shù)據(jù)綁定消耗資源

MVVM實戰(zhàn)

下面這個項目實戰(zhàn)是用Provider和MVVM搭建的架構(gòu)，是一個笑話段子列表。

它包含了5主要類：

  • Service: 網(wǎng)絡(luò)請求類
  • Model: 主要負(fù)責(zé)轉(zhuǎn)換模型
  • View: 主要負(fù)責(zé)呈現(xiàn)UI，通過ViewModel獲取數(shù)據(jù)并展示
  • Widgets: 單獨的UI模塊分離
  • ViewModel: 處理業(yè)務(wù)邏輯，將數(shù)據(jù)綁定給View展示

定義模型

將網(wǎng)絡(luò)請求回來的數(shù)據(jù)轉(zhuǎn)換為對應(yīng)的模型

import 'dart:convert';

JokeModel jokeModelFromJson(String str) => JokeModel.fromJson(json.decode(str));

String jokeModelToJson(JokeModel data) => json.encode(data.toJson());

class JokeModel {
  JokeModel({
    this.data,
  });

  final List<Joke>? data;

  factory JokeModel.fromJson(Map<String, dynamic> json) => JokeModel(
    data: List<Joke>.from(json["data"].map((x) => Joke.fromJson(x))),
  );

  Map<String, dynamic> toJson() => {
    "data": List<dynamic>.from(data!.map((x) => x.toJson())),
  };
}

class Joke {
  Joke({
    this.content,
    this.hashId,
    this.unixtime,
    this.updatetime,
  });

  final String? content;
  final String? hashId;
  final int? unixtime;
  final String? updatetime;

  factory Joke.fromJson(Map<String, dynamic> json) => Joke(
    content: json["content"],
    hashId: json["hashId"],
    unixtime: json["unixtime"],
    updatetime: json["updatetime"],
  );

  Map<String, dynamic> toJson() => {
    "content": content,
    "hashId": hashId,
    "unixtime": unixtime,
    "updatetime": updatetime,
  };
}

定義網(wǎng)絡(luò)請求類

網(wǎng)絡(luò)請求用到第三方網(wǎng)路請求庫Dio ^4.0.0，將請求回來的數(shù)據(jù)轉(zhuǎn)換為模型，并更新ViewModel數(shù)據(jù)。

import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter_provider_example/provider_mvvm_example/model/joke_model.dart';
import 'package:flutter_provider_example/provider_mvvm_example/view_model/joke_view_model.dart';

class JokeService {
  static Future<void> getJokes(JokeViewModel jokeViewModel) async {

    var response = await Dio().get("http://v.juhe.cn/joke/content/text.php?page=1&pagesize=20&key=03303e4d34effe095cf6a4257474cda9");
    if (response.statusCode == 200) {
      // 轉(zhuǎn)換模型
      JokeModel jokeModel = jokeModelFromJson(json.encode(response.data["result"]));
      // 更新數(shù)據(jù)
      jokeViewModel.setJokeList(jokeModel);
    }
  }
}

定義ViewModel

這個ViewModel主要負(fù)責(zé)把請求回來的數(shù)據(jù)進(jìn)行處理，并通知View層更新數(shù)據(jù)

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_mvvm_example/model/joke_model.dart';

class JokeViewModel with ChangeNotifier {

  List<Joke>? _jokeList = [];

  late Joke _joke;

  bool loading = true;

  setJokeList(JokeModel jokeModel) {
    _jokeList = [];
    _jokeList = jokeModel.data;
    loading = false;
    notifyListeners();
  }

  setJoke(Joke joke) {
    _joke = joke;
  }

  List<Joke>? get jokeList => _jokeList;

  Joke get joke => _joke;
}

定義View

我們在頁面剛進(jìn)入時進(jìn)行初始化，然后通過Provider的Consumer來進(jìn)行監(jiān)聽狀態(tài)的變化。

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_mvvm_example/service/joke_service.dart';
import 'package:flutter_provider_example/provider_mvvm_example/view_model/joke_view_model.dart';
import 'package:flutter_provider_example/provider_mvvm_example/widgets/joke_item.dart';
import 'package:provider/provider.dart';

class JokeView extends StatefulWidget {
  @override
  _JokeViewState createState() => _JokeViewState();
}

class _JokeViewState extends State<JokeView> {
  @override
  void initState() {

    // 獲取接口數(shù)據(jù)
    JokeService.getJokes(Provider.of<JokeViewModel>(context, listen: false));

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Provider + MVVM"),
      ),
      body: Consumer<JokeViewModel>(
        builder: (_, jokeViewModel, child) {

          JokeViewModel _jokeViewModel = jokeViewModel;


          if (jokeViewModel.loading) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }

          return ListView.separated(
            itemBuilder: (_, index) {
              _jokeViewModel.setJoke(_jokeViewModel.jokeList![index]);

              return JokeItem(jokeViewModel: _jokeViewModel);
            },
            itemCount: _jokeViewModel.jokeList?.length ?? 0,
            separatorBuilder: (_, index) {
              return Divider(
                height: 1,
              );
            },
          );

        },
      ),
    );
  }
}

定義Widgets

把需要單獨抽離的UI放在widgets中，并把ViewModel傳入進(jìn)來。

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_mvvm_example/model/joke_model.dart';
import 'package:flutter_provider_example/provider_mvvm_example/view_model/joke_view_model.dart';

class JokeItem extends StatelessWidget {

  JokeItem({
    Key? key,
    this.jokeViewModel
  }) : super(key: key);

  final JokeViewModel? jokeViewModel;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(
        left: 15,
        right: 15,
        top: 10,
        bottom: 10
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Text("${jokeViewModel?.joke?.content ?? ""}",
            style: TextStyle(
              color: Colors.black87,
              letterSpacing: 1.3,
              wordSpacing: 2
            ),
          ),
          SizedBox(height: 5,),
          Text("${jokeViewModel?.joke?.updatetime ?? "--"}")
        ],
      ),
    );
  }
}

引用View

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_mvvm_example/view/joke_view.dart';

class ProviderMvvmExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return JokeView();
  }
}

應(yīng)用程序入口設(shè)置

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_mvvm_example/provider_mvvm_example.dart';
import 'package:flutter_provider_example/provider_mvvm_example/view_model/joke_view_model.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => JokeViewModel(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: ProviderMvvmExample(),
      ),
    );
  }
}

運行結(jié)果

[圖片上傳失敗...(image-63254f-1633573555937)]

總結(jié)

以上就是一個很簡單的列表功能MVVM示例，在實際的情況下也不見得這是最好的方式，MVVM還有很多變種寫法，但核心是一樣的。

最后說一句，架構(gòu)只是輔助而已，世界沒有最好的架構(gòu)。與其討論這些，還不如想想這些架構(gòu)為什么會出現(xiàn)？它的前因后果又是什么？在什么情況下要使用哪種架構(gòu)？

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容