項目結構解析說明

從圖中看，整個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"類型。

「文：黃豆豆」

「源：公眾號：走漏點風聲」

推薦閱讀：