![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)，Reudx的狀態管理有天然的優勢，而且Redux中的distinct屬性也支援按條件的區域性資料重新整理。
- 在單獨介面的場景下，推薦MVP，它的上手速度會比Redux快的多。
關注『Flutter程式設計指南』微信公眾號，公眾號訊息介面回覆『widget』『dart』『儲存』『外掛』等獲取更多精準資訊，也可回覆『三種架構』獲取本篇三種架構相關的demo原始碼。
