場景說明

動圖展示

two_buffer

功能簡介

? 一個常見的"評價列表頁"，點擊"評價列表頁"中的任意一項跳轉(zhuǎn)進入"評價詳情頁"。在"評價詳情頁"我們可以看到該評論完整的評價內(nèi)容和評價大圖，同時"評價列表頁"和"評價詳情頁"都帶有分享和點贊的功能。

MVC架構(gòu)

架構(gòu)視圖

two_buffer

工程結(jié)構(gòu)

two_buffer

• 外層

  main.dart入口函數(shù)調(diào)起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背后的數(shù)據(jù)封裝

搭建步驟

以評論中的點贊操作為例

two_buffer

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

• 箭頭處的Con().praise1方法被View的onTap事件觸發(fā),是非常常見的一種從View到Control建立連接的調(diào)用方式

two_buffer

two_buffer

• Control與View建立連接的方式一般是將Control與State進行綁定，比如在Control進行初始化的時候傳入，使得Control與每個頁面的View變得一一對應。這里只是簡單的把當前的state通過方法參數(shù)傳入Control，接下去看Control類中praise2方法的實現(xiàn).

two_buffer

• 在Control中調(diào)用State的setState方法起到一個當Model參數(shù)改變，View界面能夠主動refresh的效果。

two_buffer

two_buffer

• 可以直接通過Control類訪問對應的Model,然后在Model 中做相應的數(shù)據(jù)上的處理，這樣View與Model就建立了連接

two_buffer

two_buffer

• 紅色箭頭處是一種非常普通的Control訪問Model數(shù)據(jù)的方式，使得Control與Model建立連接

two_buffer

MVP架構(gòu)

架構(gòu)視圖

two_buffer

工程結(jié)構(gòu)

two_buffer

• 外層

  同上

• widgets

  同上

• screens

  同上

• mvp

? 以"評價列表頁”為例，comment_list.dart實現(xiàn)了comment_list_iview.dart中的接口(如 onZanValueUpdate方法)而comment_list_presenter.dart實現(xiàn)了requestZan等異步方法。

• model

  同上

搭建步驟

以評論中的點贊操作為例

two_buffer

• 在ListScreen中創(chuàng)建對應的Presenter對象同時發(fā)起請求列表數(shù)據(jù)的網(wǎng)絡請求，這樣View和Presenter就建立了連接。

two_buffer

two_buffer

• 在CommentListPresenter中發(fā)起異步請求，這里用了assets下的資源文件讀取做了應答數(shù)據(jù)的模擬，在請求成功后通過View之前實現(xiàn)的接口中的onListViewUpdate方法將結(jié)果返回給View進行渲染。

two_buffer

two_buffer

• 在CommentListPresenter中還有一個成員變量是Model，在這里Presenter通過它對Model數(shù)據(jù)進行填充和更新的操作。

two_buffer

Redux架構(gòu)

架構(gòu)視圖

two_buffer

工程結(jié)構(gòu)

two_buffer

• 外層

  同上

• actions

  定義了各種操作類型，可以認為是一個狀態(tài)變更的代號：PraiseAction(點贊操作)，ShareAction(分享操作)，F(xiàn)etchListAction(取列表數(shù)據(jù))等

• screens

  同上

• reducer

  actions包下定義了狀態(tài)變更的代號，而reducer里面就是描述了具體的狀態(tài)是如何進行變更的，一個reducer通常對應一個或多個action。

• middleware

  middleware是在action觸發(fā)后且reducer到達前被執(zhí)行，這里主要是為了插入一個請求評價列表數(shù)據(jù)的異步方法。

• model

  比之前多了一個app_state.dart,它是Store所存儲的狀態(tài)描述。

搭建步驟

以評論中的點贊操作為例

two_buffer

• listReducer內(nèi)包含了三個action，分別是點贊、分享、數(shù)據(jù)填充，來操作app_state中的那份列表數(shù)據(jù)

two_buffer

two_buffer

• 在App的入口的地方，也就是最頂層的地方，創(chuàng)建了一個Store對象。這里的Store構(gòu)造函數(shù)包含了3個參數(shù)，reducer，state狀態(tài)初始化和用來處理異步請求的thunkMiddleWare。

two_buffer

two_buffer

• 通過StoreConnector可以去Store中取得相應的數(shù)據(jù)，做類型轉(zhuǎn)換，最后bulider出一個View。

two_buffer

two_buffer

• 通過StoreProvider的dispatch操作，途經(jīng)Reducer,Store,最后反應在View上（點贊數(shù)+1）

two_buffer

總結(jié)

1. 在多界面互動的場景下(比如"評價詳情頁"通過手動點贊，使得該評論的點贊數(shù)增加1，那么"評價列表頁"相應的這條數(shù)據(jù)的點贊數(shù)也要增加1)，Reudx的狀態(tài)管理有天然的優(yōu)勢，而且Redux中的distinct屬性也支持按條件的局部數(shù)據(jù)刷新。
2. 在單獨界面的場景下，推薦MVP，它的上手速度會比Redux快的多。

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

image