Flutter中TabBarView与PageView该如何选择

已于 2024-04-17 17:12:56 修改
阅读量2.1k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Flutter学习 文章标签： flutter TabBarView PageView TabBar
于 2021-07-06 10:29:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/adojayfan/article/details/118514198
TabBarView主要用于展示不同UI，配合TabBar实现模块切换，如微信的四大模块。而PageView则适用于展示内容相同但数据不同的场景，如今日头条的新闻展示，并支持左右滑动。PageView也可用于视频上下滑动的容器，如抖音。

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

TabBarView和PageView都可以用来当作导航切换的容器。
但还是有一些使用的区别。

区别

TabBarView主要展示不同ui的容器，配合TabBar导航，点击tab时，切换到不同的ui界面。比如微信，有微信、通讯录、发现、我 4大不同的模块。
在这里插入图片描述

PageVieiw主要是展示相同页面的容器，比如今日头条app首页，根本不同的新闻类型展示不同的新闻，但页面的布局是一样的。另外PageView还支持左右滑动，可以和TabBar做联动。
在这里插入图片描述

PageView也可以做整体的滑动容器，比如抖音的视频上下滑动。

flutter TabBar+PageView联动
2401_85388777的博客
07-04 989
以及系统的进阶学习视频资料分享给大家。（包括Java在Android开发中应用、APP框架知识体系、高级UI、全方位性能调优，NDK开发，音视频技术，人工智能技术，跨平台技术等技术资料），希望能帮助到你面试前的复习，且找到一个好的工作，也节省大家在网上搜索资料的时间来学习。**[外链图片转存中…(img-oW77yPlU-1720087036733)]
Flutter TabBar与TabBarView联动及获取当前点击栏目索引
yimiyangguang的专栏
07-07 721
上面方法进过实际测试，可以实现点击和滑动时获取当前栏目的索引，以便根据索引执行加载当前页面的栏目数据的业务逻辑。实现一体联动有两种实现方式：使用默认控制器(DefaultTabController)和自定义控制器。本文主要介绍在使用DefaultTabController下，实现获取点击当前栏目的索引，包括点击。都是谷歌flutter官方组件库——Material组件库提供的组件，其中。
Flutter之TabBar+PageView
小小熊的博客
07-10 3777
Flutter之TabBar+PageView 底部TabBar class PageViewDemo extends StatefulWidget { @override State<StatefulWidget> createState() => _PageViewDemoState(); } class _PageViewDemoState extends State<PageViewDemo> with SingleTickerProviderStat
Flutter TabBar / TabBarView 详解
最新发布
帅次的博客
05-07 3260
在 Flutter 中，TabBar 和 TabBarView 组件用于实现多个页面的标签导航，类似于 Android 的 ViewPager + TabLayout。TabBar 用于显示标签页，TabBarView 用于切换不同的页面内容。它们通常与 DefaultTabController 结合使用，实现流畅的页面切换效果。
flutter系列之自定义TabBar与PageView联动
shving的专栏
09-12 6806
TabBar + PageView可以说是flutter开发中的经典组合，所以谷歌也充分考虑了这一点，为开发者提供了非常轻松便捷的方式就可以实现TabBar和PageView的联动效果。说实话，原生开发TabBar + PageView还是比较麻烦的，但是flutter几行代码就可以搞定，而且还自带动画效果，还提供了很高的自定义方式。 经典的TabBar是这样的： 代码如下： TabBar( labelColor: Colors.blue,
Flutter PageView/TabBarView等控件保存状态的问题解决方案
Dream It Possible
09-10 4830
PageView + BottomNavigationBar 或者 TabBarView + TabBar 的时候大家会发现当切换到另一页面的时候, 前一个页面就会被销毁, 再返回前一页时, 页面会被重建, 随之数据会重新加载, 控件会重新渲染 带来了极不好的用户体验， 跟原生的Pager 显示的效果不太一样。通过 PageStorage 这种方式重新进入页面，页面其实是重新开始build，但是会根据 didChangeDependencies 里面的数据来初始化。4.3 读取state。
flutter PageView实现左右滑动切换视图
08-25
PageView 是 Flutter 中的一个重要 Widget，用于实现左右滑动切换视图。本文将详细介绍如何使用 Flutter PageView 实现左右滑动切换视图。 一、PageView 简介 PageView 是 Flutter 中的一个 Widget，用于实现左右...
彻底解决Flutter自带TabBarView的众多bug
weixin_34295316的博客
05-17 3789
直接放源码 import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; class FixTabBarView extends StatefulWidget { const FixTabBarView({ Key key, @required this.children, ...
Flutter无限循环滑动的PageView
吃狗屎糖，走狗屎运...
12-02 7306
Flutter循环滑动的PageView序言准备新的数据源定时切换滑动冲突 序言 Android原生里一般会使用ViewPager来实现Banner区域，当然Flutter中的PageView也可以实现类似的效果，今天就来撸一把循环滑动的PageView。 在Android中想要实现循环滑动的ViewPager，最常用的方法是，在原数据源的基础上，通过前后补位来操作：即准备新的数据集合list , 第一个位置插入原数据中的最后一个元素、最后一个位置插入原数据中的第一个元素，Flutter中PageView实
android tab pageview,flutter TabBar+PageView联动
weixin_39557813的博客
05-27 251
import 'dart:io';import 'package:flutter/services.dart';void main() {runApp(new MyApp());if (Platform.isAndroid) {// 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后，是为了在渲染后进行set赋值，覆盖状态栏，写在渲染之前MaterialApp组件会覆盖掉这个值。Sy...
Flutter Material Components Widgets之TabBar与TabBarView
lmjssjj的专栏
12-12 856
TabBar 水平选择标签。 1、通常创建为AppBar的AppBar.bottom部分并与TabBarView结合使用。 2、如果TabBar 未提供TabController，则必须提供DefaultTabController作为父widget。选项卡控制器的TabController.length必须等于选项卡列表的长度。 构造函数 const TabBar({ Key key, ...
flutter TabBarView和PageView的页面状态保存问题
zhumj_zhumj的专栏
10-23 5475
我们在使用TabBar或者BottomNavigationBar的时候，都会配合使用 TabBarView和PageView 进行页面展示，但如果不做特别处理的话，我们会发现在每次切换页面之后，页面都会重新刷新（比如一个列表页面，拉到最后一条数据，然后跳转到其它Tab再跳转回来，列表又变成从第一条数据开始展示），实在是很不友好。这里有两种办法解决： PageStorageKey Automati...
flutter非常丝滑的组件(pageView的页面状态保持,完美的appBar,点击按钮复制到剪切版,照片保存到相册,tabBar切换）
weixin_46376302的博客
06-21 1011
前言 今天是痛苦与快乐并存的一天，痛苦是因为今天在想一些东西的时候，头都想炸了，快乐的是因为学了非常多的东西，解决了很多的问题，今天我就把自己在工作中用到的一些东西分享出来，供大家学习 pageView的页面状态保持 TabBar顶部隐藏,下滑渐现 点击按钮，复制文字 将本地照片或者是将网络照片保存到手机相册中 TabBar的切换加滑动切换效果 一、PageView的页面状态保持？ PageView( scrollDirection: Axis.h
【Flutter】AppBar、TabBar和TabBarView
一以贯之的努力 不得懈怠的人生
05-26 2468
介绍了AppBar、TabBar和TabBarView组件。
Flutter 使用 TabBarView 和 PageView 时保持页面状态：AutomaticKeepAliveClientMixin
qq_52871405的博客
09-18 1998
在 Flutter 开发中，TabBarView 和 PageView 是常用的多页面视图组件，它们支持懒加载功能，即用户在切换页面时，只有当前可见的页面会被构建，其他页面不会被加载以节省资源。然而，这也会导致一个常见的问题：当我们从一个页面切换到另一个页面并返回时，先前的页面可能会被销毁并重新构建，这样页面的滚动位置、表单数据等状态就会丢失。通过使用 AutomaticKeepAliveClientMixin，我们可以确保当用户切换到其他页面并返回时，页面的状态（如列表滚动位置、用户输入等）不会丢失。
Flutter TabBarView示例
海阔天空
05-18 377
Flutter TabBarView示例
使用flutter的tab和pageview
05-19
使用 Flutter 的 TabBar 和 PageView 可以轻松实现多个页面切换的效果，以下是一个简单的示例： ```dart class MyTabbedPage extends StatefulWidget { @override _MyTabbedPageState createState() => _MyTabbedPageState(); } class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin { final List<Tab> myTabs = <Tab>[ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ]; TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(vsync: this, length: myTabs.length); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('My Tabbed Page'), bottom: TabBar( controller: _tabController, tabs: myTabs, ), ), body: TabBarView( controller: _tabController, children: myTabs.map((Tab tab) { final String label = tab.text.toLowerCase(); return Center( child: Text( 'This is the $label tab', style: const TextStyle(fontSize: 36), ), ); }).toList(), ), ); } } ``` 在这个示例中，我们创建了一个 `_MyTabbedPageState` 类来管理 TabBar 和 PageView 的状态。在 `initState` 中，我们创建了一个 `TabController` 对象，将其与 `TabBar` 和 `TabBarView` 绑定。在 `dispose` 中，我们释放了 `TabController` 对象。在 `build` 方法中，我们创建了一个 `Scaffold`，其中包含一个 `AppBar` 和一个 `TabBarView`。`TabBarView` 包含了一个 `children` 列表，其中每个元素都是一个 `Center` widget，包含一个 `Text` widget，用于显示当前选中的标签。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值