背景

本人18年尾接觸了Flutter黍瞧，并開發(fā)了兩個(gè)APP。瞬間被這門跨平臺技術(shù)吸引住椎例，無奈后續(xù)沒有機(jī)會繼續(xù)開發(fā)挨决，但一直有在默默學(xué)習(xí)。卻始終覺得整天寫Demo實(shí)在難以進(jìn)步订歪，必須要有一套完整的小項(xiàng)目脖祈。首先要找個(gè)好的框架，GitHub上下載了幾個(gè)優(yōu)秀源碼刷晋，自己動手寫一個(gè)吧盖高。

項(xiàng)目結(jié)構(gòu)如圖所示

項(xiàng)目結(jié)構(gòu)圖

簡單說一下，這個(gè)框架主要應(yīng)用MVVM原理眼虱，主要通過provider實(shí)現(xiàn)喻奥。上圖中強(qiáng)調(diào)一下services包，主要用來做API請求管理捏悬。這里還要說明一下撞蚕，我也是Flutter新手一枚，此篇文章主要也是為了鞏固一下知識过牙，與大家一起交流flutter甥厦，千萬不要被我的淺薄知識誤導(dǎo)纺铭，也非常希望大家提出意見，讓我完善這個(gè)項(xiàng)目的學(xué)習(xí)編寫刀疙。

Services

1. 首先看service_interface：這是一個(gè)abstract class舶赔，聲明了所有的接口請求方法，等待實(shí)例對象去實(shí)現(xiàn)庙洼，當(dāng)有新的請求時(shí)顿痪，請?jiān)诖宋募侣暶饕粋€(gè)接口。

service_interface

2. 接下來是request_service：此文件實(shí)現(xiàn)（implements）了上面的抽象類（NetWorkApi）油够，利用工廠+單例模式暴露靜態(tài)實(shí)例蚁袭。之后必須實(shí)現(xiàn)service_interface中聲明的方法，去調(diào)用http請求石咬。implements規(guī)范了程序員必須去實(shí)現(xiàn)否則會報(bào)錯(cuò)揩悄。

request_service

當(dāng)VM頁面需要請求接口時(shí)，可直接調(diào)用：

VM中調(diào)用網(wǎng)絡(luò)請求

Router

Flutter路由一般分靜態(tài)和動態(tài)鬼悠，靜態(tài)路由傳參比較復(fù)雜删性，因此我習(xí)慣使用動態(tài)路由。因此在routers中焕窝，我使用Map對象router管理所有路由蹬挺，定義多個(gè)靜態(tài)函數(shù)，通過傳參中的鍵值它掂，去router中匹配頁面巴帮。邏輯非常簡單，其實(shí)就是一個(gè)封裝而已虐秋，目的就是為了方便管理榕茧。

Router

Model+ ViewModel +View?

這幾個(gè)我需要一起講，顧名思義MVVM思想客给，我使用的是Flutter官方采用的provider用押。View只負(fù)責(zé)布局，布局中需要用到的數(shù)據(jù)和方法靶剑，通過Provider.of(context,listen:false).model蜻拨，去使用ViewModel中定義的數(shù)據(jù)，而ViewModel中的數(shù)據(jù)抬虽，又引入了Model的實(shí)體類官觅。達(dá)到視圖與數(shù)據(jù)與操作相互分離的效果，提高代碼可維護(hù)性阐污。

Model

ViewModel

Model

Utils

這一塊主要是工具類的封裝，每個(gè)人習(xí)慣都不一樣咱圆，我的僅供參考笛辟。先看看我們導(dǎo)入的第三方庫

yaml

1.http： 使用Dio功氨，單例模式暴露對象，直接上代碼吧手幢。

1

2

3

這里調(diào)用了api中管理的路徑捷凄，進(jìn)行請求。api的截圖如下：?

api

2. toast：吐司utils

toast

至此围来，簡單介紹了我寫的粗略的項(xiàng)目框架跺涤，其中還有很多需要完善的地方，比如CommentModel需要幾種在http中處理监透；多個(gè)頁面共享Model如何更好的管理桶错；緩存管理；防抖節(jié)流都還沒有實(shí)現(xiàn)胀蛮，后面抽空補(bǔ)上院刁。同時(shí)我也需要將開始在這個(gè)項(xiàng)目中寫Demo了，不想再零散的學(xué)習(xí)了粪狼。

希望大家多多指導(dǎo)我退腥！

再會