flutter 开发一个应用 4

列表的功能完成以后, 就可以在各处应用了,所以这次打算构建一个包含多个tab的应用.

建一个home_tabs_page.dart文件:

class HomeTabsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Home',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        //primaryColor: Colors.white,
      ),
      home: new TabBarPageWidget(),
    );
  }
}

void main() =>  runApp(HomeTabsPage()); 就样,框架就完成了.

gsy有一个示例,在https://github.com/CarGuo/TabBarWithPageView/blob/master/lib/GSYTabBarWidget.dart,我就用了一些代码, 毕竟从头构建一个并没有多大意思,而且这些方式都是大同小异.

class TabBarPageWidget extends StatefulWidget {}

class _TabBarPageWidgetState extends State<TabBarPageWidget> {
  final PageController pageControl = new PageController();

  final List<String> tabs = [
    "first",
    "second",
    "third",
    "fouth"
  ];

  _renderTab() {
    List<Widget> list = new List();
    for (int i = 0; i < tabs.length; i++) {
      list.add(new FlatButton(
          onPressed: () {
            pageControl.jumpTo(MediaQuery.of(context).size.width * i);
          },
          child: new Text(
            tabs[i],
            maxLines: 1,
          )));
    }
    return list;
  }

  _renderPage() {
    return [
      new GankJsonListPage(), //这里把上面建立的一个列表嵌进来了.
      new TestListPage(),
      new TestListPage(),
      new TestListPage(),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return new GSYTabBarWidget(
        type: GSYTabBarWidget.TOP_TAB,
        tabItems: _renderTab(),
        tabViews: _renderPage(),
        pageControl: pageControl,
        backgroundColor: Colors.lightBlue,
        indicatorColor: Colors.white,
        title: new Text("Test tabs"));
  }
}

GSYTabBarWidget就直接用gsy的源码了.

可以看出,与android构建一个tab的应用相比,代码量少很多,只用简单的几行,其余部分sdk已经构建好了, 谷歌作这个框架,是基于现有的app做出来的,所以很多功能它都具备了,看下效果:

以上多数是废话,因为到目前为止,没有什么技术含量的.

使用widget去构建一个ui,简单快捷. 源码在https://github.com/archko/aflutter.git

下一步, 将引入redux.并构建一个较完整的示例.

相关推荐