Flutter中TabBarView与PageView该如何选择

已于 2024-04-17 17:12:56 修改
阅读量1.8k 收藏 1
点赞数 1
分类专栏： Flutter学习 文章标签： flutter TabBarView PageView TabBar
于 2021-07-06 10:29:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adojayfan/article/details/118514198
版权

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

区别

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

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

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

旺仔大牛
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flutter TabBarView和PageView的页面状态保存问题
zhumj_zhumj的专栏
10-23 5257
我们在使用TabBar或者BottomNavigationBar的时候，都会配合使用 TabBarView和PageView 进行页面展示，但如果不做特别处理的话，我们会发现在每次切换页面之后，页面都会重新刷新（比如一个列表页面，拉到最后一条数据，然后跳转到其它Tab再跳转回来，列表又变成从第一条数据开始展示），实在是很不友好。这里有两种办法解决： PageStorageKey Automati...
flutter 搭建首页框架 Scaffold 与 PageView 实现
11-17
在 Flutter 开发中，构建用户界面是至关重要的一步。`Scaffold` 和 `PageView` 是两个核心组件，用于搭建应用程序的基本结构和实现页面滑动效果。本文将深入讲解这两个组件的功能、用法以及如何结合它们来搭建一个...
flutter TabBar+PageView联动
最新发布
2401_85388777的博客
07-04 603
以及系统的进阶学习视频资料分享给大家。（包括Java在Android开发中应用、APP框架知识体系、高级UI、全方位性能调优，NDK开发，音视频技术，人工智能技术，跨平台技术等技术资料），希望能帮助到你面试前的复习，且找到一个好的工作，也节省大家在网上搜索资料的时间来学习。**[外链图片转存中…(img-oW77yPlU-1720087036733)]
【Flutter】AppBar、TabBar和TabBarView
一以贯之的努力 不得懈怠的人生
05-26 855
介绍了AppBar、TabBar和TabBarView组件。
Flutter之TabBar+PageView
小小熊的博客
07-10 3675
Flutter之TabBar+PageView 底部TabBar class PageViewDemo extends StatefulWidget { @override State<StatefulWidget> createState() => _PageViewDemoState(); } class _PageViewDemoState extends State<PageViewDemo> with SingleTickerProviderStat
android tab pageview,flutter TabBar+PageView联动
weixin_39557813的博客
05-27 186
import 'dart:io';import 'package:flutter/services.dart';void main() {runApp(new MyApp());if (Platform.isAndroid) {// 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后，是为了在渲染后进行set赋值，覆盖状态栏，写在渲染之前MaterialApp组件会覆盖掉这个值。Sy...
flutter PageView实现左右滑动切换视图
08-25
PageView 是 Flutter 中的一个重要 Widget，用于实现左右滑动切换视图。本文将详细介绍如何使用 Flutter PageView 实现左右滑动切换视图。 一、PageView 简介 PageView 是 Flutter 中的一个 Widget，用于实现左右...
在Flutter中具有PageView转换效果的示例。-Flutter开发
05-27
最终结果看起来像这样：在Flutter中创建漂亮的PageView视差效果的示例项目。 阅读这是什么？ 最终结果看起来像这样：在Flutter中创建漂亮的PageView视差效果的示例项目。 在此处阅读博客文章。 所有相关的源代码都...
Flutter入门与实战：日期范围选择器
09-17
在本文中，我们将深入探讨 Flutter 开发中的一个关键组件——日期范围选择器。Flutter 是 Google 推出的一款用于构建高性能、美观的原生移动应用程序的开源框架，它使用 Dart 语言编写，支持快速开发和热重载功能。...
flutter非常丝滑的组件(pageView的页面状态保持,完美的appBar,点击按钮复制到剪切版,照片保存到相册,tabBar切换）
weixin_46376302的博客
06-21 767
前言 今天是痛苦与快乐并存的一天，痛苦是因为今天在想一些东西的时候，头都想炸了，快乐的是因为学了非常多的东西，解决了很多的问题，今天我就把自己在工作中用到的一些东西分享出来，供大家学习 pageView的页面状态保持 TabBar顶部隐藏,下滑渐现 点击按钮，复制文字 将本地照片或者是将网络照片保存到手机相册中 TabBar的切换加滑动切换效果 一、PageView的页面状态保持？ PageView( scrollDirection: Axis.h
flutter系列之自定义TabBar与PageView联动
shving的专栏
09-12 6166
TabBar + PageView可以说是flutter开发中的经典组合，所以谷歌也充分考虑了这一点，为开发者提供了非常轻松便捷的方式就可以实现TabBar和PageView的联动效果。说实话，原生开发TabBar + PageView还是比较麻烦的，但是flutter几行代码就可以搞定，而且还自带动画效果，还提供了很高的自定义方式。 经典的TabBar是这样的： 代码如下： TabBar( labelColor: Colors.blue,
Flutter PageView/TabBarView等控件保存状态的问题解决方案
Dream It Possible
09-10 3699
PageView + BottomNavigationBar 或者 TabBarView + TabBar 的时候大家会发现当切换到另一页面的时候, 前一个页面就会被销毁, 再返回前一页时, 页面会被重建, 随之数据会重新加载, 控件会重新渲染 带来了极不好的用户体验， 跟原生的Pager 显示的效果不太一样。通过 PageStorage 这种方式重新进入页面，页面其实是重新开始build，但是会根据 didChangeDependencies 里面的数据来初始化。4.3 读取state。
Flutter TabBarView示例
海阔天空
05-18 319
Flutter TabBarView示例
Flutter: PageView/TabBarView等控件保存状态的问题解决方案 | 掘金技术征文
weixin_33980459的博客
08-17 882
转载请标明出处： juejin.im/post/5b73c3… 本文出自：Wos的主页 前言: 通常在用到 PageView + BottomNavigationBar 或者 TabBarView + TabBar 的时候大家会发现当切换到另一页面的时候, 前一个页面就会被销毁, 再返回前一页时, 页面会被重建, 随之数据会重新加载, 控件会重新渲染 带来了极不好的用户体验. 下面是一些解决...
Flutter TabBar TabBarView
热门推荐
老孟Flutter
12-17 1万+
TabBar 是一排水平的标签，可以来回切换，效果图： 属性 说明 tabs 一系列标签控件 controller 标签选择变化控制器 isScrollable 是否可滚动，默认false indicatorColor 指示器颜色 indicatorWeight 指示器粗细 indicator 指示器，可自定义形状等样式 indicatorSize 指示器...
Flutter 使用pageView 完成底部导航功能
qq_22049619的博客
01-09 649
// 这个是底部四组件导航的页面 import 'package:flutter/material.dart'; // 导入四个页面部分 // 主页 import '../pages/HomePage.dart'; // 我的 import '../pages/MinePage.dart'; // 搜索 import '../pages/SearchPage.dart'; // 旅拍 import...
使用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、付费专栏及课程。

余额充值