前言
接下來直接進入項目的介紹活合，在這說明下我的學習路線，注重實戰(zhàn)講解绘闷，不去一個個解析官方的API是如何調(diào)用橡庞，如何使用的，因為這些官網(wǎng)已經(jīng)講的很細了印蔗，希望在項目的開發(fā)過程中扒最，遇到不明白的概念不會用的組件，再帶著問題去找答案华嘹，本期先看下Flutter的項目結構吧趣，對項目的目錄有個清晰的認識后，知道將代碼寫在哪耙厚，如何引用第三方庫强挫，如何做項目配置。
目錄如圖
項目目錄以及配置文件
通過上面圖你會發(fā)現(xiàn)一下幾個點：
- Flutter項目實際上和React Native目錄結構一樣薛躬，都包含Android和Ios項目俯渤，都是在各自的項目中添加flutter依賴，最終集成到各自的項目中型宝。
- Flutter是用yaml文件配置 八匠，yaml類似于標準通用標記語言的子集XML的數(shù)據(jù)描述語言，語法比XML簡單很多趴酣。推薦學習鏈接 - YAML 語法— 國內(nèi)最專業(yè)的Ansible中文官方學習手冊
- pubspec.bock 是pubsec.yaml的配置生成文件臀叙，里面包含具體依賴的版本，建議上傳git价卤，這樣保證你跟同事使用的依賴是同一個版本劝萤，保證代碼一致性，避免不必要的問題出現(xiàn)慎璧。
- iOS代碼床嫌，使用CocoaPods管理依賴
- Android代碼，使用Gradle管理依賴
- lib為dart代碼胸私，使用pub管理依賴厌处，
-
Pub 包倉庫，在js中相當于npm的角色岁疼，主要管理開源項目依賴阔涉，在yaml文件中配置生效缆娃。
如此看來，萬變不離其宗瑰排，還是React Native的套路贯要，只不過Dart語言有自己的管理套件。
Main.dart
分析下這個類椭住，如圖：
Main.dart
我們從上往下分析下這個類
-
import 導入material.dart package 在編譯器中點進去源碼看下如下會js的朋友都不陌生崇渗，導入這個包等于是可以使用這個包下所有的組件。package
- main() lambda 表達式 實際return runApp函數(shù)京郑，傳入MyApp()對象
- MyApp對象 繼承StatelessWidget 無狀態(tài)組件宅广，F(xiàn)lutter里面沒有像Activity一樣的角色，更像是直接使用的View些举，基于Widget做頁面而不是Activity跟狱，這樣就把Activity的雙重作用單一出來，View就是View户魏，說白了還是借鑒了React的思想兽肤。該類實現(xiàn)的build的函數(shù)就是頁面內(nèi)容渲染的關鍵。
- MyHomePage 該類是一個有狀態(tài)的組件绪抛，繼承StatefulWiget類，實現(xiàn)createState函數(shù)电禀，并返回State狀態(tài)類的實現(xiàn)幢码。StatefulWiget并沒有狀態(tài)管理，它是不可變的尖飞，而是依賴于State做狀態(tài)管理症副，體現(xiàn)了職責單一的原則。
- _MyHomePageState 該類是UI渲染最終的實現(xiàn)類政基，里面包含了appBar贞铣，Text，Button的使用沮明。
- title屬性 發(fā)現(xiàn)在MyHomePage構造中傳入了title字段辕坝，可沒發(fā)現(xiàn)MyHomePage類中有人調(diào)用，直到在_MyHomePageState中才發(fā)現(xiàn)一個 widget.title的調(diào)用荐健，這樣就明白了酱畅，在Widget中定義的屬性，可以在State中通過widge.調(diào)用江场。
總結
通過對項目結構的了解纺酸，和對主頁UI的認識，感覺到Flutter設計的精髓大多數(shù)來源于React址否，有任何不明白的歡迎提問餐蔬，加油。
