場(chǎng)景說(shuō)明
動(dòng)圖展示
功能簡(jiǎn)介
? 一個(gè)常見(jiàn)的"評(píng)價(jià)列表頁(yè)"，點(diǎn)擊"評(píng)價(jià)列表頁(yè)"中的任意一項(xiàng)跳轉(zhuǎn)進(jìn)入"評(píng)價(jià)詳情頁(yè)"。在"評(píng)價(jià)詳情頁(yè)"我們可以看到該評(píng)論完整的評(píng)價(jià)內(nèi)容和評(píng)價(jià)大圖，同時(shí)"評(píng)價(jià)列表頁(yè)"和"評(píng)價(jià)詳情頁(yè)"都帶有分享和點(diǎn)贊的功能。
MVC架構(gòu)
架構(gòu)視圖
工程結(jié)構(gòu)
-
外層
main.dart入口函數(shù)調(diào)起CommentApp.dart這個(gè)App的工程入口
-
widgets
comment_list_item.dart和comment_widget_pub.dart是封裝的兩個(gè)視圖組件,一個(gè)是列表的每一個(gè)item的樣式，另一個(gè)是"評(píng)價(jià)詳情頁(yè)"和"評(píng)價(jià)列表頁(yè)"的底部操作欄（點(diǎn)贊，分享）樣式封裝
-
screens
comment_detail.dart和comment_list.dart對(duì)應(yīng)我們的兩個(gè)頁(yè)面"評(píng)價(jià)詳情頁(yè)"和"評(píng)價(jià)列表頁(yè)"
-
mvc
MVC模式中的Control類(lèi)和Model類(lèi)
-
model
comment_item_model.dart對(duì)應(yīng)的是評(píng)價(jià)列表頁(yè)每一個(gè)item背后的數(shù)據(jù)封裝
搭建步驟
以評(píng)論中的點(diǎn)贊操作為例
columnControl是comment_widget_pub.dart里面的一個(gè)方法，封裝了一個(gè)底部操作欄的視圖，包含了"點(diǎn)贊"和"分享"的功能。
箭頭處的Con().praise1方法被View的onTap事件觸發(fā),是非常常見(jiàn)的一種從View到Control建立連接的調(diào)用方式
- Control與View建立連接的方式一般是將Control與State進(jìn)行綁定，比如在Control進(jìn)行初始化的時(shí)候傳入，使得Control與每個(gè)頁(yè)面的View變得一一對(duì)應(yīng)。這里只是簡(jiǎn)單的把當(dāng)前的state通過(guò)方法參數(shù)傳入Control，接下去看Control類(lèi)中praise2方法的實(shí)現(xiàn).
- 在Control中調(diào)用State的setState方法起到一個(gè)當(dāng)Model參數(shù)改變，View界面能夠主動(dòng)refresh的效果。
- 可以直接通過(guò)Control類(lèi)訪問(wèn)對(duì)應(yīng)的Model,然后在Model 中做相應(yīng)的數(shù)據(jù)上的處理，這樣View與Model就建立了連接
- 紅色箭頭處是一種非常普通的Control訪問(wèn)Model數(shù)據(jù)的方式，使得Control與Model建立連接
MVP架構(gòu)
架構(gòu)視圖
工程結(jié)構(gòu)
-
外層
同上
-
widgets
同上
-
screens
同上
mvp
? 以"評(píng)價(jià)列表頁(yè)”為例，comment_list.dart實(shí)現(xiàn)了comment_list_iview.dart中的接口(如 onZanValueUpdate方法)而comment_list_presenter.dart實(shí)現(xiàn)了requestZan等異步方法。
-
model
同上
搭建步驟
以評(píng)論中的點(diǎn)贊操作為例
- 在ListScreen中創(chuàng)建對(duì)應(yīng)的Presenter對(duì)象同時(shí)發(fā)起請(qǐng)求列表數(shù)據(jù)的網(wǎng)絡(luò)請(qǐng)求，這樣View和Presenter就建立了連接。
- 在CommentListPresenter中發(fā)起異步請(qǐng)求，這里用了assets下的資源文件讀取做了應(yīng)答數(shù)據(jù)的模擬，在請(qǐng)求成功后通過(guò)View之前實(shí)現(xiàn)的接口中的onListViewUpdate方法將結(jié)果返回給View進(jìn)行渲染。
- 在CommentListPresenter中還有一個(gè)成員變量是Model，在這里Presenter通過(guò)它對(duì)Model數(shù)據(jù)進(jìn)行填充和更新的操作。
Redux架構(gòu)
架構(gòu)視圖
工程結(jié)構(gòu)
-
外層
同上
-
actions
定義了各種操作類(lèi)型，可以認(rèn)為是一個(gè)狀態(tài)變更的代號(hào)：PraiseAction(點(diǎn)贊操作)，ShareAction(分享操作)，F(xiàn)etchListAction(取列表數(shù)據(jù))等
-
screens
同上
-
reducer
actions包下定義了狀態(tài)變更的代號(hào)，而reducer里面就是描述了具體的狀態(tài)是如何進(jìn)行變更的，一個(gè)reducer通常對(duì)應(yīng)一個(gè)或多個(gè)action。
-
middleware
middleware是在action觸發(fā)后且reducer到達(dá)前被執(zhí)行，這里主要是為了插入一個(gè)請(qǐng)求評(píng)價(jià)列表數(shù)據(jù)的異步方法。
-
model
比之前多了一個(gè)app_state.dart,它是Store所存儲(chǔ)的狀態(tài)描述。
搭建步驟
以評(píng)論中的點(diǎn)贊操作為例
- listReducer內(nèi)包含了三個(gè)action，分別是點(diǎn)贊、分享、數(shù)據(jù)填充，來(lái)操作app_state中的那份列表數(shù)據(jù)
- 在App的入口的地方，也就是最頂層的地方，創(chuàng)建了一個(gè)Store對(duì)象。這里的Store構(gòu)造函數(shù)包含了3個(gè)參數(shù)，reducer，state狀態(tài)初始化和用來(lái)處理異步請(qǐng)求的thunkMiddleWare。
- 通過(guò)StoreConnector可以去Store中取得相應(yīng)的數(shù)據(jù)，做類(lèi)型轉(zhuǎn)換，最后bulider出一個(gè)View。
- 通過(guò)StoreProvider的dispatch操作，途經(jīng)Reducer,Store,最后反應(yīng)在View上（點(diǎn)贊數(shù)+1）
總結(jié)
- 在多界面互動(dòng)的場(chǎng)景下(比如"評(píng)價(jià)詳情頁(yè)"通過(guò)手動(dòng)點(diǎn)贊，使得該評(píng)論的點(diǎn)贊數(shù)增加1，那么"評(píng)價(jià)列表頁(yè)"相應(yīng)的這條數(shù)據(jù)的點(diǎn)贊數(shù)也要增加1)，Reudx的狀態(tài)管理有天然的優(yōu)勢(shì)，而且Redux中的distinct屬性也支持按條件的局部數(shù)據(jù)刷新。
- 在單獨(dú)界面的場(chǎng)景下，推薦MVP，它的上手速度會(huì)比Redux快的多。
關(guān)注『Flutter編程指南』微信公眾號(hào)，公眾號(hào)消息界面回復(fù)『widget』『dart』『存儲(chǔ)』『插件』等獲取更多精準(zhǔn)信息，也可回復(fù)『三種架構(gòu)』獲取本篇三種架構(gòu)相關(guān)的demo源碼。
