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

bottomNavigationBar如何通过ontab在flutter中重建同一页面?

在Flutter中,bottomNavigationBar是一个常用的组件,用于创建底部导航栏。通过ontab属性,可以在用户切换底部导航栏的选项卡时重新构建同一页面。

要实现这个功能,可以按照以下步骤进行操作:

  1. 首先,在Flutter中创建一个StatefulWidget,用于构建底部导航栏和对应的页面内容。
代码语言:txt
复制
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar'),
      ),
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        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',
          ),
        ],
      ),
    );
  }
}
  1. 在上述代码中,_selectedIndex变量用于跟踪当前选中的底部导航栏选项卡的索引。_pages列表包含了对应的页面内容,可以根据需要进行修改。
  2. _onTabTapped方法是一个回调函数,用于在用户切换底部导航栏选项卡时更新_selectedIndex的值,并触发页面重建。
  3. 在build方法中,将_selectedIndex作为索引来获取对应的页面内容,并将其作为body属性的值传递给Scaffold组件。
  4. bottomNavigationBar属性接受一个BottomNavigationBar组件,其中currentIndex属性设置为_selectedIndex,onTap属性设置为_onTabTapped方法,items属性定义了底部导航栏的选项卡。

通过以上步骤,就可以实现在Flutter中通过ontab在同一页面上重建bottomNavigationBar的功能。根据具体需求,可以在_pages列表中添加更多的页面,并在BottomNavigationBarItem中设置对应的图标和标签。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 腾讯云移动开发:https://cloud.tencent.com/solution/mobile-development
  • 腾讯云云服务器CVM:https://cloud.tencent.com/product/cvm
  • 腾讯云数据库MySQL:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储COS:https://cloud.tencent.com/product/cos
  • 腾讯云人工智能AI:https://cloud.tencent.com/product/ai
  • 腾讯云区块链服务:https://cloud.tencent.com/product/tbaas
  • 腾讯云元宇宙:https://cloud.tencent.com/product/tencent-verse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

写在前面 在这篇博客,我们将深入分析一个 Flutter 应用的完整代码,该应用实现了一个底部导航栏,允许用户不同页面之间切换。... build 方法,我们构建了一个 MaterialApp,这是 Flutter 应用的核心组件,提供了应用的主题、路由等设置。...当用户点击某个导航项时,这个方法会被调用,并通过 setState 方法更新 _selectedIndex,触发界面重建,从而显示新选中的页面。 6....,我们构建了一个基本的 Flutter 应用,包含了底部导航栏,可以不同页面之间进行切换。...该示例展示了 Flutter 的状态管理机制、组件结构以及如何使用 Material Design 组件构建用户界面。 希望本文能够帮助您更好地理解 Flutter 开发!

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

    2、四个切换页面 3、应用启动主界面 4、运行效果 五、相关资源 一、BottomNavigationBar 底部导航栏 ---- Scaffold 的 bottomNavigationBar 属性设置底部导航栏...UI 显示 ; 设置点击方法 : BottomNavigationBar 的 onTap 属性设置点击方法 , 传入 index 索引 , 该索引值是被点击的按钮索引 , 该方法主要操作当前的 currentIndex...类型 , 主要用于控制 PageView 的页面跳转 ; 滑动回调事件 : onPageChanged 参数设置滑动回调事件 , 传入 index 索引值 , 该事件 , 调用 setState...方法 , 更新底部导航栏 BottomNavigationBar 的当前索引值 , 并更新 UI 界面 ; 显示组件 : children 参数设置 Widget 数组即可 , 组件类型只要是 Widget...与 PageView 关联 ---- BottomNavigationBar 被动设备选中状态 : BottomNavigationBar 的索引通过一个组件内部定义的私有变量 _currentIndex

    4.3K20

    使用BottomNavigationBar来定义底部导航栏

    iOS,底部导航栏使用UITabBar就可以实现;Flutter,类似的效果可以通过BottomNavigationBar这个组件实现。...如下图所示,我lib文件夹下新建了一个pages文件夹,用于装所有的页面;pages文件夹下面又创建了一个tabs文件夹,用于装载跟底部导航栏相关的页面。 ?...如果你导入的文件与当前文件属于同一级,也就是说同一个文件夹下,那么直接写文件名即可,比如在Tabbar.dart中导入其他三个文件,就可以像下面这样写: import 'Home.dart'; import...'Category.dart'; import 'Setting.dart'; 如果你导入的文件file文件夹A的里面,或者A的子文件夹的里面,并且当前文件与A属于同一个路径级别,也就是说属于同一个文件夹下...3,如果某个Widget是一个页面,那么该Widget最好是以Page结尾,如果我本例定义的首页、分类和设置页面,其定义分别如下: //首页——Home.dart——HomePage import

    1.5K30

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

    首先看一下如下视频: 通过视频我们可以看到,当通过底部tabBar将页面“首页”和“分类”之间进行切换的时候,每一次进入页面的时候该页面的数据都会重新加载。...那么如何页面保持原来的状态,而不是每次都要重新加载刷新数据呢?有两种方式。...第一种方式:采用IndexdStack IndexdStack和Stack一样,都是层布局控件,可以一个控件上面放置另一个控件,但唯一不同的是,IndexdStack同一时刻只能显示子控件的一个控件...使用IndexedStack来保持页面状态的优点就是配置简单,但是它也有很大的缺点:IndexedStack管理的子页面一开始就全部一次性加载出来了,不管有没有显示出来,然后通过index属性来确定到底显示哪一个页面...AutomaticKeepAliveClientMixin结合底部BottomNavigationBar来保持页面状态的时候,其配置步骤如下: import 'package:flutter/material.dart

    6.1K20

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

    Flutter底部导航栏概述 Flutter,底部导航栏是一种常见的用户界面组件,通常用于展示应用程序的主要功能模块或不同页面的快速导航入口。...Flutter,开发者可以使用内置的BottomNavigationBar组件轻松创建和定制底部导航栏,同时结合其他Flutter组件和功能实现更丰富的导航体验。...接下来的章节,我们将深入探讨如何Flutter创建和定制底部导航栏,包括基本结构的构建、外观的定制、与页面的切换以及状态管理等方面的内容,帮助读者全面掌握底部导航栏的实现技巧与方法。 3....创建底部导航栏的基本结构 底部导航栏Flutter的创建可以通过两个主要的组件来实现:BottomNavigationBar和BottomNavigationBarItem。...通过将多个页面放置一个PageView,并配合底部导航栏实现页面切换,可以为用户提供更加流畅的导航体验。

    35310

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

    = null), super(key: key); 二、底部导航栏整体架构 ---- 通过设置 Scaffold 组件的 bottomNavigationBar 字段 , 为其设置一个 BottomNavigationBar..., 同一时间只显示一个 ; 三、BottomNavigationBar 底部导航栏 ---- 通过 Scaffold 组件的 bottomNavigationBar 字段 , 可以设置底部导航栏菜单...onTap 点击事件 , BottomNavigationBar 组件需要设置组件的类型 , BottomNavigationBarType?...; jumpToPage 页面跳转在底部菜单栏的 onTap 点击事件调用 , 更新当前页面后 , 需要调用 setState 方法更新界面 ; PageView 构造函数 : PageView...TabBar 导航栏切换展示的主要内容 /// 用于 TabBarView 显示的组件 class TabContent extends StatelessWidget { const TabContent

    6K50

    Flutter 全局控制底部导航栏和自定义导航栏的方法

    通过应用实现全局控制,我们可以根据不同的设备或用户需求动态切换导航栏类型,从而提升应用的灵活性和适用性。接下来,我们将探讨如何实现这一目标。 2....接下来,我们将探讨如何实现全局控制底部导航栏和自定义导航栏的方法。 3. 枚举类型的使用 Flutter,枚举类型(Enum)是一种有限的、离散的数据类型,用于表示一组相关的常量值。...代码实现 在这一部分,我们将展示如何Flutter 实现全局控制导航栏,并给出详细的代码示例和解释。...通过这样的代码实现,我们可以 Flutter 应用实现全局控制导航栏的功能,根据用户的偏好动态切换导航栏类型,提供更好的用户体验。 7....代码实现: 我们展示了一个完整的代码示例,演示了如何Flutter 应用实现全局控制导航栏的功能。

    34110

    Flutter实现底部菜单导航

    用于将工具栏放入界面,并且将按钮对应的界面作为它的子元素存放于其中。 不同的按钮对应的界面。我们点击的图标按钮的时候,展示不同的界面。 我们底部的按钮是不会刷新的,界面会刷新,如何实现?...), bottomNavigationBar: bottomNavigationBar, // 底部工具栏 ), theme: new ThemeData( primarySwatch...'; import 'navigation_icon_view.dart'; // 如果是同一个包的路径下,可以直接使用对应的文件名 // 创建一个 带有状态的 Widget Index class...), bottomNavigationBar: bottomNavigationBar, // 底部工具栏 ), theme: new ThemeData( primarySwatch: Colors.blue..., // 设置主题颜色 ), ); } } 第四步:创建页面 前面的步骤都是搭建我们的基础,现在是做展示界面。

    4.3K10

    Flutter Widgets 之 BottomNavigationBar

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本:1.12.13+hotfix.5 Dart版本:2.7.0 BottomNavigationBar 和 BottomNavigationBarItem...currentIndex代表当前显示导航的索引,当前切换时调用onTap,onTap回调调用setState方法改变_currentIndex的值达到切换的效果。 效果如下: ?...如果导航的图标是自己设计的图标,这时仅仅通过BottomNavigationBar是无法实现我们想要的效果的,比如微信的导航的效果,虽然选中和未选中也是颜色的区别,但图标不是Icons自带的图标,想要实现切换...通过切换导航而改变页面是App中最常用的方式,开始构建页面的切换: int _currentIndex = 0; Widget _currBody = HomePage(); _onTap(int...,HomePage,BookPage,MyPage对应3个导航的页面,背景分别是红、蓝、黄色,效果如下: ?

    78730

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

    前言: Flutter应用,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,...它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何flutter实现类似喜马拉雅的导航效果...第一步:实现固定的底部导航 通过flutter create生成的项目模板,我们先简化一下代码,将MyHomePage提取到一个单独的home.dart文件,并在Scaffold脚手架添加bottomNavigationBar...底部导航,body展示当前选中的子页面。...,通过页面的State类重写wantKeepAlive为true 。

    2.8K30

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

    底部导航栏选中状态切换代码示例 ---- BottomNavigationBar 底部导航栏每个 BottomNavigationBarItem 都有一个选中状态 , 通过 StatefulWidget...可以改变页面状态 ; 设置一个成员变量 , 标识当前选中的索引值 ; /// 当前被选中的底部导航栏索引 int _currentSelectedIndex = 0; 将 BottomNavigationBar...回调事件 , 传入一个匿名回调函数 , 该匿名方法回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引 , 之后 BottomNavigationBar...底部导航栏切换选项卡界面 ---- BottomNavigationBar 底部导航栏的 onTap 回调方法 , 设置当前选中的选项卡索引 , 根据该索引值修改 Scaffold 组件的 body...flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab : https://codelabs.flutter-io.cn

    2.3K00

    Flutter BottomNavigation 底部导航详解 及问题记录

    Flutter BottomNavigation 底部导航详解 主要是使用了 Scaffold下的 bottomNavigationBar 整个属性,在这个属性下,可以添加底部图标的背景色,选中颜色,...以及是否粘贴到底部,和导航的个数 app的主页面,home指向底部导航栏的组件 home: BottomNavigation(), 底部导航栏的组件集成 StatefulWidget 在内部创建一个带有状态的组件...查看预设颜色值 icons.dart查看预设图标 源码 三个文件 main.dart import 'package:flutter/material.dart'; import '....问题2: 假如现在要做换肤的功能,那要如何做? 问题3: 目前dart辨析的时候,有很多括号, 格式不够优美,有没有第三方,成熟的组件以供使用 问题4: 如何页面切换时 ,使用动画,自己写?...问题5: 如何设置支持导航栏,左滑,优化切换? 效果图

    3.3K10

    Flutter实例一--底部规则导航栏制作

    使用时要根据变化状态,调整State值, 能够快速初始化,VSCode中直接使用快捷方式生成代码(直接在VSCode输入stful后回车自动生成结构),如下: class name extends...此时使用flutter run 来进行查看代码了,效果已经出现,APP的页面上已经出现了一个底部导航栏,只不过现在还点击还没有什么效果。接下来开始制作切换页面。...3.子页面的编写 3.1新建一个pages目录,装文件 ,然后目录下面新建home_screen.dart文件,在里面写一个HomeScreen组件,只放入一个AppBar和一个Center,然后用Text...这些是导航要用的子页面,有了这些页面,才能继续编写代码。 3.2 重写initState()方法 我们要重写initState()方法,把刚才做好的页面进行初始化到一个Widget数组。...4.BottomNavigationBar里的响应事件 BottomNavigationBar组件里提供了一个相应事件onTap,这个事件自带一个索引值index,通过索引值我们就可以和我们list里的索引值相对应了

    1.4K30
    领券