Flutter TabBar、TabBarView的使用

最新推荐文章于 2025-03-09 19:25:30 发布

yechaoa

最新推荐文章于 2025-03-09 19:25:30 发布

阅读量1.9w

点赞数 6

分类专栏： Flutter Flutter 开发实战文章标签： flutter TabBar TabBarView TabController flutter SingleTickerProviderStateMixin

本文链接：https://blog.youkuaiyun.com/yechaoa/article/details/90482127

版权

Flutter 开发实战同时被 2 个专栏收录

17 篇文章 ¥9.90 ¥99.00

订阅专栏

Flutter

42 篇文章

订阅专栏

本文介绍了如何在Flutter中使用TabBar和TabBarView，包括它们的关系、参数、联动原理以及如何实现点击标签时动态更新内容。通过自定义Controller实现TabBar和TabBarView的联动，并提供了示例代码和完整项目链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

效果：

在这里插入图片描述

说实话，这个效果实现起来并没有我想象中的那么简单，demo跟实际开发差的还是蛮大的，一方面是学习成本，要查看源码，另一方面就是页面的布局，层级嵌套的太深了。。

简介

TabBar和TabBarView到底是什么关系呢，简而言之，TabBar就是导航栏，TabBarView就是导航栏当前所对应的内容区。

TabBar

简单看一下TabBar的参数，重要或常用的会有注释

  const TabBar({
    Key key,
    @required this.tabs,//子标签
    this.controller,//控制器
    this.isScro

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yechaoa

关注关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
6
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

flutter TabBar 实战使用技巧

智玲君

01-15

1526

Tabbar属性介绍： const TabBar({ Key key, @required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个 this.controller, this.isScrollable = false,//是否需要滚动，true为需要 this.indicatorColor,//选中下划线的颜色 this.indicatorWeight = 2.0,//选中下划线的高度，值越大高度越高，默认为2 thi

在 Flutter 实现下拉刷新、上拉加载更多和一键点击回到顶部的功能

Chloeeeeeeee的博客

02-11

861

在 Flutter 中，实现下拉刷新、上拉加载更多和一键点击回到顶部的功能，通常会结合使用 `RefreshIndicator`、`ListView` 和 `ScrollController` 来实现这些交互效果。

6 条评论您还未登录，请先登录后发表或查看评论

【自学Flutter】18 TabBar、TabBarView、BottomAppBar 导航栏和浮动按钮的使用

2401_84046895的博客

04-01

750

下面是辛苦给大家整理的学习路线《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）下面是辛苦给大家整理的学习路线。

Flutter 中 TabBar 与 TabBarView 的深度解析与实战应用

最新发布

m0_57836225的博客

03-09

1151

TabBar 是一个水平排列的导航栏，用于展示多个可切换的标签。用户通过点击标签，实现不同页面内容的切换。在 Flutter 中，TabBar 通常与 TabBarView 搭配使用，共同完成多页面切换功能。如果默认的 Tab 样式不能满足设计需求，可以对 Tab 进行自定义。@overridelength: 3,title: Text('自定义Tab样式示例'),indicatorColor: Colors.blue, // 指示器颜色。

flutter tabbar+tabbarview使用

ZhangWes的博客

06-30

843

1.属性介绍 const TabBar({ Key key, @required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个 this.controller, this.isScrollable = false,//是否需要滚动，true为需要 this.indicatorColor,//选中下划线的颜色 this.indicatorWeight = 2.0,//选中下划线的高度，值越大高度越高，默认为2 this.i

Flutter TabBar TabBarView

老孟Flutter

12-17

1万+

TabBar 是一排水平的标签，可以来回切换，效果图：属性说明 tabs 一系列标签控件 controller 标签选择变化控制器 isScrollable 是否可滚动，默认false indicatorColor 指示器颜色 indicatorWeight 指示器粗细 indicator 指示器，可自定义形状等样式 indicatorSize 指示器...

Flutter 之 TabBar & TabBarView

augfun的博客

11-18

1192

直接上图上代码，代码部分有注释，莫有的自己百度（留言也可以）；效果图.png class TestDemo extends StatefulWidget { @override State<StatefulWidget> createState() { return _TestDemoState(); } } class _TestDemoState extends State<TestDemo> with SingleTickerProvi

【Flutter】AppBar、TabBar和TabBarView

一以贯之的努力不得懈怠的人生

05-26

2340

介绍了AppBar、TabBar和TabBarView组件。

Flutter TabBar与TabBarView联动及获取当前点击栏目索引

yimiyangguang的专栏

07-07

678

上面方法进过实际测试，可以实现点击和滑动时获取当前栏目的索引，以便根据索引执行加载当前页面的栏目数据的业务逻辑。实现一体联动有两种实现方式：使用默认控制器(DefaultTabController)和自定义控制器。本文主要介绍在使用DefaultTabController下，实现获取点击当前栏目的索引，包括点击。都是谷歌flutter官方组件库——Material组件库提供的组件，其中。

flutter TabBar+PageView联动

2401_89317354的博客

01-24

287

null) {//判断是哪一个切换。new TabTitle(‘推荐’, 10),new TabTitle(‘热点’, 0),new TabTitle(‘社会’, 1),new TabTitle(‘娱乐’, 2),new TabTitle(‘体育’, 3),new TabTitle(‘美文’, 4),

Flutter-TabBar的使用说明

热门推荐

lvsonghai的博客

02-18

2万+

Flutter-TabBar的使用说明在AppBar中有一个非常重要的Widget，这个Widget就是bottom，bottom是一个抽象类PreferredSizeWidget，可以看到一共有5个Widget继承了它：这里讲解使用TabBar这一种情况 TabBar的使用需要结合AppBar，现在给出AppBar的使用说明地址：AppBar的使用说明 TabBar的定义 TabBar在使...

Flutter基础控件：TabBar、TabBarView

青蛙不吃草

07-29

2248

TabBar、TabBarViewTabBar属性 TabBar属性 const TabBar({ Key key, @required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个 this.controller, this.isScrollable = false,//是否需要滚动，true为需要 this.indicatorColor,//选中下划线的颜色 this.indicatorWeight = 2.0,//选中下划线的

Flutter TabBar and TabBarView控件

华山论码

12-28

531

TabBar and TabBarView效果 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main(List<String> args) { runApp(app()); } class app extends StatelessWidget { const app({Key key}) : super(key: key); @override

flutter body 中使用TabBar和TabBarView

weixin_47985673的博客

06-07

794

写这篇文章的原因是因为我在开发过程中遇到了需要再tab上面有其他样式的的内容，但是在appBar中又无法做（个人不会写），百度了查了一天半，才根据一个属性完成了想要的效果，所以才有了这篇问题。' 我的走的太快，灵魂都跟不上了。低头需要有勇气，抬头需要有底气。事事有回应,件件有着落,凡事有交代。isScrollable: true, //多个按钮可以滑动。

Flutter 中的 TabBarView 小部件：全面指南

smileKH的博客

05-23

1709

TabBarView是Flutter材料设计库中的一个组件，它显示与TabBar中的选项卡相对应的页面。当用户点击TabBar上的一个选项卡时，TabBarView会显示对应的页面。TabBarViewcontroller：用于控制TabBarView的。children：一个包含将要显示的页面的列表。physics：决定TabBarView的滑动物理效果。],physics: NeverScrollableScrollPhysics(), // 禁止滑动。

Flutter TabBarView组件

xiangxiongfly

06-21

1012

TabBarView 是 Material 组件库中提供了 Tab 布局组件，通常和 TabBar 配合使用。TabBarView封装了PageView，使用起来非常简单。TabBarView TabBar 简单使用

37、Flutter之TabBarView组件

wywinstonwy的专栏

01-18

7882

TabBarView 是 Material 组件库中提供了 Tab 布局组件，通常和 TabBar 配合使用。 TabBarView TabBarView 封装了 PageView，它的构造方法很简单 TabBarView({ Key? key, required this.children, // tab 页 this.controller, // TabController this.physics, this.dragStartBehavior = DragStartBe

Flutter TabBarView示例

海阔天空

05-18

362

Flutter TabBarView示例

flutter TabBar pageview组合使用

05-19

在Flutter中，可以通过将TabBar和PageView组合在一起来创建具有选项卡的页面滚动视图。下面是一个简单的示例，演示如何使用TabBar和PageView来创建具有选项卡的页面滚动视图。首先，我们需要在代码中导入必要的库： ```dart import 'package:flutter/material.dart'; ``` 然后，我们可以创建一个StatefulWidget，其中包含一个TabBar和一个PageView。在这个示例中，我们将创建一个具有三个选项卡的滚动视图，每个选项卡都包含一个文本控件。 ```dart class MyTabbedPage extends StatefulWidget { @override _MyTabbedPageState createState() => _MyTabbedPageState(); } class _MyTabbedPageState extends State<MyTabbedPage> { final List<Tab> myTabs = <Tab>[ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ]; @override Widget build(BuildContext context) { return DefaultTabController( length: myTabs.length, child: Scaffold( appBar: AppBar( title: Text('My Tabbed Page'), bottom: TabBar( tabs: myTabs, ), ), body: TabBarView( children: myTabs.map((Tab tab) { return Center(child: Text(tab.text)); }).toList(), ), ), ); } } ``` 在这个示例中，我们首先定义了一个包含三个选项卡的TabBar。然后，我们使用DefaultTabController来指定选项卡的数量，并将TabBar包装在AppBar中。最后，我们使用TabBarView来构建页面视图，并将一个文本控件放在每个选项卡中间。现在，我们可以将MyTabbedPage添加到我们的应用程序中： ```dart void main() { runApp(MaterialApp( title: 'My App', home: MyTabbedPage(), )); } ``` 这样，我们就可以创建一个具有选项卡的页面滚动视图，用户可以在不同的选项卡之间滚动并查看不同的页面内容。