专栏首页flutter开发者[Flutter Widget] TabBar

[Flutter Widget] TabBar

前言


后台留言说这个Widget没有讲到,好吧今天就把TabBar吧。

TabBar在客户端的表现形式是一般展示在appBar的下面,做同一级别不同类型界面的展示工作。

确实,在平时我们的应用中是非常常见的,所以讲一下也不过分哈。

TabBar


还是首先来你看下构造方法吧

其中只有tabs参数势必须的,其他的参数都会根据你app的主题曲自动设置相应的参数。

那么这个Tab又是什么东西呢?我们还是再来看下Tab的构造方法吧

相比于TabBar,Tab这个WIdget就显得非常简单,他就是一个最基本的组件,我们 可以选择性的填入text,icon或者子Widget。

我们仅仅使用这两个组件就可以显示一个TabBar可以了,但是如果想要做到TabBar与下面内容区域的关联还需要用到TabView这个Widget哦。

TabView实际上就是用来关联Tab与内容区域的一个中间件。

今天我们来看个官方的例子(不要问我为什么用官方例子,我懒啊……)

看个官方例子


官方这个例子能够很好说明下这个TabBar的用法。

首先,我们建立了一个Choice对象,有title和icon两个属性

然后我们初始化List数据,这样我们就拿到了一个长度为6的List数据

然后我们定义了一个内容区域的Widget,并根据传递来的Choice对象来初始化Widget

最后在TabbedAppBarSample Wdiget中,我们通过构建的choices数据创建Tab并且通过TabView关联ChoiceCard,这样一来我们就可以根据下面内容区域的滑动来更新tab的显示或者根据tab选中的变化来更新下面的内容区域了。

那么,还是来看下效果吧:

试一试其他参数

接下来,我们来尝试修改下TabBar选中时的指示器颜色。

我们单单给TabBar加了个 indicatorColor: Colors.red,我们再来看下效果。

可以看到,TabBar的指示器颜色已经变成了红色

那么接下来我们来设置下上面文字来图标选中时和未选中时的颜色

labelColor: Colors.orange, unselectedLabelColor: Colors.white,

我们依旧仅仅给TabBar加上上面的参数再来看下效果

小结


使用TabBar、Tab、TabView可以很方便的实现页签切换效果,在官方这个例子中,把对象、数据初始化和自定义Widget都写在了一个文件中,这样大家看起来可能会比较不好理解,大家可以把这个逻辑都抽离出到单独的文件中再去看就比较好理解了。

我怀疑这个是个坏掉的二维码,分享到朋友圈试试?

本文分享自微信公众号 - flutter开发者(Flutter_Developers),作者:flyou

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-21

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • StatefulWidget与State

    首先来看下StatefulWidget,它是一个抽象类,当然它十分的简单。它和StatelessWidget一样它只有两个方法,都有一个createElemen...

    flyou
  • [Flutter Widget]ExpansionPanelList

    在前面的文章中我们介绍了可以展开的带标题控件ExpansionTile的用法,在文章的最后还是按照惯例给大家留下了一个问题。

    flyou
  • SliverAppBar

    好吧,我们还是来开始看下今天的内容吧。在前面的文章中我们将到了Appbar的用户,它类似于Android中的toolbar,但是熟悉Android开发的童鞋应该...

    flyou
  • 通过 Git 将代码提交到 GitHub(上)

    1 前言 在「利用 SSH 完成 Git 与 GitHub 的绑定」一文中,我们完成了本地 Git 与远程 GitHub 的绑定,这意味着我们已经可以通过 Gi...

    CG国斌
  • Web Workers 介绍

    有时候,我们写的脚本需要执行一些耗时的大计算量的操作。在脚本执行过程中,浏览器会出现冻结用户界面的情况(用户对页面进行操作,但浏览器没有响应)。

    Joel
  • 智能健康行业突破不大,却走向“歪路”

    镁客网
  • 使用React和Node.js制作音乐类App的一次总结

    Peter谭金杰
  • GCC 7和LLVM+Clang+libc++abi 4.0的构建脚本

    之前的版本发完,有空来更新一下之前的gcc和llvm+clang工具链的编译脚本了。其实GCC 7是才release没多久但是llvm 4.0发布其实有一段时间...

    owent
  • SAP Spartacus基于Travis的持续集成

    提交代码到github之后,自动生成pull request: https://github.com/SAP/spartacus/pull/8990#pull...

    Jerry Wang
  • 内存数据库到底有多快?

    并发量太高的应用中(比如10分钟内插入300w条记录),数据库往往难堪重负,在没有银子实现服务器集群/负载均衡/分布式存储的情况下,可以尝试一下把数据库做一个临...

    菩提树下的杨过

扫码关注云+社区

领取腾讯云代金券