专栏首页吴老师移动开发[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中的AppBar、TabBar和TabController——顶部切换栏是如何实现的

    实际上,AppBar 这个组件有许多的属性,我们通过这些属性,可以用来定义顶部导航栏的各种样式。下面我将为你一一说明这些属性的作用:

    拉维
  • Flutter 入门指北之快速搭建界面(含Flutter知识体系)

    完整版脑图,后台回复 “Flutter” 关键字,关注 码个蛋(codeegg)会持续更新本系列文章.

    陈宇明
  • Flutter跨平台移动端开发

    constrainedBox 可以给子 widget 添加更多约束条件。与 sizedBox 同通过 renderConstrainedBox 绘制

    码脑
  • Flutter 的按钮,看这篇文章就够了

    我在之前的文章文本、图片和按钮在Flutter中怎么用中,简单介绍过按钮组件,本篇文章来详细聊聊Flutter中的各种按钮组件的各种应用场景。

    拉维
  • Flutter+Dart聊天实例|flutter仿微信聊天|红包|朋友圈

    Flutter_Chatroom聊天室项目是基于flutter+dart技术开发的跨平台聊天实战案例,基本实现了登录/注册表单验证、消息表情发送、图片预览、红包...

    andy2018
  • Android使用ViewPager实现顶部tabbar切换界面

    注:PagerSlidingTabStrip为自定义控件,用于切换界面,此处不便贴出代码

    砸漏
  • Flutter完整开发实战详解(二、 快速开发实战篇)

     作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter ...

    GSYTech
  • Flutter完整开发实战详解(二、 快速开发实战篇)

     作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter ...

    GSYTech
  • 微信小程序tabbar设置样式在哪里改

    ytkah
  • flutter BottomAppBar实现不规则底部导航栏

    本文实例为大家分享了flutter实现不规则底部导航栏的具体代码,供大家参考,具体内容如下

    砸漏
  • Flutter 自定义 TabBar

    TabBar常用于放在AppBar中,以标签页的形式展示同一个页面不同内容的主题标签。

    越陌度阡
  • Flutter-初试牛刀,入门篇

    好像说的就是我呀。学习Flutter一段时间了,我感觉我要入门了,特来总结一下遇到的点点滴滴。如下效果就是我用Flutter重写的曾经项目部分效果,说是部分其实...

    Light413
  • Flutter开发-容器类组件

    Padding可以给其子节点添加填充(留白),和边距效果类似。我们在前面很多示例中都已经使用过它了,现在来看看它的定义:

    剑行者
  • Flutter跨平台移动端开发丨顶部导航栏 TabBar Widget

    支持左右滑动切换、不限 item 数量的 tabbar 是分类信息列表展示必不可少的组件,在 flutter 中可通过 AppBar + TabBar + P...

    码脑
  • 微信小程序入门《四》实例:导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义。 这里设置导航,背景黑色,文字白色,文字内容测...

    极乐君
  • 03_iOS导航栏的正确隐藏方式

    在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到...

    用户1219438
  • 【Flutter 专题】75 图解基本 TabBar 标签导航栏 (一)

    分析源码可得,TabBar 与 TabBarView 是配对使用的,其对应的 Tab 数量必须相同;其中 TabBar 中提供了众多相关指示器属性,...

    阿策小和尚
  • Flutter入门(四)

    自定义的好处是可以在addListener中增加监听,通过setState修改状态

    用户3112896
  • Flutter完整开发实战详解(三、 打包与填坑篇)

    作为系列文章的第三篇,继篇章一和篇章二之后,本篇将为你着重展示:Flutter开发过程的打包流程、APP包对比、细节技巧与问题处理。本篇主要描述的Flutter...

    GSYTech

扫码关注云+社区

领取腾讯云代金券