前言
在 Flutter 這個分類的第一篇文章總結了下最新的 Mac 搭建 Flutter 開發環境和對聲明式UI這個理解的東西，前面也有提過，准備像在 SwiftUI 分類中那樣花一些功夫來寫一個 Flutter 項目Demo，這樣能更有利於我們的學習，后續的問題在日常開發的過程中再慢慢的總結吧。
模式還是按照 SwiftUI 的，我們寫一個標簽+導航的模式，具體的Demo 效果如下所示，我們在看幾個比較具體的概念性東西。
我自己寫了這幾個界面之后深切的體會到 Widget 真實Flutter 中一個很重要的概念，要是把它展開了往細了說，真的能寫出一片文章出來，在下面的參考文章中第一篇就有詳細的介紹這個Widget, 有需要的小伙伴可以去仔細看看這篇文章，那什么是 Widget 呢？我們先從 Flutter 的架構圖說起，如下：
我覺得這張圖能很清晰的反映出 Widget 在整個 Flutter 中的位置，在 Flutter 的世界里，包括 Views、 View Controllers,、Layouts 等在內的概念都建立在 Widget 之上。Widget 是 Flutter 功能的抽象描述,也就是一切皆為 Widget（這點反應在SwiftUI 中我覺得和 View 的性質有點像）。
我們這里就不詳細的解讀 Widget 了，具體的內容還是推薦下面的參考文章，因為說的已經很詳細了， 它的一個大概的導圖還是有必要給出來的，順着這個結構往下去了解它比較的合理。
等后面自己學習的比較深入的時候也可以回過頭來總結梳理一下 Widget，了解了掌握了才有資格具體的去分析總結它，暫時自己使用的也不是特別的多。
怎么引用別的文件
你要經常寫 Swift 幾乎我們不用去考慮這個問題除了一些第三方的引用，但在 Flutter 中我么你需要考慮，就像我們剛開始使用 OC 開發iOS的時候一樣，當然關鍵字還是我們熟悉的 import 具體的我們根據上面的文件層級關系往下看看，比如說我們在 Demo 中有建立一個和 main 平級的 TabsPage，我們引用的時候是下面這樣的：
/// 導入一個和自己平級的文件 import 'TabsPage.dart';
那在比如說，在 home 文件夾下有一個 HomePage.dart ,那我們是否還能直接像上面那樣直接去引用呢？，答案是不能的，我們性需要帶上的所屬的文件，具體的如下：
/// 導入四個我們自己創建的文件 import 'home/HomePage.dart'; import 'around/AroundPage.dart'; import 'mine/MinePage.dart'; import 'service/ServicePage.dart';
上面這個點留意一下就可以了，怕有小伙伴和我一樣剛開始學搞錯它。
這個控件的作用就和我們UIKit里面的UITabBarController 類似，和SwiftUI中的TabView一樣，說說它具體的一些屬性：
我們再看看我們在項目Demo里面的具體的使用
import 'package:flutter/material.dart';
/// 導入四個我們自己創建的文件
import 'home/HomePage.dart';
import 'around/AroundPage.dart';
import 'mine/MinePage.dart';
import 'service/ServicePage.dart';
class TabsPage extends StatefulWidget {
TabsPage({Key key}) : super(key: key);
@override
_TabsPageState createState() => _TabsPageState();
}
class _TabsPageState extends State<TabsPage> {
/// 當前選中的 index
int currentIndex = 0;
///
List listTabs = [
HomePage(),
AroundPage(),
ServicePage(),
MinePage(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
///
body: this.listTabs[this.currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this.currentIndex,
iconSize: 24.0,
type: BottomNavigationBarType.fixed,
onTap: (index) {
setState(() {
this.currentIndex = index;
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: '首頁'),
BottomNavigationBarItem(icon: Icon(Icons.category), label: '周邊'),
BottomNavigationBarItem(icon: Icon(Icons.send_rounded), label: '服務'),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: '我的'),
],
/// 選中的顏色
fixedColor: Colors.blue,
),
);
}
}
這里和我們iOS常見的是有點區別的，iOS在NavigationBarItem控制的一般都是導航控制器，我們在這里控制的等於直接是相應的控制器，然后每個控制器去管理自己的導航，有點安卓的味道，這樣不錯其實！具體的使用看上面的代碼，我們注釋寫的也比較詳細，我們就不在具體的解釋了。
沒錯，我們的導航來了，先看看它的具體的一些屬性：
AppBar({
Key key,
this.leading,//導航條左側需要展示的Widget
this.automaticallyImplyLeading = true,
this.title,//導航條的標題
this.actions,//導航條右側要展示的一組widgets
this.flexibleSpace,
this.bottom,//導航條底部需要展示的widget
this.elevation,
this.shape,//導航條樣式
this.backgroundColor,//導航條背景色
this.brightness,//設置導航條上面的狀態欄的dark、light狀態
this.iconTheme,//導航條上的圖標主題
this.actionsIconTheme,//導航條上右側widgets主題
this.textTheme,//導航條上文字主題
this.primary = true,//為false的時候會影響leading，actions、titile組件，導致向上偏移
this.centerTitle,//導航條表示是否居中展示
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.toolbarOpacity = 1.0,
this.bottomOpacity = 1.0,
})
還有一個我們得了解一下 Scaffold ，Scaffold 是 Material library 中提供的一個 Widget, 它提供了默認的導航欄、標題和包含主屏幕 Widget 的body屬性。 這里的關系就有點iOS中NaController 和 NaBar 的關系了。
我們還是具體看看我們是怎么使用的：
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text("周邊"),
),
);
}
復雜點的我們后面遇到了在總結，既然提到了導航那就得說一下界面之間的跳轉了，我們看看像上面gif中的挑戰效果我們是怎么做的，我們使用的是 Navigator 的 push方法了，看着是不是很眼熟，是不是覺得 Navigator 會有一個 pop方法，還真有！這個就比較舒服了。
在我們的Demo中，我們是直接在push方法里面寫了具體的頁面的內容的在，這個正常肯定是另一個 Widget 的,相信應該明白的，我們看我們具體的代碼：
// 跳轉方法
void _pushSaved() {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) {
final tiles = _saved.map(
(pair) {
return new ListTile(
title: new Text(pair.asPascalCase, style: _biggerFont),
);
},
);
final divided = ListTile.divideTiles(
context: context,
tiles: tiles,
).toList();
return new Scaffold(
appBar: new AppBar(
title: new Text('保存的單詞'),
),
body: new ListView(children: divided),
);
},
),
);
}
上面的內容一個基本的標簽+導航就出來了，后面我會不斷的完善這個Demo中的內容，以此來好好學習一下這個Flutter !
參考文章
4、Flutter容器類組件之Scaffold、TabBar、底部導航