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

前记

上一篇撸的个人中心界面，可以看到是一个基础的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的粗浅介绍

即索引堆栈，它的继承树为：

继承树

。
它的主要功能就是显示某一个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()),
    );
  }

白话文

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

总结：

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

image.png

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

 

以上： 互勉！

作者：间歇性丶神经病患者
链接：https://www.jianshu.com/p/55c77dae4c6d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。