开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

正确的TabBarView用法

TabBarView是Flutter中的一个控件，用于创建一个带有选项卡的视图，每个选项卡对应一个子视图。它通常与TabBar一起使用，TabBar用于显示选项卡的标签。

TabBarView的正确用法如下：

导入所需的包：

import 'package:flutter/material.dart';

创建一个TabBarView控件，并将其作为Scaffold的body属性：

TabBarView(
  children: <Widget>[
    // 子视图1
    Container(
      child: Text('子视图1'),
    ),
    // 子视图2
    Container(
      child: Text('子视图2'),
    ),
    // 子视图3
    Container(
      child: Text('子视图3'),
    ),
  ],
)

将TabBarView与TabBar进行关联，以实现选项卡切换：

DefaultTabController(
  length: 3, // 选项卡数量
  child: Scaffold(
    appBar: AppBar(
      title: Text('TabBarView示例'),
      bottom: TabBar(
        tabs: <Widget>[
          Tab(text: '选项卡1'),
          Tab(text: '选项卡2'),
          Tab(text: '选项卡3'),
        ],
      ),
    ),
    body: TabBarView(
      children: <Widget>[
        // 子视图1
        Container(
          child: Text('子视图1'),
        ),
        // 子视图2
        Container(
          child: Text('子视图2'),
        ),
        // 子视图3
        Container(
          child: Text('子视图3'),
        ),
      ],
    ),
  ),
)

TabBarView的优势：

提供了简单易用的选项卡切换功能。
可以方便地与TabBar进行关联，实现选项卡与子视图的同步切换。

TabBarView的应用场景：

在需要显示多个子视图，并且需要通过选项卡进行切换的界面中使用。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云Flutter开发平台：https://cloud.tencent.com/product/flutter

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

超过百万的StackOverflow Flutter 问题

老孟导读：今天分享StackOverflow上高访问量的20大问题，这些问题给我一种特别熟悉的感觉，我想你一定或多或少的遇到过，有的问题在stackoverflow上有几十万的阅读量，说明很多人都遇到了这些问题，把这些问题整理分享给大家，每期20个，每隔2周分享一次。

03

Flutter 首页必用组件NestedScrollView的示例详解

今天介绍的组件是NestedScrollView，大部分的App首页都会用到这个组件。

04

Flutter 首页必用组件NestedScrollView

老孟导读：昨天Flutter 1.17版本重磅发布，新的版本主要是优化性能、修复bug，有人觉得此版本毫无亮点，但也从另一方面体现了Flutter目前针对移动端已经较为完善，想了解具体内容，文末有链接，如果你想升级到最新版本，建议慎重，有些人升级后项目无法运行。

01

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

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

02

【Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )

Flutter 中的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ;

04

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

分析源码可得，TabBar 与 TabBarView 是配对使用的，其对应的 Tab 数量必须相同；其中 TabBar 中提供了众多相关指示器属性，且 TabBar 与 TabBarView 上下拖拽方式区分设置，互不影响；

03

Flutter NestedScrollView实现的一个经典滑动折叠头部图片的效果

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

01

Flutter入门指北（Part 8）之Sliver 组件及NestedScrollView

在上节最后，给小伙伴们展示了 SliveGrid 和 SliverFixedExtentList 的用法，基本上和 GridView 和 ListView 的用法差不多，所以这边就不多讲这两个部件了。

03

flutter：禁用 tabbar手势教程

在手机上，tabbar是很常见的导航方式，在flutter中我们通过TabBar、TabController和TabBarView轻松实现效果。

03

Flutter进阶质感设计之标签栏

在质感设计的控件中，有一个显示水平的一行选项卡，通常作为AppBar控件的一部分创建，并与TabBarView控件结合使用。

02

Flutter中的AppBar、TabBar和TabController——顶部切换栏是如何实现的

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

02

Flutter可滑动组件

移动端数据量比较大时，一般都是通过列表来进行展示的，比如商品数据、聊天列表、通信录、朋友圈等。

03

Flutter基础widgets教程-TabBarView篇

1 TabBarView Tab页的内容容器，Tab页内容一般处理为随选项卡的改变而改变。 2 构造函数 TabBarView({ Key key, @required this.children,//Tab页内容组件的数组集合 this.controller,//TabController对象 this.physics, }) 3 常用属性 3.1 controller：指定视图的控制器 controller: 1, 3.2 children：视图组件的child为一个列

Flutter基础widgets教程-TabBarView篇

1 TabBarView Tab页的内容容器，Tab页内容一般处理为随选项卡的改变而改变。 2 构造函数 TabBarView({ Key key, @required this.children,//Tab页内容组件的数组集合 this.controller,//TabController对象 this.physics, }) 3 常用属性 3.1 controller：指定视图的控制器 controller: 1, 3.2 children：视图组件的child为一个列

小Q项目框架搭建及会动的Tabbar未完待续，持续更新中

开篇小Q项目的大体思路有了，icon我也涉及好了，虽然不是100%的漂亮，但是也能凑合看得过去，我上传一个大家一起欣赏一下 Icon-155.png 不是特别丑吧，但是安装后，加上圆角可能有点不漂亮

04

Flutter实现顶部导航栏功能

在这里只写顶部导航栏的实现，底部的可以参照我之前的文章 tabbar导航栏的实现

03

Flutter基础widgets教程-SizedBox篇

1 SizedBox 两种用法：一是可用来设置两个widget之间的间距，二是可以用来限制子组件的大小 2 构造函数 SizedBox({ Key key, this.width, this.height, Widget child }) 3 常用属性 3.1 width：SizedBox的宽 width: 250, 3.2 height：SizedBox的高 height: 250, 3.3 child：SizedBox的子widget child: Text("

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

Flutter接触时间不长，也就是刚刚到门口，还不算入门，由于国内的资料相对较少，官网又有时打不开，所有自己从头搭建了个基础框架，把常用的Widget组件的构造函数及常用属性做了简单的整理，方便后期查找。同时由于是业余时间在更新，所以现在只更新了60多种Widget的用法，后期还在更新。

13.Flutter学习之路AppBar实现顶部tab

接下来我们来看一下我们的如何使用DefaultTabController+Tab+AppBar实现顶部Tab 使用DefaultTabController时，我们应该注意的是，需要将其放在MaterialApp里，Scaffold的外层。

01

React Native 实现基于react-native-tab-navigator库Tab切换封装

react-native-tab-navigator是一款Tab切换的库，细心的读者可能注意到了对于TabNavigator.Item选项卡部分，代码功能上基本上是重复的，对此，我们能不能对这种有相同

06

Flutter实现页面切换后保持原页面状态的3种方法

在Flutter应用中，导航栏切换页面后默认情况下会丢失原页面状态，即每次进入页面时都会重新初始化状态，如果在initState中打印日志，会发现每次进入时都会输出，显然这样增加了额外的开销，并且带来了不好的用户体验。在正文之前，先看一些常见的App导航，以喜马拉雅FM为例:

03

Flutter 自定义 TabBar

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

02

Flutter自定义 TabBar

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

04

Flutter第4天--基础控件(下)+Flex布局详解

Flutter七日游第四天：2018-12-19 天气：晴朗零、前言最近有些人问我怎么学的,操作这么6，有没有什么技巧。今天一开始借助Image来给大家说一个分析的小技巧,让你不到30行代码

03

Flutter:让TabBar也保持住状态

使用TabBar同样存在TabBarView重新build的问题，解决方案一样，加一个PageStorageKey：

03

Flutter进阶篇（6）-- PageStorageKey、PageStorageBucket和PageStorage使用详解

本文所讲到的文件名称为：page_storage.dart，源码存放在本地的路径为：Flutter安装路径/packages/flutter/lib/src/widgets/page_storage.dart。

03

Flutter | 容器组件

EdgeInsetsGeometry 是一个抽象类，开发中，我们一般都使用 EdgeInsets 类，他是 EdgeInsetsGeometry 的子类，定义了一下设置填充的方法

01

Swift开发：自定义标签栏UITabBarController (Swift项目开始的第一步)

自定义UITabbarController进而自定义UITabbar，这通常会是一个iOS项目开始的重要环节。在Swift的学习过程中，个人感觉虽说两种语言的相似度很大，但是Swift依然在代码风格上

07

Flutter组件——Tabbar

Tabar使用，设置indicator的样式，长短，设置tab选中和未选中的样式，根据数组创建Tabbar。

04

Flutter基础组件学习–仿写美呗官方小程序界面

–ScaffoldMaterial Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

01

【Flutter 专题】126 图解自定义两侧对齐 ACETabBar 标签导航栏

和尚在实践学习过程中，需要把 TabBar 标签栏默认居左，而 TabBar 默认是居中状态；和尚借此机会学习一下 TabBar 源码，稍微调整一下对齐方式；

09

【-Flutter 探索-】AutomaticKeepAliveClientMixin 保持 State 状态

@张风捷特烈 2020.12.18 未允禁转我的公众号:编程之王联系我---- ~ END ~

03

Flutter基础widgets教程-SizedOverflowBox篇

1 SizedOverflowBox SizedOverflowBox主要的布局行为有两点： 1 尺寸部分。通过将自身的固定尺寸，传递给child，来达到控制child尺寸的目的；undefined 2 超出部分。可以突破父节点尺寸的限制，超出部分也可以被渲染显示，与OverflowBox类似。 2 构造函数 SizedOverflowBox({ Key key, @required this.size, this.alignment = Alignment.center,

Flutter实现底部导航栏

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

03

Flutter基础widgets教程-OverflowBox篇

1 OverflowBox 对其子项施加不同约束的widget，它可能允许子项溢出父级 2 构造函数 OverflowBox({ Key key, this.alignment = Alignment.center, this.minWidth, this.maxWidth, this.minHeight, this.maxHeight, Widget child, }) 3 常用属性 3.1 alignment：对齐方式 alignment:Alig

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

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

02

Flutter基础widgets教程-Transform篇

1 Transform 在绘制子widget之前应用转换的widget 2 构造函数 Transform({ Key key, @required this.transform, this.origin, this.alignment, this.transformHitTests = true, Widget child, }) 3 常用属性 3.1 origin：指定子组件做平移、旋转、缩放时的中心点 origin: Offset(50, 50), 3.2

Flutter 顶部TabBar

需求是这样的，本来都想自定义TabBar，没有想到TabBar原生的就支持这个方式,只需要设置以下式样就能达到效果了

05

Flutter 空安全的糖果罐

Fluter 2.0 已经发布了一段时间了，其中一项就是包含 Dart 2.12 的稳定版，完全支持空安全声明。作为一个进步的 Flutter 组织 , 组织的小伙伴也在第一时间支持了空安全。

01

Flutter 构建完整应用手册-设计基础知识顶

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

01

【Flutter Widgets大全】电子书开源

【Flutter Widgets 大全】为 Flutter 老孟网站项目，共收录 330 多个 Widgets，此电子书并不适合入门（一个一个组件学习），适合当作手册，需要的时候进行查阅。

01

Flutter完整开发实战详解(七、深入布局原理)

作为系列文章的第七篇，本篇主要在前文的基础上，再深入了解 Widget 和布局中的一些常识性问题。

02

Flutter入门（四）

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

02

Flutter lesson 7: Flutter组件之基础组件（三）

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

05

Flutter中的抽屉组件Drawer

1. decoration 装饰。可用于设置背景颜色和图片，值的类型为BoxDecoration；

03

Flutter SliverAppBar全解析，你要的效果都在这了！

SliverAppBar 类似于Android中的CollapsingToolbarLayout，可以轻松实现页面头部展开、合并的效果。与AppBar大部分的属性重合，相当于AppBar的加强版。

03

React Native导航器之react-navigation使用

在上一节Navigation组件，我们使用系统提供的导航组件做了一个跳转的例子，不过其实战能力不强，这里推荐一个超牛逼的第三方库：react-navigation。在讲react-navigation之前，我们先看一下常用的导航组件。导航控件常见的导航主要分为三种： 1.StackNavigator ：类似于普通的Navigator，屏幕上方导航栏 2.TabNavigator：obviously, 相当于iOS里面的TabBarController，屏幕下方标签栏 3.DrawerNavi

07

Flutter基础(二)

上面的runApp函数接受给定的Widget并使其成为widget树的根，框架强制根widget覆盖整个屏幕。所以官方不推荐把Widget层的控件来作为根控件，而是以MaterialApp或者WidgetApp作为父节点，上面的MyApp使用build函数构建了一个MaterialApp，将一个Scaffold脚手架包裹在里面，Scaffold显示的才是整个页面

03

Flutter容器类组件

⚠️注意， Flutter官方并没有对Widget进行如此划分。中文版《Flutter实战》对其分类主要是方便讨论和对Widget功能区分记忆。

04

Flutter 创建一个很酷的 Booking App UI

这是一个非常酷的项目，您将在其中学习如何实现标签栏、具有水平滚动的列表视图以及如何创建底部Flutter 中的导航栏，所以不用多说，让我们开始吧。

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭