[toc]

前記

上一篇擼的個人中心界面，可以看到是一個基礎的APP框架（上有ViewPagere&或者可供Hide Or Show的View,下有標簽欄），而我們現在好像還沒有搭建出來，所以很有朋友就會問了（其實沒人問，只是我突然想起來）：這個框架要怎么搭呢？
gayhub地址

Stateless widgets和Stateful widgets的粗淺介紹

頁面搭建必不可少要用到兩個部件：Stateless widgets和Stateful widgets，由名字可以知道，他們的區別在于less以及ful：即是否可以有狀態的更改。
如何區分使用這兩種部件的評判標準就是：是否需要狀態的更改。
這里有個小tips，在AndroidStudio可以通過st快速生成模板代碼：

Snipaste_2018-08-19_14-59-00.png

Stateless widgets

狀態不可改變的部件，他的使用很簡單，我們在build方法中返回我們構建的widget即可：

class temp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(child: new Text('this is the StatelessWidget demo'));
  }
}

StateFlu widgets

狀態可以改變的widget，他的使用相對比較復雜，通過state實現widget狀態的更新：

class temp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _tempState();
}

class _tempState extends State<temp> {
  @override
  Widget build(BuildContext context) {
    return new Container(child:  new Text('this is the StatefulWidget demo'),);
  }
}

效果展示

個人中心頁面

沒有弄好的發現頁

抄襲的側滑頁

MaterialApp 的粗淺介紹

紙墨設計（Material Design）相信Android汪都不會不熟悉，它是android的一套設計風格，而它在Flutter里面也是扮演著很重要的角色，它提供了很多重要的屬性：
參考 Material介紹

1. title ： 在任務管理窗口中所顯示的應用名字
2. theme ：應用各種 UI 所使用的主題顏色
3. color ：應用的主要顏色值（primary color），也就是安卓任務管理窗口中所顯示的應用顏色
4. home：應用默認所顯示的界面 Widget
5. routes ：應用的頂級導航表格，這個是多頁面應用用來控制頁面跳轉的
6. initialRoute ：第一個顯示的路由名字，默認值為 Window.defaultRouteName
7. onGenerateRoute ： 生成路由的回調函數，當導航的命名路由的時候，會使用這個來生成界面
8. onLocaleChanged ： 當系統修改語言的時候，會觸發這個回調
9. navigatorObservers ： 應用 Navigator 的監聽器
10. debugShowMaterialGrid ： 是否顯示 紙墨設計 基礎布局網格，用來調試 UI 的工具
11. showPerformanceOverlay ： 顯示性能標簽，https://flutter.io/debugging/#performanceoverlay
12. checkerboardRasterCacheImages 、showSemanticsDebugger、debugShowCheckedModeBanner 各種調試開關

Scaffold 的粗淺介紹

說到Material我們必不可少要說到Scaffold，官方文檔里面對它的介紹是：
Material Design布局結構的基本實現。此類提供了用于顯示drawer、snackbar和底部sheet的API,也就是說它已經幫我們提供了很多可供拓展的功能widget了，我們詳細看下它的主要屬性：
參考：Scaffold文檔

1. appBar （類似Android中的ToolBar）
2. body 顯示主體
3. drawer 側邊欄
4. bottomNavigationBar 導航欄

IndexedStack的粗淺介紹

即索引堆棧，它的繼承樹為：

繼承樹

class IndexedStack extends Stack {
  /// Creates a [Stack] widget that paints a single child.
  ///
  /// The [index] argument must not be null.
  IndexedStack({
    Key key,
    AlignmentGeometry alignment: AlignmentDirectional.topStart,
    TextDirection textDirection,
    StackFit sizing: StackFit.loose,
    this.index: 0,
    List<Widget> children: const <Widget>[],
  }) : super(key: key, alignment: alignment, textDirection: textDirection, fit: sizing, children: children);

主要屬性有children,index

頁面搭建

多說無益，我比較崇尚在踩坑中學習，文檔粗略過一篇即可，苦讀文檔沒啥意義，踩了坑再百度，再google，再文檔...比什么都有用。

 @override
  Widget build(BuildContext context) {
    initData();
    return new MaterialApp(
      theme: new ThemeData(primaryColor: const Color(0xFF63CA6C)),
      routes: _routes,
      home: new Scaffold(
          appBar: new AppBar(
            title: new Text(tabTitles[_tabIndex],
                style: new TextStyle(color: Colors.white)),
            iconTheme: new IconThemeData(color: Colors.white),
          ),
          body: _body,
          bottomNavigationBar: new CupertinoTabBar(
            items: getBottomNavigationBarItem(),
            currentIndex: _tabIndex,
            onTap: (index) {
              setState(() {
                _tabIndex = index;
              });
            },
          ),
          drawer: new LeftDraw()),
    );
  }

白話文

1. 可以看到我們在build中返回了一個MaterialApp，
   其中定義了theme,routes,home。
2. 我們主要看home屬性，返回了一個Scaffold，其中我們實現了appBar，body，bottomNavigationBar，drawer，分別實現了toolbar效果，主體效果，標簽頁，側邊欄。
3. 其中的body是一個IndexedStack,顯示的widget由_tabIndex指定。

總結：

其實這個跟我們安卓習慣用的ViewPager+RadioGroup類似，也都是一個上下結構：

image.png

以上： 互勉！