Flutter項目實戰之女裝商城------項目概述、創建項目、目錄結構、入口程序編寫


項目概述:

在之前https://www.cnblogs.com/webor2006/p/13395629.htmlFlutter的基礎學習文末也提到會進行一個Flutter全新的項目實戰學習,所以隨着這篇的開擼實戰正式開啟,這次的項目相比之前寫的開源中國來說就要正式化一點,只有正式化的項目操練才能讓自己以商業化的角度來謹慎對待它,當然學到的技術也是跟工作當中的所用的最最接近,先來看一下此次的項目效果截圖:

 

可以看到整體的風格還是很舒服的,功能也比較全面,還是很刺激的,接下來從0開始用Flutter來實現這么一個項目實戰,相信通過它自己Flutter實操的水准一定會新上一個台階滴~~

創建目錄:

在之前Flutter的學習是采用flutter的命令來創建的項目,這次咱們用Android Studio的向導進行,如下:

 

點擊完成時,發現報錯了。。

出師不利呀。。提示找不到androidx,於是網上搜解決方案,經過查看這個貼子https://stackoverflow.com/questions/58236340/androidx-error-creating-new-flutter-project-in-android-studio貌似跟本地的Flutter sdk的版本有關,我本機確實是好久木有升級了,我本機的版本瞅一下:

而官網最新的版本看一下:

,所以先將它升級看一下是否能解決,但是發現卡住升級不了。。

 

算了,不用這種方式了,直接下載離線包替換一下本機,直接下載目前的最新包:

再創建果真成功了,接下來運行保證工程可以正常運行,當然可以啦,經典默認的界面如下:

目錄結構:

在正式進行功能開發之前,先來對咱們的工程目錄進行一個定義,也就是哪些文件該放在哪一個目錄中進行分層管理,而不是對於新建的dart文件隨便亂放,在寫任何項目其實框架的搭建是非常重要的,所以接下來先對目錄進行一下划分:

config:

新建一個config目錄,存放項目中用到的一些配置信息,如下:

然后它里面又有一些常用的配置項,先提前創建了,待之后項目再來慢慢完善:

1、首先是對於顏色的配置,所以如下:

2、對於項目中用到的字體也需要統一管理一下:

3、對於字符常量的控制也是很有必要的:

4、對於http網絡請求中的ip,端口啥的都需要進行一個全局的配置,所以:

model:

這個模型層就不過多的說明了,都比較熟,是必不可少的,所以新建一下目錄:

pages:

這個則是用來存放具體Flutter頁面的,創建一下:

provide:

這個是進行狀態管理用的,先創建一下,待之后用到時再來體會:

routers:

這個是跟路由相關的,說到路由對於做Android開發的應該比較熟了,就是組件與組件之間的一個路由跳轉,那在Flutter的路由也是這樣么?之后再來體會,創建一下:

service:

這個就是一些業務的封裝文件,比如說Http網絡請求之類的,創建一下:

它里面先創建一個跟Http相關的:

綜上所示,其實就是典型MVC的模式。

入口程序編寫:

標題:

接下來則來從入口文件開始擼,先來將創建項目時默認生成的代碼用不到的給刪除掉:

接下來先來修改一下標題,標題文本當然不能寫死在這嘍:

得統一管理,不統一管理不上面咱們創建的各種config就沒啥意義了,所以咱們到string.dart中定義這個字符串:

關於這個常量的語法定義可以參考https://www.cnblogs.com/webor2006/p/11975291.html,如下:

這里寫項目的目的是為了鞏固之前所學,所以學過的語法在做項目中去復習這種效果是比較好的,反正於我而言這種學習方式是比較踏實,對於技術的學習無它法,就是大量反復的練習,慢慢就融入到自己的腦海當中了,“掌握”也就應運而生,所以對於比較簡單的知識點我還是會去復盤它,扯了個蛋,繼續!!接下來應用一下:

在繼續往下篇寫之前,這里還有一個優化代碼的小技巧需要看一下,就是對於config中有這么多文件在頁面使用的時候可能都需要用到,那么咱們在頁面中都需要一一的進行導入,就像目前咱們用到了string.dart一樣:

那如果要使用所有config文件,正常的代碼就會變成這樣了:

沒啥問題呀,有啥可說的,是的,正常這樣寫肯定是妥妥的,但是!!!對於追求代碼寫法的程序員來說還是可以將目前這種代碼用一種更優的方式來寫啦,有更優的當然得采用,下面來弄一下,其實很簡單,就是將這些配置都匯集到一個文件中,然后最終在頁面中只需導一個文件既可,如何做呢?

有點像小程序開發中的js導出也是用的export,此時在頁面上使用就簡單了,如下:

去掉調試模式:

目前咱們APP中默認右上角會有一個"DEBUG"標識,影響美觀,去掉:

 

定制主題:

接下來定制一下主題,目前的主題色不滿足要求:

 

此時需要用到顏色了,所以先上顏色的配置文件中進行定義:

好,接下來看一下修改的效果,目前需要再定義一個參數否則運行會報錯:

 

第一次項目開篇先簡單一點,慢慢享受壘磚的快樂~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM