首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter TabBarView和BottomNavigationBar页面不会使用SetState刷新

Flutter中的TabBarView和BottomNavigationBar是用于创建多个页面切换的组件。它们可以在同一个屏幕上显示不同的页面,并且可以通过点击底部导航栏或顶部标签栏来切换页面。

在使用TabBarView和BottomNavigationBar时,可以通过使用SetState来刷新页面。SetState是Flutter中的一个方法,用于通知Flutter框架重新构建相关的部件。当需要更新页面内容时,可以调用SetState方法来触发页面的重建。

以下是一个示例代码,演示如何在TabBarView和BottomNavigationBar中使用SetState来刷新页面:

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  List<Widget> _pages = [
    Page1(),
    Page2(),
    Page3(),
  ];

  void _onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBarView and BottomNavigationBar'),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: _onTabTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Page 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Page 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'Page 3',
          ),
        ],
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Page 1'),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Page 2'),
    );
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Page 3'),
    );
  }
}

在上述代码中,我们创建了一个包含三个页面的底部导航栏,每个页面都是一个简单的文本部件。通过点击底部导航栏的不同项,可以切换到对应的页面。当点击底部导航栏时,调用_onTabTapped方法来更新当前选中的页面索引,然后通过SetState方法来触发页面的重建,从而实现页面的刷新。

这是一个简单的示例,你可以根据自己的需求进行修改和扩展。如果需要更复杂的页面刷新逻辑,可以考虑使用状态管理工具如Provider或GetX来管理页面状态。

关于Flutter的TabBarView和BottomNavigationBar的更多信息,你可以参考腾讯云的Flutter开发文档:Flutter开发文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,...第三步:实现首页的顶部导航 首先我们通过配合使用TabBar+TabBarView+AutomaticKeepAliveClientMixin来实现顶部导航(注意:TabBarTabBarView...所以,使用TabBarView+AutomaticKeepAliveClientMixin这种方式既实现了页面状态的保持,又具有类似惰性求值的功能,对于未使用页面状态不会进行实例化,减小了应用初始化时的开销...更新 前面在底部导航介绍了使用IndexedStackOffstage两种方式实现保持页面状态,但它们的缺点在于第一次加载时便实例化了所有的子页面State。...为了进一步优化,下面我们使用PageView+AutomaticKeepAliveClientMixin重写之前的底部导航,其中PageViewTabBarView的实现原理类似,具体选择哪一个并没有强制要求

2.5K30

Flutter 简易新闻项目目标效果对比简介代码代码地址

目标 使用flutter快速开发 Android iOS 的简易的新闻客户端 API使用的是 showapi(易源数据) 加载热门微信文章 效果对比 Android iOS image image...image image image image 简介 这是一个建议的新闻客户端 页面非常简单 通过网络请求加载 分类数据 分类详情数据 (key都在代码里了,轻量使用~) UI上几乎是没有任何特点...使用BottomNavigationBar 分成3个控制器 首页使用DefaultTabController管理内容 相关依赖: http: "^0.11.3" #...final BottomNavigationBarItem item; final AnimationController controller; } 构建当前控制器 当前控制器是Stateful类型,刷新页面...tabs: _list.map((f) => new Tab(text: f.name)).toList()), ), body: new TabBarView

1.3K20

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

本文实例为大家分享了flutter实现不规则底部导航栏的具体代码,供大家参考,具体内容如下 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar...+ BottomNavigationBarItem 自定义 BottomAppBar 在这里 使用 BottomAppBar 来实现 image.png /** * 有状态StatefulWidget...BotomeMenumBarPageState createState() = BotomeMenumBarPageState(); } /** * 在 State 中,可以动态改变数据 * 在 setState...之后,改变的数据会触发 Widget 重新构建刷新 */ class BotomeMenumBarPageState extends State<BotomeMenumBarPage { BotomeMenumBarPageState...: BottomAppBar( //悬浮按钮 与其他菜单栏的结合方式 shape: CircularNotchedRectangle(), // FloatingActionButtonBottomAppBar

1.7K20

Flutter使用 NavigationRail BottomNavigationBarFlutter专题33】

Flutter使用 NavigationRail BottomNavigationBar “作者:坚果 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA...本文将向您展示如何使用NavigationRailBottomNavigationBarFlutter 中创建自适应布局。我们将浏览一下这个概念,然后通过一个完整的例子来在实践中应用这个概念。...我们可以使用NavigationRailBottomNavigationBar来构建现代自适应布局。...每个视图都与底部标签栏的一个标签导航栏的一个项目相连。 如果屏幕宽度小于 640 像素,则将呈现底部标签栏,而不会显示左侧导航栏。...类 (flutter.dev) BottomNavigationBar 类(flutter.dev) 后记 您已经学习了一种使用 NavigationRail BottomNavigationBar

2K40

Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

controller List children 字段 , PageController 用于控制 PageView 中的页面跳转 , children 中就是 PageView 封装的多个界面组件...type 字段设置 , 有两个可选类型 , fixed shifting ; enum BottomNavigationBarType { /// BottomNavigationBar 导航栏底部的...BottomNavigationBarItem 宽度不变 fixed, /// BottomNavigationBar 导航栏底部的 BottomNavigationBarItem 组件的位置大小...; jumpToPage 页面跳转在底部菜单栏的 onTap 点击事件中调用 , 更新当前页面后 , 需要调用 setState 方法更新界面 ; PageView 构造函数 : PageView...: BottomNavigationBar( /// 设置当前的导航页面索引 currentIndex: _currentIndex, //

5.7K50

Flutter底部tab切换保持页面状态的几种方法

_pages, ), 这样就能够实现保持页面状态了,效果如下: 我们可以看到,此时,页面的数据只在最开始进来的时候进行加载,然后就保持住这个页面的状态了,并不会每次进来都进行数据的加载刷新了...第二种方式:AutomaticKeepAliveClientMixin 如果所有的页面都需要保持页面状态,那么就使用indexdStack;如果有些页面需要保持页面状态,有些页面需要进来就刷新,那么我们就需要使用...AutomaticKeepAliveClientMixin结合底部BottomNavigationBar来保持页面状态的时候,其配置步骤如下: import 'package:flutter/material.dart...,页面数据只在首次进入该页面的时候进行刷新;而其他没有实现页面保持的页面在每次进入该页面的时候,数据都会刷新。...使用AutomaticKeepAliveClientMixin这个类来保持首页分类页面状态,其效果如下所示: 以上。

5.9K20

Flutter | 容器组件

UI ,除此之外,Flutter 的动画组件中也大量的使用了 Transform 以提高性能 RotatedBox RotatedBox Transform.rotate 功能相似,但是有一点不同...幸运的是 Flutter Material 组件库中提供了一些现成的组件来减少我们的开发任务 Scaffold Scaffold 是一个路由页的骨架,使用它可以很容易的拼装出一个完整的页面 我们实现一个页面...为此,Material 库提供了一个 TabBarView 组件,通过它不仅可以轻松实现 Tab 页,而且可以非常容易配合 TabBar 来实现通过切换滑动状态的同步,如下: body: TabBarView..., Tab 呀页面都会切换, 在上面的例子中,TabBar TabBarView 的 controller 都是同一个,正是如此, TabBar TabBarView 正是通过一个 controller...来实现菜单切换滑动状态同步的,效果如下: 另外,Material 组件库也提供了一个 PageView 组件,它 TabBarView 功能类似,下面将上面的例子重新整理一下,使用 pageView

5.5K10

Flutter实现底部菜单导航

我们底部的按钮是不会刷新的,界面会刷新,如何实现? 我们界面展示区域分为两块,一块展示底部的工具栏,一块展示页面。...), bottomNavigationBar: bottomNavigationBar, // 底部工具栏 ), theme: new ThemeData( primarySwatch...'; import 'navigation_icon_view.dart'; // 如果是在同一个包的路径下,可以直接使用对应的文件名 // 创建一个 带有状态的 Widget Index class...StatefulWidget _currentPage; // 当前的显示页面 // 定义一个空的设置状态值的方法 void _rebuild() { setState((){}); } @override...由于不同的界面,对应的源码都是下面的是一样的,只是 class 的名字不一样,就都可以使用同样的模版复制过去就有可以了。

4.2K10

Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

文章目录 一、BottomNavigationBar 底部导航栏 二、PageView 滑动页面 三、BottomNavigationBar 与 PageView 关联 四、完整代码示例 1、核心导航组件...; 设置当前索引 : BottomNavigationBar的 currentIndex 属性设置当前底部导航栏的选中索引 , 为其设置一个变量 , 改变该变量值后 , 通过 setState 方法更新...; 滑动回调事件 : onPageChanged 参数设置滑动回调事件 , 传入 index 索引值 , 在该事件中 , 调用 setState 方法 , 更新底部导航栏 BottomNavigationBar...; }); }, } PageView 被动设置选中状态 : 在 BottomNavigationBar 底部导航栏中点击导航按钮 , 切换页面 , 使用 PageView 的 PageController...setState 方法 , 在该方法中设置 _currentIndex 的值 , 进而更新 BottomNavigationBar 底部导航栏的选中状态 ; PageView( /// 控制跳转翻页的控制器

4.1K20

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

: 该组件是被导航的组件 , 设置多个布局结构 , 同时只能显示一个 ; DefaultTabController : 该组件用于关联控制 TabBar TabBarView 组件 ; 界面组件中...中定义的 TabBar TabBarView 就会被关联再一起 ; 注意三个相等的值 : DefaultTabController length 长度 等于 TabBar 子组件个数 等于 TabBarView...TabBarView 组件 ; 由于 TabBar 中的组件都是无状态组件 , 或者不同的父类组件 , 导致创建 TabController 不方便时 , 就会使用该 DefaultTabController...组件 ; DefaultTabController 组件的 length 参数必须不为空 , 并且大于 1 , length 的个数必须等于 TabBar TabBarView 的个数 ; initialIndex...结合起来使用 ; TabBar 中 Tab 子组件的个数 , TabController 中的 length 长度 , TabBarView 中子组件的个数 , 三者必须相等 ; TabBar 构造函数

2.5K40

FlutterFlutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )

文章目录 一、Flutter 布局相关的组件简介 二、Row Column 组件 三、SizedBox 组件 四、ClipOval 组件 五、 完整代码示例 六、 相关资源 一、Flutter 布局相关的组件简介...: 在 width height 字段设置组件的宽高属性 , 在 child 字段设置要设置大小的组件 ; // 使用 SizedBox 组件约束布局大小 SizedBox( width: 宽度像素值...设置 // items 可以设置多个 BottomNavigationBarItem bottomNavigationBar: BottomNavigationBar(...设置状态的方法 , 修改当前选中索引 // 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡 setState(() {...await 关键字实现 // 在这 500 ms 之间 , 列表处于刷新状态 // 500 ms 之后 , 列表变为非刷新状态 await Future.delayed(Duration

2.3K00
领券