专栏首页吴老师移动开发[Flutter]使用顶部切换导航TabBar

[Flutter]使用顶部切换导航TabBar

目前移动开发tab切换是一个很通用的功能,Flutter 通过Material 库提供了很方便的API来使用tab切换。

效果图

image

创建TabController

TabBarView和TabBar都有一个tabController的参数 TabBarView和Tab是就由TabController来控制同步的,点击了某个tab后,要同步的显示对应的TabBarView。TabController的创建有两种形式,一种是使用系统的DefaultTabController,这种方式很简单,只要在Scaffold上面再套一层DefaultTabController就可以了。这种方式下,TabBarView会自动去查找这个tabController,如果找不到就会报错。

第二种是自己定义一个TabController.实现SingleTickerProviderStateMixin

创建TabBar

TabBar哪里都可以创建,但是在AppBar里面有一个bottom参数可以接收TabBar,会放在导航栏的下面。

new TabBar(
          tabs: <Widget>[
            new Tab(
              icon: new Icon(Icons.directions_bike),
            ),
            new Tab(
              icon: new Icon(Icons.directions_boat),
            ),
            new Tab(
              icon: new Icon(Icons.directions_bus),
            ),
          ],
        ),

创建Tab对应的内容Widget

tab对应的内容view要放在TabBarView里面。如下:

new TabBarView(
        controller: _tabController,
        children: <Widget>[
          new Center(child: new Text('自行车')),
          new Center(child: new Text('船')),
          new Center(child: new Text('巴士')),
        ],
      ),

两种方式的完整代码

第一种实现代码如下:

@override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: 3,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text('顶部tab切换'),
          bottom: new TabBar(
            tabs: <Widget>[
              new Tab(icon: new Icon(Icons.directions_bike),),
              new Tab(icon: new Icon(Icons.directions_boat),),
              new Tab(icon: new Icon(Icons.directions_bus),),
            ],
            controller: _tabController,
          ),
        ),
        body: new TabBarView(
          children: <Widget>[
            new Center(child: new Text('自行车')),
            new Center(child: new Text('船')),
            new Center(child: new Text('巴士')),
          ],
        ),
      ),
    );
  }

第二种代码如下:

class TabBarDemoState extends State<TabBarDemo>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('顶部tab切换'),
        bottom: new TabBar(
          tabs: <Widget>[
            new Tab(
              icon: new Icon(Icons.directions_bike),
            ),
            new Tab(
              icon: new Icon(Icons.directions_boat),
            ),
            new Tab(
              icon: new Icon(Icons.directions_bus),
            ),
          ],
          controller: _tabController,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: <Widget>[
          new Center(child: new Text('自行车')),
          new Center(child: new Text('船')),
          new Center(child: new Text('巴士')),
        ],
      ),
    );
  }

关于学习

flutter的学习文章及代码都整理在这个github仓库

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter TextStyle参数解析关于学习

    吴老师
  • [Flutter]使用主题

    使用主题可以在App里面共享颜色和字体样式。在Flutter里面有两种方式来使用主题,一种是全局范围的、一种是使用Theme Widget, Theme Wid...

    吴老师
  • Flutter路由跳转及参数传递

    做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过star...

    吴老师
  • AkShare-股票数据-板块行情

    新增板块行情的数据接口,主要可以查询当前的热点板块,该接口可以查询实时的板块行情数据。

    AkShare
  • 【Flutter 专题】08 小小优化【登录】页面

    和尚前两天花了很久才搭建了一个最简单的【登录】页面,但依然还有很多需要优化的地方,和尚又花了很久的时间尝试做了一点点的优化,仅针对优化的部分简单整理...

    阿策
  • 【Flutter 专题】07 您搭好【登录】页面了么?

    和尚最近在利用业余时间学习 Flutter,还真的是值得研究。和尚觉得学习一门技术最好的方式就是动手,在实践过程中结合官网文档才能更快的学习和理解。...

    阿策
  • Flutter中的操作提示

    在前面的文章中我们学习了Flutter中输入以及选择控件的用法,借助于这些组件大家可以完成很多常用的功能,但是他不能及时在用户操作后完成相应的界面提示,所以今天...

    flyou
  • Flutter 简易新闻项目目标效果对比简介代码代码地址

    使用flutter快速开发 Android 和 iOS 的简易的新闻客户端 API使用的是 showapi(易源数据) 加载热门微信文章

    gwk_iOS
  • DartVM服务器开发(第十七天)--Jaguar_websocket结合Flutter搭建简单聊天室

    我们这里定义了一个ChatMessageData,如果你想需要更多字段,可以再添加

    rhyme_lph
  • ListView&GirdView

    在前面的的文章中我们了解了Flutter中操作提示的用法,包括SnackBar、Dialog、以及BottomSheet,通过这些Widget我们可以很方便的...

    flyou

扫码关注云+社区

领取腾讯云代金券