Flutter从入门到奔溃（二）：撸一个App基础框架

Flutter从入门到奔溃（二）：撸一个App基础框架

前记

上一篇撸的个人中心界面，可以看到是一个基础的APP框架（上有ViewPagere&或者可供Hide Or Show的View,下有标签栏），而我们现在好像还没有搭建出来，所以很有朋友就会问了（其实没人问，只是我突然想起来）：这个框架要怎么搭呢？

Stateless widgets和Stateful widgets的粗浅介绍

页面搭建必不可少要用到两个部件：Stateless widgets和Stateful widgets，由名字可以知道，他们的区别在于less以及ful：即是否可以有状态的更改。
如何区分使用这两种部件的评判标准就是：是否需要状态的更改。
这里有个小tips，在AndroidStudio可以通过st快速生成模板代码：

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介绍

扫描二维码关注公众号，回复： 3734139 查看本文章

title ：在任务管理窗口中所显示的应用名字
theme ：应用各种 UI 所使用的主题颜色
color ：应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色
home：应用默认所显示的界面 Widget
routes ：应用的顶级导航表格，这个是多页面应用用来控制页面跳转的
initialRoute ：第一个显示的路由名字，默认值为 Window.defaultRouteName
onGenerateRoute ：生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面
onLocaleChanged ：当系统修改语言的时候，会触发这个回调
navigatorObservers ：应用 Navigator 的监听器
debugShowMaterialGrid ：是否显示纸墨设计基础布局网格，用来调试 UI 的工具
showPerformanceOverlay ：显示性能标签，https://flutter.io/debugging/#performanceoverlay
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的粗浅介绍

即索引堆栈，它的继承树为：。
它的主要功能就是显示某一个Widget，而隐藏其他的Widget，

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()),
    );
  }

白话文

可以看到我们在build中返回了一个MaterialApp，
其中定义了theme,routes,home。
我们主要看home属性，返回了一个Scaffold，其中我们实现了appBar，body，bottomNavigationBar，drawer，分别实现了toolbar效果，主体效果，标签页，侧边栏。
其中的body是一个IndexedStack,显示的widget由_tabIndex指定。

总结：

其实这个跟我们安卓习惯用的ViewPager+RadioGroup类似，也都是一个上下结构：

可能不同的就是组件的名字或者实现方式有所差异，但是语言，框架这些东西说深是深，说浅是浅，基本是属于一通百通。

以上：互勉！

# Flutter从入门到奔溃（三）：撸一个App基础框架