Flutter系列之簡單瞭解專案結構

摘要： 前言 接下來直接進入專案的介紹，在這說明下我的學習路線，注重實戰講解，不去一個個解析官方的API是如何呼叫，如何使用的，因為這些官網已經講的很細了，希望在專案的開發過程中，遇到不明白的概念不會用的元件，再帶著問題去找答案，本期先看下Flutter的專案結構，對專案的目錄有個清晰的認識後，知...

前言

接下來直接進入專案的介紹，在這說明下我的學習路線，注重實戰講解，不去一個個解析官方的API是如何呼叫，如何使用的，因為這些官網已經講的很細了，希望在專案的開發過程中，遇到不明白的概念不會用的元件，再帶著問題去找答案，本期先看下Flutter的專案結構，對專案的目錄有個清晰的認識後，知道將程式碼寫在哪，如何引用第三方庫，如何做專案配置。

目錄如圖

通過上面圖你會發現一下幾個點：

• Flutter專案 實際上和React Native目錄結構一樣，都包含Android和Ios專案，都是在各自的專案中新增flutter依賴，最終整合到各自的專案中。
• Flutter是用yaml檔案配置 ，yaml類似於 標準通用標記語言 的子集 XML 的 資料描述語言 ，語法比XML簡單很多。推薦學習連結 - YAML 語法— 國內最專業的Ansible中文官方學習手冊
• pubspec.bock 是pubsec.yaml的配置生成檔案，裡面包含具體依賴的版本，建議上傳git，這樣保證你跟同事使用的依賴是同一個版本，保證程式碼一致性，避免不必要的問題出現。
• iOS程式碼 ，使用CocoaPods管理依賴
• Android程式碼 ，使用Gradle管理依賴
• lib為dart程式碼 ，使用pub管理依賴，
• Pub 包倉庫，在js中相當於npm的角色，主要管理開源專案依賴，在yaml檔案中配置生效。
  如此看來，萬變不離其宗，還是React Native的套路，只不過Dart語言有自己的管理套件。

Main.dart

分析下這個類，如圖：

我們從上往下分析下這個類

• import 匯入material.dart package 在編譯器中點進去原始碼看下如下
  

  package

  會js的朋友都不陌生，匯入這個包等於是可以使用這個包下所有的元件。
• main() lambda 表示式 實際return runApp函式，傳入MyApp()物件
• MyApp物件 繼承StatelessWidget 無狀態元件，Flutter裡面沒有像Activity一樣的角色，更像是直接使用的View，基於Widget做頁面而不是Activity，這樣就把Activity的雙重作用單一出來，View就是View，說白了還是借鑑了React的思想。該類實現的build的函式就是頁面內容渲染的關鍵。
• MyHomePage 該類是一個有狀態的元件，繼承StatefulWiget類，實現createState函式，並返回State狀態類的實現。StatefulWiget並沒有狀態管理，它是不可變的，而是依賴於State做狀態管理，體現了職責單一的原則。
• _MyHomePageState 該類是UI渲染最終的實現類，裡面包含了appBar，Text，Button的使用。
• title屬性 發現在MyHomePage構造中傳入了title欄位，可沒發現MyHomePage類中有人呼叫，直到在_MyHomePageState中才發現一個 widget.title的呼叫，這樣就明白了，在Widget中定義的屬性，可以在State中通過widge.呼叫。

總結

通過對專案結構的瞭解，和對主頁UI的認識，感覺到Flutter設計的精髓大多數來源於React，加油，有任何不明白的歡迎提問。