专栏首页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 条评论
登录 后参与评论

相关文章

  • Flutter 初体验

    Flutter的横空出世,很大程度上降低了移动应用的开发成本;我是一名苦逼的iOS开发者,兼职写点Android开发,对Flutter的出现比一般人要敏感很多,...

    Bison
  • 源码分享-一个帮助flutter开发者快速上手的app

    Flutter接触时间不长,也就是刚刚到门口,还不算入门,由于国内的资料相对较少,官网又有时打不开,所有自己从头搭建了个基础框架,把常用的Widget组件的构造...

    青年码农
  • Flutter完整开发实战详解(二、 快速开发实战篇)

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

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

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

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

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

    吴老师
  • Flutter跨平台移动端开发丨顶部导航栏 TabBar Widget

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

    码脑
  • Flutter跨平台移动端开发

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

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

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

    GSYTech
  • Flutter跨页面改变BottomNavigationBar选中下标

    ###### 需求是这样的,bottomBar内有A,B,C,D页面,4个页面由tabBar管理显示,当在A页面点击按钮时让TabBar选中B页面展示,通俗来讲...

    前端小tips
  • Flutter 构建完整应用手册-设计基础知识 顶

    这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。 每个配方都是独立的,可以作为参考帮助您构建应用程序。

    南郭先生
  • Flutter NestedScrollView实现的一个经典滑动折叠头部图片的效果

    Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景,如向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 Nes...

    早起的年轻人
  • flutter技术落地使用

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter...

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

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

    陈宇明
  • Flutter入门(四)

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

    用户3112896
  • flutter实现仿boss直聘功能

    Flutter是Google使用Dart语言开发的移动应用开发框架,使用一套Dart代码就能构建高性能、高保真的iOS和Android应用程序,并且在排版、图标...

    砸漏
  • flutter仿boss直聘,一个比较完整的例子(一)

    简介:2年前,RN刚出来时做了个仿拉钩的demo,react-native-lagou. 这次flutter来了,想感受一下,索性用目前flutter的版本写的...

    kimihe
  • Flutter lesson 7: Flutter组件之基础组件(三)

    上一节我们介绍了Row, Column, Image, Text四个基础组件,这一节我们来看看下面几个组件。

    踏浪
  • 使用BottomNavigationBar来定义底部导航栏

    在iOS中,底部导航栏使用UITabBar就可以实现;在Flutter中,类似的效果可以通过BottomNavigationBar这个组件实现。

    拉维
  • Flutter 自定义 TabBar

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

    越陌度阡
  • Flutter第4天--基础控件(下)+Flex布局详解

    张风捷特烈

扫码关注云+社区

领取腾讯云代金券