Flutter從0到1--項目工程結構與示例源碼解析
flutter面世已經有一些時間了,經過一段時間的探索,基本上可以確定可以用於正式項目開發中。
本系列文章基於最新發布的flutter 1.2版本,開發工具為Android Studio,這是flutter從0到1的第一篇「工程目錄結構解析」。
創建工程
打開Android Studio,選擇Start a new Flutter project。
見到如下圖的窗口,選擇 Flutter Application。點擊next繼續。看見如下圖窗口後,填寫基本的工程信息。
如項目名稱、Flutter sdk 路徑、項目存放路徑、以及描述信息。然後點擊next繼續。下圖所示的窗口彈出後,填寫報名信息。
以及一些額外的配置選項,如生成示例代碼,支持kotlinswift等。我們這裡選擇默認。點擊finish完成創建。成功創建一個Flutter工程後,整體結構如下。
項目結構解析說明
從圖中看,整個Flutter工程結構很簡單,我們重點關注以下幾個部分:
- android文件夾這裡存放的是android平臺的相關代碼,和原生android項目結構一致,生成的默認代碼和以前不一樣,主要是與Flutter交互的代碼。
- ios文件夾這裡存放的是ios平臺的相關代碼。
- lib文件夾存放flutter相關代碼。也是本篇文章重點介紹的部分。
- test文件夾用於存放測試代碼
- pubspec.yaml文件Flutter相關的代碼開發均在lib目錄下,整個Flutter工程配置文件都在pubspec.yaml中配置,可以配置第三方的依賴、Flutter設置、資源文件等。
示例代碼解析說明
我們打開lib文件夾,默認生成的只有main.dart一個文件,裡面就是示例代碼,下面將詳細說明整個示例代碼。
main方法表示入口函數,runApp函數接受給定的Widget,並使其成為widget樹的根。在Flutter中,一切皆widget,可以說一切試圖界面都是由各種widget堆疊出來的。
上面的寫法,是dart語言的箭頭函數,dart感覺就像是java與js的結合體,不能理解的同學可以看看下面的等同寫法。
在main函數中調用了MyApp類,接著看一下MyApp的代碼:
這裡MyApp繼承了StatelessWidget,重寫了build方法,是構建一個MaterialApp widget返回。MaterialApp是一個方便的Widget,它封裝了應用程序實現Material Design所需要的一些Widget。
示例代碼中,使用了MaterialApp的三個屬性,分別解釋一下:
- title:在任務管理窗口中所顯示的應用名字
- theme: 定義應用所使用的主題顏色,其中定義了 primaryColor、accentColor、hintColor 等顏色值。通過指定一個 ThemeData 定義應用中每個控制項的顏色。
- home:指定一個 Widget 對象,用來定義當前應用打開的時候,所顯示的界面。 類似於我們在AndroidManifest中配置啟動頁面
home屬性指定了MyHomePage類,下面看一下代碼:
MyHomePage中createState方法,返回了_MyHomePageState,表明該頁面的狀態由_MyHomePageState這個類來控制,具體看一下_MyHomePageState類的代碼
State是一個狀態對象,<>裡面是表示該狀態是跟誰綁定的。所以_MyHomePageState綁定了MyHomePage。
其中定義了一個私有變數_counter,然後定義了一個方法_incrementCounter,其內部實現變數_counter自增1 。
build方法中,實現了一個Scaffold,Scaffold組件是Material Design佈局結構的基本實現。此類提供了用於顯示drawer、snackbar和底部sheet的API。
由代碼中,我們可以看到,他定義了頂部appBar、body、floatingActionButton,分別表示頂部導航欄、內容、浮動按鈕。
body中定義了一個豎佈局,包含兩個Text,用於顯示文本,其中有一個文本的值與變數_counter綁定。
floatingActionButton的主要作用就是調用_incrementCounter方法, onPressed屬性就表示觸摸點擊回調。
關於widget
在編寫一個Flutter應用程序時,通常都會創建widget,它的主要功能就是實現一個build函數,用以構建一個widget實例。
這些widget是無狀態的StatelessWidget或是有狀態的StatefulWidget,具體的選擇取決於您的widget是否需要管理一些狀態。
通俗的講就是,StatefulWidget是一個有狀態的控制項,如果頁面需要更新ui,動態展示數據,那麼該頁面就要繼承自StatefulWidget,如果只是一個純展示的頁面,只需要繼承自StatelessWidget即可,StatelessWidget子類中的欄位往往都會定義為"final"類型。
「文:黃豆豆」
「源:公眾號:走漏點風聲」推薦閱讀: