Flutter 实战之实现一个简单的新闻阅读器，html5 移动端开发框架

new Text(StringResources.TAB_GN_CN,style: new TextStyle(fontSize: 20.0)),new Text(StringResources.TAB_GJ_CN,style: new TextStyle(fontSize: 20.0)),new Text(StringResources.TAB_YL_CN,style: new TextStyle(fontSize: 20.0)),new Text(StringResources.TAB_TY_CN,style: new TextStyle(fontSize: 20.0)),new Text(StringResources.TAB_JS_CN,style: new TextStyle(fontSize: 20.0)),new Text(StringResources.TAB_KJ_CN,style: new TextStyle(fontSize: 20.0)),new Text(StringResources.TAB_CJ_CN,style: new TextStyle(fontSize: 20.0)),new Text(StringResources.TAB_SS_CN,style: new TextSt

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

yle(fontSize: 20.0))];final List<Tab> tabs = [];for (int i = 0 ; i < tabTexts.length ; i++) {tabs.add(new Tab(child: tabTexts[i],));}

return new DefaultTabController(length: tabs.length,child: new Scaffold(appBar: new AppBar(title: new Text(widget.title),bottom: new TabBar(isScrollable: true,tabs: tabs,

),),body: new TabBarView(children: tabTexts.map((Text tab) {return new Center(child: new NewsPage(tabName: tab.data,));}).toList()),drawer: new DrawerPage(),));}

主要通过 DefaultTabController + TabBar + TabBarView 三个 Widget 配合实现类似 Android 中 ViewPager + Indicator 的效果。

build 方法返回的最外层是一个 DefaultTabController Widget，正如它的名字那样，它是一个控制器，用来控制 TabBar 和 TabBarView 的联动。要在界面上绘制一个 TabBar 和其对应的内容页使用 TabBar 和 TabBarView 两个 Widget 来实现的。

通过配置 Scaffold 的 appbar 参数为界面添加一个标题栏，再配置 AppBar 的 bottom 参数为标题栏添加一个显示在其底部的 Widget，在这里传递给 bottom 参数的是一个 TabBar Widget，所以在标题栏下方会显示一个 TabBar。TabBar 的每个 Tab 默认是固定位置的，这里配置其 isScrollable 参数为 true 使其可滚动，tabs 参数配置 TabBar 中的每个 Tab Widget。

通过配置 Scaffold 的 body 参数为其添加主内容界面，这里的内容界面需要配合 TabBar 的切换而切换，所以配置一个 TabBarView Widget。最终通过外层的 DefaultTabController 使得 TabBar 和 TabBarView 联动起来。

关于实现类似效果的更多详细信息可参阅DefaultTabController，TabBar，TabBarView。

• Drawer 实现：

return new DefaultTabController(length: tabs.length,child: new Scaffold(appBar: new AppBar(title: new Text(widget.title),bottom: new TabBar(isScrollable: true,tabs: tabs,

),),body: new TabBarView(children: tabTexts.map((Text tab) {return new Center(child: new NewsPage(tabName: tab.data,));}).toList()),drawer: new DrawerPage(),));

Drawer 的实现也很简单，Flutter 都已经封装好了，直接配置 Scaffold 的 drawer 参数来实现一个 Drawer 界面。