Flutter学习三之搭建一个简单的项目框架

上一篇文章介绍了Dart的语法的基本使用，从这篇文章开始，开发一个基于玩Android网站的app。使用的他们开放的api来获取网站数据。根据网站的结构，我们app最外层框架需要添加一个底部导航栏，导航栏有5个tab，每个tab对应一个页面，分别是首页，项目，公众号，问答，我的等5个模块。

在Android中，如果要实现这样的UI框架，有很多种实现方式，常用的就是一个Activity里面配合多个fragment来实现。但是在Flutter中并没有activity和fragment的组件。

Flutter中没有页面的概念，只有widget，widget不仅可以用来表示控件，也可以用来表示一个页面。

如果我们想新建一个flutter项目的页面，只需要继承widget的子类StatefulWidget或者StatelessWidget，其中StatefulWidget是有状态的，StatelessWidget是无状态的，什么叫有状态和无状态呢？

有状态可以理解为页面有控件更新，无状态可以理解为页面不需要数据更新，即静态页面。一般大部分情况下，我们的项目中的页面基本都会需要调用请求来更新页面，所以大部分情况可以直接继承StatefulWidget来实现一个页面。

在AndroidStudio新建一个Flutter项目，File -> New Flutter Project -> Flutter Application ,填上工程名称就可以新建一个Flutter项目。

1.新建一个main_page_widget.dart文件，在文件中新建名称为MainPageWidget 继承 StatefulWidget的类当作app的首页，重写 createState的方法。在MainPageWidget类下面新建一个MainPageState类 继承自State,重写build方法，上面createState方法返回一个MainPageState对象即可，然后就可以在build方法中返回页面需要的UI控件了。

2.由于我们需要在底部建立一个导航栏控件，在Dart中可以采用TabBar加上TabBarView实现这个功能。具体代码可以参考下面：

@override Widget build(BuildContext context) { return Scaffold( body: TabBarView( children: _renderPage(), controller: tabController, //TabBarView 默认支持手势滑动，若要禁止设置 NeverScrollableScrollPhysics physics: NeverScrollableScrollPhysics(), ), bottomNavigationBar: Material( color: Colors.blue, child: TabBar( controller: tabController, indicator: UnderlineTabIndicator( borderSide: BorderSide(style: BorderStyle.none)), tabs: icons), ), );}

Scaffold 控件中包含一个页面所需要的3部分，appBar，bady，bottomNavigationBar等。一般我们新建页面的时候，根widget都会使用Scaffold。可以将Scaffold理解为页面的骨架，我们使用它可以很容易地拼装出一个完整的页面。