七分設計感的純Flutter項目(Mung三部曲)

React版Mung

React-Native版Mung

Flutter版Mung

Mung-Flutter

項目位址

1. Mung-Flutter：是一個基于Flutter編寫，使用豆瓣開源API開發的一個項目。

2. 功能概述

• 啟動頁：添加了啟動頁主要是讓最開始進入時不至于顯示白屏。
• 資料儲存 ：支援斷網加載緩存資料。
• 主題換膚 ：現在隻支援切換主題顔色，本項目沒幾張圖檔。
• 檢視電影詳情 ：支援檢視電影詳情包括評論。
• 一鍵搜尋： 支援标簽和語句查找相關的電影。
• 檢視劇照: 支援縮放圖檔。

3.1 動态示範(Android版)

3.2 運作結果圖

4. 使用到的架構

• flutter_swiper ：Banner欄圖檔輪播的效果。
• rxdart ：和Rxjava、RxJs、RxSwift差不多，這裡主要用它的BehaviorSubject配合Bloc模式實作狀态管理。
• shared_preferences ：簡單的資料儲存，比較細緻的資料存儲如清單等還是建議使用資料庫。
• dio ：實作網絡請求，一個非常不錯的三方網絡包，功能非常多，如果剛入門或者項目比較急建議使用這個。
• flutter_spinkit : 加載時顯示的加載元件，挺不錯，建議看下。
• photo_view： 圖檔縮放元件，因為安卓裡的photoview正好選了，使用了一個簡單的功能，暫時沒發現問題。

5. 項目全局狀态管理

現在據我了解的比較成熟的狀态管理有。

• 1. InheritedWidget(自帶的其他三方好像都是基于它開發，隻是封裝了下，更加友善)
• 1. scoped_model： 不錯。
• 1. redux和前端的redux是一個意思，但我寫過demo用過，個人愚見：差遠了。
• 1. Bloc：(Business Logic Component)paolo soares 和 cong hui 在2018年Google dartconf上提出的,它其實是一個模式InheritedWidget+stream配合使用。

本項目使用的就是Bloc。

6. 思考

這個開發的第一個flutter，都有這個項目來說該用的主流架構都恰到好處的用了，因為項目太小，适合入門和快速開發。對于flutter個人感覺。

• 1. 上個月看了一個消息Flutter團隊好像在今年不會推出熱更新功能，好像是基于安全和可實作性考慮，這裡要說下flutter編譯模式： 開發階段使用的是 Kernel Snapshot 模式編譯，生産模式使用AOT。
• 1. flutter上月好像推出了web端和桌面的适配，這個應該對flutter發展有很大幫助。
• 1. 我之前一年多一直使用React-Native開發項目，感覺Flutter的元件比RN多，而且多很多，元件相容性更好，而且更精緻，但是嵌套的模式真心醜，而且巨亂，我開發時把元件拆分成多個函數這樣會讓界面清新一點。
• 1. 狀态管理，暫時還沒有一個絕對好的狀态管理功能，現在有些項目使用bloc或者bloc+redux，但個人認為不久的将來會有一個好的狀态管理功能占據絕對的位址，想RN的redux、mobx一樣。
• 1. 元件生命周期函數很少，尤其是開發大型項目時，之前使用RN開發時就覺得RN比原生安卓生命周期少，自己還得去添加全局監聽去管理生命周期，flutter就更少了。
• 1. 性能，應該flutter，網上一大堆對比文章一番一大把，個人使用也明顯感覺到flutter性能很好，這是現實原理的問題，尤其是清單，比fRN好很多，而且動畫等也多，自定義元件還沒看，不做評價。
• 1. 社群，毫無疑問RN社群會比Flutter對于現在這個時間段來說，而且RN支援熱更新對原生加（RN、Flutter）來說，RN也更站優勢，三方元件來說RN已經很多了，開源項目比較多。

7. 提示

2019-5-12左右豆瓣把開源API關了，現在使用的别的開發者的位址，項目Baser_url是抽出來的後期可以自己改，現在項目使用的是https://douban.uieee.com/v2，可以正常運作。

8.下載下傳位址

• 安卓版
• ios版（沒有企業賬号-?）

9. 項目位址

10. 麻溜的走在大前端的路上.......

轉載于:https://juejin.im/post/5ce4a7c9e51d455d88219e70