三種架構在Flutter中的嘗試

![TOC]

場景說明

動圖展現

功能簡介

​ 一個常見的"評價列表頁"，點擊"評價列表頁"中的任意一項跳轉進入"評價詳情頁"。在"評價詳情頁"咱們能夠看到該評論完整的評價內容和評價大圖，同時"評價列表頁"和"評價詳情頁"都帶有分享和點讚的功能。

MVC架構

架構視圖

工程結構

• 外層

  main.dart入口函數調起CommentApp.dart這個App的工程入口

• widgets

  comment_list_item.dart和comment_widget_pub.dart是封裝的兩個視圖組件,一個是列表的每個item的樣式，另外一個是"評價詳情頁"和"評價列表頁"的底部操做欄（點贊，分享）樣式封裝

• screens

  comment_detail.dart和comment_list.dart對應咱們的兩個頁面"評價詳情頁"和"評價列表頁"

• mvc

  MVC模式中的Control類和Model類

• model

  comment_item_model.dart對應的是評價列表頁每個item背後的數據封裝

搭建步驟

以評論中的點贊操做爲例

• columnControl是comment_widget_pub.dart裏面的一個方法，封裝了一個底部操做欄的視圖，包含了"點贊"和"分享"的功能。

• 箭頭處的Con().praise1方法被View的onTap事件觸發,是很是常見的一種從View到Control創建鏈接的調用方式

---

• Control與View創建鏈接的方式通常是將Control與State進行綁定，好比在Control進行初始化的時候傳入，使得Control與每一個頁面的View變得一一對應。這裏只是簡單的把當前的state經過方法參數傳入Control，接下去看Control類中praise2方法的實現.

• 在Control中調用State的setState方法起到一個當Model參數改變，View界面可以主動refresh的效果。

---

• 能夠直接經過Control類訪問對應的Model,而後在Model 中作相應的數據上的處理，這樣View與Model就創建了鏈接

---

• 紅色箭頭處是一種很是普通的Control訪問Model數據的方式，使得Control與Model創建鏈接

MVP架構

架構視圖

工程結構

• 外層

  同上

• widgets

  同上

• screens

  同上

• mvp

​ 以"評價列表頁」爲例，comment_list.dart實現了comment_list_iview.dart中的接口(如 onZanValueUpdate方法)而comment_list_presenter.dart實現了requestZan等異步方法。

• model

  同上

搭建步驟

以評論中的點贊操做爲例

• 在ListScreen中建立對應的Presenter對象同時發起請求列表數據的網絡請求，這樣View和Presenter就創建了鏈接。

---

• 在CommentListPresenter中發起異步請求，這裏用了assets下的資源文件讀取作了應答數據的模擬，在請求成功後經過View以前實現的接口中的onListViewUpdate方法將結果返回給View進行渲染。

---

• 在CommentListPresenter中還有一個成員變量是Model，在這裏Presenter經過它對Model數據進行填充和更新的操做。

Redux架構

架構視圖

工程結構

• 外層

  同上

• actions

  定義了各類操做類型，能夠認爲是一個狀態變動的代號：PraiseAction(點贊操做)，ShareAction(分享操做)，FetchListAction(取列表數據)等

• screens

  同上

• reducer

  actions包下定義了狀態變動的代號，而reducer裏面就是描述了具體的狀態是如何進行變動的，一個reducer一般對應一個或多個action。

• middleware

  middleware是在action觸發後且reducer到達前被執行，這裏主要是爲了插入一個請求評價列表數據的異步方法。

• model

  比以前多了一個app_state.dart,它是Store所存儲的狀態描述。

搭建步驟

以評論中的點贊操做爲例

• listReducer內包含了三個action，分別是點贊、分享、數據填充，來操做app_state中的那份列表數據

---

• 在App的入口的地方，也就是最頂層的地方，建立了一個Store對象。這裏的Store構造函數包含了3個參數，reducer，state狀態初始化和用來處理異步請求的thunkMiddleWare。

---

• 經過StoreConnector能夠去Store中取得相應的數據，作類型轉換，最後bulider出一個View。

---

• 經過StoreProvider的dispatch操做，途經Reducer,Store,最後反應在View上（點贊數+1）

總結

1. 在多界面互動的場景下(好比"評價詳情頁"經過手動點贊，使得該評論的點贊數增長1，那麼"評價列表頁"相應的這條數據的點贊數也要增長1)，Reudx的狀態管理有自然的優點，並且Redux中的distinct屬性也支持按條件的局部數據刷新。
2. 在單獨界面的場景下，推薦MVP，它的上手速度會比Redux快的多。

關注『Flutter編程指南』微信公衆號，公衆號消息界面回覆『widget』『dart』『存儲』『插件』等獲取更多精準信息，也可回覆『三種架構』獲取本篇三種架構相關的demo源碼。