參考官網(wǎng)的的開始使用，配置好開發(fā)環(huán)境即可進(jìn)行 Flutter 開發(fā)了蔬蕊，當(dāng)然開發(fā)前還是有必要了解一下 Dart 這門語言的，接下來涉及到與其他開發(fā)語言不太相同的地方會(huì)在文章里提出來。本教程使用的 flutter 版本為穩(wěn)定版本 v2.0.6逻锐。
創(chuàng)建Flutter 工程
推薦使用命令行的方式新建工程（使用 IDE 創(chuàng)建的過程會(huì)比較慢），命令如下：
flutter create hello_world
Flutter 會(huì)默認(rèn)創(chuàng)建一個(gè)示例工程雕薪，然后使用命令 打開工程（code 命令是 vscode 的一個(gè)別名昧诱，需要在.zshrc配置別名：alias code='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code'
code hello_word
項(xiàng)目目錄結(jié)構(gòu)如下圖所示：
各個(gè)目錄或文件說明如下：
- android：安卓原生工程配置相關(guān)文件，包括應(yīng)用圖標(biāo)所袁，原生資源盏档，權(quán)限配置等，可以參考之前的關(guān)于安卓打包發(fā)布的文章：Flutter 如何發(fā)布安卓應(yīng)用燥爷？
- ios：iOS 原生工程配置相關(guān)文件蜈亩，熟悉 iOS 開發(fā)的會(huì)知道具體的用途，其中 最主要的是 Runner 下前翎，設(shè)置到原生的配置稚配，如最關(guān)鍵的 InfoPlist 文件，以及權(quán)限相關(guān)的配置鱼填，這些配置建議在 Xcode 中配置會(huì)更為直觀药有。
- build：打包輸出文件，主要是安卓打包文件苹丸，iOS 打包需要通過 Xcode 完成愤惰。
- lib：最重要的目錄，所有源碼都在這個(gè)目錄赘理，其中 main.dart 是入口文件宦言，而 main 方法是入口方法。
- test：測試相關(guān)文件
- web：Flutter 2.0引入的商模，支持三端統(tǒng)一的 web 端文件
- pubspec.yaml：這個(gè)文件十分重要奠旺，所有的第三方依賴，以及文件依賴都通過這個(gè)文件管理施流，類似與蘋果的 podfile 和安卓的 gradle 文件响疚。
運(yùn)行應(yīng)用
如果要在安卓模擬器運(yùn)行，則需要安裝安卓 Studio瞪醋，并配置好模擬器忿晕，至于安卓真機(jī)調(diào)試與安卓應(yīng)用開發(fā)類似。蘋果也一樣银受，需要安裝 Xcode并啟動(dòng)模擬器践盼。真機(jī)調(diào)試蘋果相對比較麻煩鸦采，需要有開發(fā)者賬號(hào)，將真機(jī)的 identifier（設(shè)備唯一標(biāo)識(shí)符）加入到對應(yīng)應(yīng)用的開發(fā)設(shè)備中咕幻，這個(gè)可以自行百度搜索如何配置渔伯。
完成配置后，選擇要運(yùn)行的設(shè)備或模擬器（右下角會(huì)顯示當(dāng)前選定的設(shè)備肄程，如果沒選則是 No Device锣吼，如下圖）,命令行運(yùn)行 flutter run皆可完成編譯和進(jìn)入代碼調(diào)試。
Flutter 應(yīng)用在調(diào)試過程中是支持熱重載的（pub依賴改變了需要重新編譯）绷耍，因此盡量使用熱重載吐限，畢竟編譯一次時(shí)間停長的鲜侥。
開發(fā)設(shè)備配置
如果是要運(yùn)行模擬器褂始，對開發(fā)的設(shè)備要求還是挺高的，推薦使用 Mac Pro（16GB 內(nèi)存）進(jìn)行開發(fā)描函。Windows 電腦的話至少也需要16GB 內(nèi)存崎苗，模擬器一旦運(yùn)行起來那“呼呼”的風(fēng)扇聲讓人聽了感覺電腦干活挺累的！
來點(diǎn)小修改
運(yùn)行起來 demo 了舀寓，不動(dòng)手改改代碼過過癮都沒什么太大感覺胆数，我們來實(shí)現(xiàn)在屏幕中間顯示 Logo，點(diǎn)擊后切換圖片的簡單修改互墓。
使用圖片資源需要兩個(gè)步驟必尼，第一建立一個(gè)圖片文件夾存放圖片資源，第二是需要在 pubspec文件中指定依賴的資源目錄篡撵。新建一個(gè) images 文件夾存放圖片文件判莉，將圖片文件（avatar.jpg 和qrcode.jpg）放到images 目錄下。在 pubspec.yaml 文件中設(shè)置 assets 屬性：
flutter:
uses-material-design: true
assets:
- images/avatar.jpg
- images/qrcode.jpg
# 其他配置
注意放置的位置不要弄錯(cuò)了育谬，在 pubspec.yaml 中有相應(yīng)的注釋券盅。配置完成后需要運(yùn)行 flutter pub get命令更新一下依賴的資源。
主要代碼如下所示：
class _MyHomePageState extends State<MyHomePage> {
List _imageNames = [
{'image': 'images/avatar.jpg', 'text': '島上碼農(nóng)'},
{'image': 'images/qrcode.jpg', 'text': '掃碼關(guān)注'}
];
int _index = 0;
void _onSiwtch() {
setState(() {
_index = (++_index) % _imageNames.length;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
width: 300,
height: 300,
child: Column(
children: [
Container(
width: 128,
height: 128,
margin: EdgeInsets.only(top: 10, bottom: 10),
child: Image.asset(
_imageNames[_index]['image'],
fit: BoxFit.cover,
),
),
Text(
_imageNames[_index]['text'],
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _onSiwtch,
tooltip: '切換',
child: Icon(Icons.swap_horizontal_circle_outlined),
),
);
}
}
代碼邏輯如下：
_MyHomePageState類是 MyHomePage 的 一個(gè)有狀態(tài)組件膛檀，F(xiàn)lutter 的組件和 React 的類似锰镀，分為無狀態(tài)和有狀態(tài)，無狀態(tài)組件無法進(jìn)行數(shù)據(jù)更新咖刃，有狀態(tài)組件有自己的數(shù)據(jù)狀態(tài)泳炉，根據(jù)數(shù)據(jù)狀態(tài)更新界面。
下劃線_代表這個(gè)類嚎杨、方法或成員變量是私有的花鹅，在類的外部無法訪問。在_MyHomePageState 中定義了一個(gè) Map <String, String>類型的數(shù)組（List）_imageNames 以及一個(gè)狀態(tài)變量數(shù)組控制下標(biāo)_index磕潮。當(dāng)切換按鈕點(diǎn)擊時(shí)翠胰，會(huì)在_onSwitch 方法中通過 setState更改狀態(tài)變量_index 的值容贝，從而引起界面的自動(dòng)刷新。
頁面組件的元素和層級(jí)如下：
- appBar：導(dǎo)航欄
- body：主界面
- Center：居中組件
- Container：頁面元素容器之景，類似 html 的 div斤富，通過這個(gè) Container 指定界面中的尺寸和邊距
- Column：縱向布局，即元素按縱向一次排布锻狗。
- 圖片容器：用于限定圖片的顯示大小满力，邊距等
- 圖片：使用本地資源展示圖片
- 文本：顯示圖片底下的文字
- 圖片容器：用于限定圖片的顯示大小满力，邊距等
- Column：縱向布局，即元素按縱向一次排布锻狗。
- Container：頁面元素容器之景，類似 html 的 div斤富，通過這個(gè) Container 指定界面中的尺寸和邊距
- Center：居中組件
- floatingActionButton：懸浮按鈕
可以看到整個(gè)頁面的層次和 HTML 很像，實(shí)際上 Dart 最開始的設(shè)計(jì)就是想替換 Javascript 的轻纪，而 Flutter 本身很多理念仿照了 React油额。從代碼也可以看到，界面的嵌套層級(jí)很多刻帚，這被很多人吐槽潦嘶，實(shí)際只要我們將組件抽離，就可以有效減少嵌套層級(jí)（界面的寫法也有點(diǎn)類似 JSX崇众，只是Flutter 內(nèi)置了很多布局組件掂僵，簡化了開發(fā)）。
最終效果
點(diǎn)擊切換按鈕圖片和文字會(huì)隨之變化
