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

在BottomNavigationBar上更改选项卡时禁用重建页面

是通过使用StatefulWidget和IndexedStack来实现的。

首先,创建一个StatefulWidget,命名为BottomNavigationBarPage。在该类中,定义一个变量currentIndex来跟踪当前选中的选项卡索引。然后,创建一个IndexedStack小部件,它可以在多个小部件之间切换,但保持它们的状态。将IndexedStack的index属性设置为currentIndex,以便根据选项卡的索引显示相应的页面。

接下来,在BottomNavigationBarPage类中,创建一个方法_onItemTapped,用于处理选项卡的点击事件。在该方法中,更新currentIndex的值为选中的选项卡索引。这将触发StatefulWidget的重建,但由于使用了IndexedStack,页面的状态将被保留。

最后,在build方法中,创建一个BottomNavigationBar小部件,并将其items属性设置为选项卡的列表。将currentIndex属性设置为当前选中的选项卡索引,并将onTap属性设置为_onItemTapped方法。

下面是完整的代码示例:

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

class BottomNavigationBarPage extends StatefulWidget {
  @override
  _BottomNavigationBarPageState createState() => _BottomNavigationBarPageState();
}

class _BottomNavigationBarPageState extends State<BottomNavigationBarPage> {
  int currentIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar'),
      ),
      body: IndexedStack(
        index: currentIndex,
        children: [
          // 页面1
          Container(
            child: Center(
              child: Text('Page 1'),
            ),
          ),
          // 页面2
          Container(
            child: Center(
              child: Text('Page 2'),
            ),
          ),
          // 页面3
          Container(
            child: Center(
              child: Text('Page 3'),
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: _onItemTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Page 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Page 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Page 3',
          ),
        ],
      ),
    );
  }
}

这样,当用户在BottomNavigationBar上更改选项卡时,页面将不会重建,而是通过IndexedStack来切换显示相应的页面。这种方法可以提高应用程序的性能和用户体验。

腾讯云相关产品推荐:无

希望以上信息能对您有所帮助!

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

相关·内容

【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )

回调事件 , 传入一个匿名回调函数 , 在该匿名方法中回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引 , 之后 BottomNavigationBar...对应组件 , 如果选项卡索引为 0 , 显示组件 0 , 如果选项卡索引为 1 , 那么显示组件 1 ; 设置 body 字段值时 , 根据当前的被中选的选项卡索引值 , 判断应该显示哪个组件 ; body...Column( // Column 子组件, 这里设置 Text 文本组件 children: [ Text("主页面选项卡...Column( // Column 子组件, 这里设置 Text 文本组件 children: [ Text("设置页面选项卡...Column( // Column 子组件, 这里设置 Text 文本组件 children: [ Text("主页面选项卡

2.4K00

Flutter学习笔记:BottomNavigationBar实现多个Navigation

1_k5yMOPCem_z5JZVpa6RJCQ.gif 我们真正想要的是将详细页面推到主页面上,但要将BottomNavigationBar保持在底部。...如果我们现在运行应用程序,我们可以看到推送在选择列表项时正常工作,并且BottomNavigationBar保持不变。 棒极了!? ?...在标签之间切换似乎不起作用,因为我们总是在Scaffold主体内显示红色页面。 多个Navigator 这是因为我们已经定义了一个新的导航器,但这是在所有三个选项卡中共享的。...One more thing 如果我们在Android上运行应用程序,当我们按下后退按钮时,我们会发现一个有趣的现象: ?...1_qQW2iGXiWL2F1tu6cLQfwg.gif 需要注意的一点是,当我们在Android上推送新路线时,会从底部滑入。 相反,惯例是在iOS上从右侧滑入。

4.3K20
  • Flutte部件目录-Material Components 顶

    BottomNavigationBar小部件实现此组件。 一个显示在应用底部的材质小部件,用于在少量视图中进行选择,通常介于3到5之间。...底部导航栏通常与Scaffold结合使用,在Scaffold.bottomNavigationBar参数中提供它。 底部导航栏的type会更改其条目的显示方式。...导航栏的背景色是默认的材质背景色ThemeData.canvasColor(实质上是不透明的白色)。 BottomNavigationBarType.shifting,有四个或更多项目时的默认值。...TabBarView 显示与当前选定选项卡相对应的部件的页面视图。 通常与TabBar结合使用。 ?...FlatButton 平面按钮是在材料组件部件上打印的部分,通过填充颜色对触摸作出反应。 ? IconButton 图标按钮是一个打印在材质小部件上的图片,通过填充颜色(墨水)对触摸作出反应。 ?

    9.5K40

    Flutter简单介绍以及 Hello World解析

    框架强制根widget覆盖整个屏幕,这意味着文本“Hello, world”会居中显示在屏幕上。...Navigator可以让您的应用程序在页面之间的平滑的过渡。 是否使用MaterialApp完全是可选的,但是使用它是一个很好的做法。...当父项收到onCartChanged回调时,父项将更新其内部状态,这将触发父项使用新inCart值重建ShoppingListItem新实例。...虽然父项ShoppingListItem在重建时创建了一个新实例,但该操作开销很小,因为Flutter框架会将新构建的widget与先前构建的widget进行比较,并仅将差异部分应用于底层RenderObject...当这个widget的父级重建时,父级将创建一个新的ShoppingList实例,但是Flutter框架将重用已经在树中的_ShoppingListState实例,而不是再次调用createState创建一个新的

    9910

    flutter鸿蒙版本通过底部导航栏的实现熟悉架构及语法

    写在前面 在这篇博客中,我们将深入分析一个 Flutter 应用的完整代码,该应用实现了一个底部导航栏,允许用户在不同页面之间切换。...runApp() 方法会将传入的 Widget 加载到屏幕上。 3....当用户点击某个导航项时,这个方法会被调用,并通过 setState 方法更新 _selectedIndex,触发界面重建,从而显示新选中的页面。 6....onTap 属性将点击事件绑定到 _onItemTapped 方法,使得点击导航项时可以更新状态和切换页面。 7....onTap: _onItemTapped, // 点击事件 ), ); } } 写在最后 通过这段代码,我们构建了一个基本的 Flutter 应用,包含了底部导航栏,可以在不同页面之间进行切换

    10210

    15.Flutter学习之路按钮组件系列

    ButtonBar:按钮组 FloatingActionButton:浮动按钮 RaisedButton 属性 描述 textColor 文本颜色 color 按钮颜色 disabledColor 按钮被禁用时的颜色...disabledTextColor 按钮被禁用时的文本颜色 splashColor 点击按钮时水波纹的颜色 highlightColor 点击(长按)按钮后按钮的颜色 elevation 阴影的范围,...FloatingActionButton 属性 描述 child 子视图,一般为Icon tooltip FAB被长按时显示,也是无障碍功能 backgroundColor 背景颜色 elevation 未点击时的阴影...highlightElevation 点击时阴影值,默认12.0 onPressed 点击事件回调 shape 可以定义FAB的形状等 mini 是否是mini类型默认false 仿咸鱼首页居中的Button...TabsState extends State{ List _page=[HomePage(),SettignPage(),MinePage()]; //用于存放对应的页面

    58110

    掌握Flutter底部导航栏:畅游导航之旅

    在本节中,我们将介绍如何实现底部导航栏的自定义外观。 4.1 更改选中项颜色和图标 通过设置BottomNavigationBar的selectedItemColor属性,可以更改选中项的颜色。...通过将多个页面放置在一个PageView中,并配合底部导航栏实现页面切换,可以为用户提供更加流畅的导航体验。...通过设置_bottomNavigationBarState类中的_onItemTapped函数,可以实现底部导航栏与页面的切换效果,并利用PageView的onPageChanged回调函数实现页面切换时的同步更新...在本节中,我们将介绍如何实现底部导航栏的一些高级功能,包括添加徽章、动态更改导航栏项以及实现导航栏的动画效果。...通过在build方法中根据条件动态设置items属性,我们可以实现在运行时动态更改底部导航栏的内容。

    47710

    【Flutter 专题】11 底部状态栏了解下?

    和尚今天来整理一下在学习测试 Flutter 时需用到的底部导航栏 BottomNavigationBar,使用方式很简单,和尚感觉效果比原生的 Android 要好一些。..."这里是【HomePage】->【签到】页面" : "这里是【HomePage】->【我】页面"; return new Center( child: new Container...然而和尚添加了更改状态时的样式,点击底部状态栏时依旧不会变色;和尚查了很久突然发现,和尚的 HomePage() 继承的是 StatelessWidget 无状态样式,此时更换为 StatefulWidget...实用小贴士 通过点击 BottomNavigationBar 对 PageView 切换过程中,可以设置动画过程,也可以直接跳转到对应页面,需要设置 animateToPage 或 jumpToPage...;如下: onTap: (int index) { // 切换时没有动画效果 // _pageController.jumpToPage(index); // 切换时添加动画效果

    1.9K41

    Flutter跨页面改变BottomNavigationBar选中下标

    前言 需求是这样的,bottomBar内有A,B,C,D页面,4个页面由tabBar管理显示,当在A页面点击按钮时让TabBar选中B页面展示,通俗来讲就是在两个不相邻的Widget里,一个Widget...思路: 解决方案1: flutter内有Provider的状态管理,可以定义一个全局的Provider ,在Main函数内装载,放入顶层结构中,全局访问Provider改变Provider的状态,以此来更新...print("tabbar build"); return Consumer( builder: (_,__,___){ // 获取更改的下标...页面调用这个Provider 使tabBar改变选中下标 // 如A页面的点击函数内 GestureDetector( onTap: () {...class EventTabBarIndex{ // 参数为int 即需要改变的下标 int index; EventTabBarIndex(this.index); } 2.在BottomNavigationBar

    1.2K20
    领券