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

在flutter中使用BottomNavigationBar时调用什么方法。我在Init State中有未被调用的代码

在Flutter中使用BottomNavigationBar时,可以通过调用setState方法来更新界面。setState方法是StatefulWidget的一个方法,用于通知Flutter框架重新构建界面。在Init State中有未被调用的代码,可以将这段代码放在setState方法中,以确保界面能够正确更新。

示例代码如下:

代码语言:txt
复制
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  @override
  void initState() {
    super.initState();
    // 未被调用的代码
    // ...
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter BottomNavigationBar'),
      ),
      body: Container(
        // 根据_currentIndex显示不同的内容
        child: Center(
          child: Text('Current Index: $_currentIndex'),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: _onTabTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

在这个例子中,我们使用了一个BottomNavigationBar来展示三个页面,并通过currentIndex属性和_onTabTapped方法来控制当前显示的页面。当点击底部导航栏的某个按钮时,会调用_onTabTapped方法,通过调用setState方法来更新界面,从而实现页面的切换。

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

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

相关·内容

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

UI 显示 ; 设置点击方法 : BottomNavigationBar onTap 属性设置点击方法 , 传入 index 索引 , 该索引值是被点击按钮索引 , 方法主要操作当前 currentIndex...PageView 页面跳转 ; 滑动回调事件 : onPageChanged 参数设置滑动回调事件 , 传入 index 索引值 , 该事件 , 调用 setState 方法 , 更新底部导航栏...BottomNavigationBar 的当前索引值 , 并更新 UI 界面 ; 显示组件 : children 参数设置 Widget 数组即可 , 组件类型只要是 Widget 就行 ; 代码示例...参数 , 可以获取点击按钮索引 , 然后调用 PageView PageController jumpToPage 方法 实现相应界面跳转 ; BottomNavigationBar(...方法 , 在此处调用 setState 方法 , 方法设置 _currentIndex 值 , 进而更新 BottomNavigationBar 底部导航栏选中状态 ; PageView(

4.1K20

Flutter 初体验

Flutter横空出世,很大程度上降低了移动应用开发成本;是一名苦逼iOS开发者,兼职写点Android开发,对Flutter出现比一般人要敏感很多,在此之前个人看法是跨平台没什么前景,学习成本高同时...上手特别快;运行起来也很流畅;这些都是爱好的开始; 首先来说一下iOS里面的UITabBarController Flutter里面有对应控件BottomNavigationBar非常方便,几句代码轻轻松松达到...为自己创建三个类,相当于iOS里面的VC和Android里面的Activity用于展示TabbarItem内容;至于怎么调用就更加简单了,下面是Main文件调用代码: class MyApp extends...primarySwatch: Colors.blue, ), //调用tabbar展示 home: Tabbar(), ); } } 调用代码...Android效果 上图中填充其他内容想了解可以关注哦, 连载。。。

60020

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

使用时要根据变化状态,调整State值, 能够快速初始化,VSCode中直接使用快捷方式生成代码(直接在VSCode输入stful后回车自动生成结构),如下: class name extends...,使用StatefulWidget分为两个部分,第一个部分是继承与StatefullWidget,第二个部分是继承于State.其实State部分才是重点,主要代码都会写在State。...此时使用flutter run 来进行查看代码了,效果已经出现,APP页面上已经出现了一个底部导航栏,只不过现在还点击还没有什么效果。接下来开始制作切换页面。...这些是导航要用子页面,有了这些页面,才能继续编写代码。 3.2 重写initState()方法 我们要重写initState()方法,把刚才做好页面进行初始化到一个Widget数组。...这里list后用了..add(),还会返回list,然后就一直使用..语法,能一直想list里增加widget元素。 最后我们调用了一些父类initState()方法

1.4K30

超过百万StackOverflow Flutter 问题

老孟导读:今天分享StackOverflow上高访问量20大问题,这些问题给我一种特别熟悉感觉,想你一定或多或少遇到过,有的问题在stackoverflow上有几十万阅读量,说明很多人都遇到了这些问题...k开头,_表示私有,只能在当前包内使用,别问我为什么如此命名,问就是源代码中就是如此命名。...是HomePage,HomePage并没有包含在Scaffold,所以并不是调用在Scaffold中就可以,而是看context,修改如下: _scaffoldKey.currentState.showSnackBar...command to release the startup lock 执行flutter命令时经常遇到上面的问题, 解决办法一: 1、Mac或者Linux终端执行如下命令: killall -9...无法调用setState 不能在StatelessWidget控件调用了,需要在StatefulWidget调用

2.1K31

flutter底部导航栏切换

“本文主要介绍flutter底部导航栏切换 做android原生开发,底部导航栏是通过自定义布局,图片自己上网找,点击之后还要变色,切换时候使用fragment,切换下一个同时上一个隐藏……...现在,来看flutter怎么实现吧 效果 img 解析 除了主界面以外,必然需要这三个界面,界面布局如下 然后还需要一个bottom.dart表示主界面,tabs.dart表示底部栏以及调用上面三个界面...组件,可以直接显示底部按钮,onTap方法进行交互, setState方法可以实时渲染修改界面,currentIndex表示当前按下位置 import 'package:flutter/material.dart...") ) ], ), ); } } 主界面 bottom.dart 其实很简单,只需要调用Tabs()即可,具体只是想分离代码模块...,直接运行即可 思考 本质上,这个切换是用列表排好,但是最好应该使用键值对形式,可能flutter有类似的方法还没学到吧,不过,以上从理解简单程度和实现简单程度都是碾压原生开发

3.5K20

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

最近研究了一下Flutter,但是使用Navigator时候遇到了一个很头痛问题,就是当我们去来回切换导航按钮Flutter会重新build,从而导致控件重新Build,从而会失去浏览历史。...其中一些代码是实验性。 如果您知道更好方法,请告诉。 好了,让我们开始。 一切都关于Navigator 所有Flutter应用程序都被定义为MaterialApp。...它还有一个onGenerateRoute方法,每次需要生成路由都会调用方法。 这使用了我们上面定义_routeBuilders()方法。...然后我们build()方法,我们用它创建一个TabNavigator,并传入currentTab。...使用Offstage小部件可确保我们所有导航器保留其状态,因为它们保留在控件树。 这可能会带来一些性能损失,因此如果您选择使用它,建议您分析您应用。 可以在此处找到本文完整源代码

4.2K20

能动手就别吵吵!

Flutter能干什么? 系列:《Flutter从入门到放弃》 开发环境:Mac os + Android Studio 注意:读完本篇文章你可能会对其中代码部分困惑,为什么要这么写?...本节会对您思考如何使用Flutter重构您现有的项目带来一点启示。 背景 自从上回跑通了Hello World后,鲍勃对Flutter信心大增啊。...公司项目开篇 街角咖啡店 鲍勃:“弗老师,想尝试用Flutter实现我们公司APP效果” 弗拉德:“嗯,给我看下要实现什么效果?” 鲍勃:“嗯,很简单。就是下面这样:” ?...不错” 鲍勃:“接下来,是需要一个能在底部切换Tab这种控件。弗老师,Flutter有这种widget吗?” 弗拉德:”嗯,你思路很正确。...StatefulWidget与StatelessWidget各自在什么时机使用? 3. 为什么使用Scaffold,它到底是什么

64410

Flutter跨页面改变BottomNavigationBar选中下标

前言 需求是这样,bottomBar内有A,B,C,D页面,4个页面由tabBar管理显示,当在A页面点击按钮让TabBar选中B页面展示,通俗来讲就是两个不相邻Widget里,一个Widget...思路: 解决方案1: flutter内有Provider状态管理,可以定义一个全局Provider ,Main函数内装载,放入顶层结构,全局访问Provider改变Provider状态,以此来更新...Widget状态显示 解决方案2: 使用event_bus 发送事件广播 ,A页面发送广播,tabBar监听广播并改变下标 下面是代码部分 方案1(Provider方案) 代码: 1.编写Provider...index; EventTabBarIndex(this.index); } 2.BottomNavigationBar所属widget文件内监听通知 , 此Widget应是一个有状态Widget...方案2 使用event_bus发送事件与监听事件方式,向事件总线添加了一个事件,需要定义发送消息内容,同时发送者发送数据,监听者监听事件作出相应。 可依据自我情况合理选择实现方案

1.1K20

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

组件 六、完整代码示例 七、相关资源 一、Scaffold 组件 ---- Flutter Scaffold 组件实现了基础材料设计 ( Material Design ) 可视化布局结构 ;..., 同一间只显示一个 ; 三、BottomNavigationBar 底部导航栏 ---- 通过 Scaffold 组件 bottomNavigationBar 字段 , 可以设置底部导航栏菜单...onTap 点击事件 , BottomNavigationBar 组件需要设置组件类型 , BottomNavigationBarType?...(int page) 方法 , 进行页面跳转 ; jumpToPage 页面跳转在底部菜单栏 onTap 点击事件调用 , 更新当前页面后 , 需要调用 setState 方法更新界面 ; PageView.../// 用于 TabBarView 显示组件 class TabContent extends StatelessWidget { const TabContent({Key key, this.data

5.7K50

Flutter如何使用WillPopScope示例代码

Flutter如何实现点击2次Back按钮退出App,如何实现App多个Route(路由),如何实现Back按钮只退出指定页面,此篇文章将告诉你。...App中有多个Navigator 我们App通常是MaterialApp和CupertinoApp下,MaterialApp和CupertinoApp本身有一个Navigator,所以默认情况下调用...使用TabView、BottomNavigationBar、CupertinoTabView这些组件,希望有多个Tab,但每个Tab中有自己导航行为,这时需要给每一个Tab加一个Navigator...使用TabView、BottomNavigationBar、CupertinoTabView这些组件也是一样原理,只需每一个Tab中加入Navigator,不要忘记指定key。...总结 到此这篇关于Flutter如何使用WillPopScope文章就介绍到这了,更多相关flutter使用WillPopScope内容请搜索ZaLou.Cn以前文章或继续浏览下面的相关文章希望大家以后多多支持

2.7K40

使用BottomNavigationBar来定义底部导航栏

iOS,底部导航栏使用UITabBar就可以实现;Flutter,类似的效果可以通过BottomNavigationBar这个组件实现。..._tabbarIndex,//当前选中第几个item onTap: (index){//点击回调 setState(() {//当需要改变页面参数值时候,需要在该方法更新数据...有几点需要着重说明: 1,我们是给Scaffold组件 bottomNavigationBar 参数配置 BottomNavigationBar 类型值,如下: Scaffold( appBar...我们自己写所有的flutter代码,都放在工程lib文件夹下面,所有的分类文件夹也都放在lib文件夹下。...3,如果某个Widget是一个页面,那么该Widget最好是以Page结尾,如果本例定义首页、分类和设置页面,其定义分别如下: //首页——Home.dart——HomePage import

1.4K30

flutter 起步

代码引用第三方库并使用针对english_words这个第三方库来讲,具体使用参见如下代码import 'package:flutter/material.dart';import 'package...继承(extends)Flutter继承和Java继承是一样Flutter继承是单继承构造函数不能继承子类重写超类方法,要用@override子类调用超类方法,要用superFlutter...BuildContext还提供了一组方法,这些方法能够StatelessWidget.build 函数中被当前上下文环境调用。...当通过Navigation.of(context).pushNamed跳转路由routes查找不到时,会调用方法6. onUnknownRoute效果跟onGenerateRoute一样调用顺序为...AlertDialog:一个弹框组件flutter问题:Flutter通过将新代码注入到正在运行DartVM,来实现Hot Reload这种神奇效果,DartVM将程序类结构更新完成后,

4.4K20

Flutter学习

与Android view区别 AndroidView是可变,当用户交互或数据更新,可直接调用Viewinvalidate方法重绘,达到更新UI目的。...Widget,当用户交互或数据发生变化时,Widget状态发生改变,调用State setState 方法通知它,而后State根据当前状态信息,重新构建Widget tree Android,...’; x.foo();这段静态类型检查不会报错,但是运行时会crash,因为x 并没有foo() 方法,所以建议大家在编程不要直接使用dynamic; var 是一个关键字,意思是"不关心这里类型是什么...可以从Native层调用flutterdart代码,也可以flutter调用Native代码,而作为通讯桥梁就是MethodChannel,这个类初始化时候需要注册一个渠道值。...‘尾随逗号’ Flutter如何使用原生控件或组件 Flutter代码通常涉及构建相当深树状数据结构,例如在一个build方法

2.6K20

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

第一种方式:采用IndexdStack IndexdStack和Stack一样,都是层布局控件,可以一个控件上面放置另一个控件,但唯一不同是,IndexdStack同一刻只能显示子控件一个控件...配置底部导航核心代码如下: import 'package:flutter/material.dart'; import 'package:flutter_jdshop/pages/tabs/CategoryPage.dart..._currentIndex], bottomNavigationBar: BottomNavigationBar( fixedColor: Colors.red,//底部导航栏按钮选中颜色...使用IndexedStack来保持页面状态优点就是配置简单,但是它也有很大缺点:IndexedStack管理子页面一开始就全部一次性加载出来了,不管有没有显示出来,然后通过index属性来确定到底显示哪一个页面..._pages, ), bottomNavigationBar: BottomNavigationBar( fixedColor: Colors.red,//底部导航栏按钮选中颜色

5.9K20

Flutter 搭建标签+导航框架

觉得这张图能很清晰反映出 Widget 整个 Flutter 位置, Flutter 世界里,包括 Views、 View Controllers,、Layouts 等在内概念都建立...你要经常写 Swift 几乎我们不用去考虑这个问题除了一些第三方引用,但在 Flutter 么你需要考虑,就像我们刚开始使用 OC 开发iOS时候一样,当然关键字还是我们熟悉 import 具体我们根据上面的文件层级关系往下看看...具体使用看上面的代码,我们注释写也比较详细,我们就不在具体解释了。...,我们使用是 Navigator push方法了,看着是不是很眼熟,是不是觉得 Navigator 会有一个 pop方法,还真有!...我们Demo,我们是直接在push方法里面写了具体页面的内容,这个正常肯定是另一个 Widget ,相信应该明白,我们看我们具体代码: // 跳转方法 void _pushSaved(

1.2K10

第132期:Flutter状态

同样,我们开发Flutter应用时候,我们也需要对状态进行管理。...比如:我们Flutter应用有两个页面需要共享一个数据,或者父子组件之间需要相互调用之类,我们都可以通过状态管理来处理这些个情况。 声明式应用 Flutter其实是声明式。...其次,我们管理自己定义状态,这些状态其实是分为应用状态 和 临时状态。 临时状态(有时称为UI状态或本地状态)是我们定义单个组件状态。...我们可以使用State和setState()来管理应用所有状态。...最后 Flutter状态管理,有很多概念觉得和React以及Vue状态管理基本上都是一个道理。 比如:也存在状态提升,都可以用setState()以及Provider进行管理等等。

37720

Flutter Widgets 之 BottomNavigationBar

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本:1.12.13+hotfix.5 Dart版本:2.7.0 BottomNavigationBar 和 BottomNavigationBarItem...配合Scaffold控件使用可以实现底部导航效果,类似于微信底部导航效果,下面是一个简单底部导航案例: Scaffold( bottomNavigationBar: BottomNavigationBar...点击其他2个item没有反应,添加切换效果: int _currentIndex = 0; BottomNavigationBar( onTap: (int index) {...currentIndex代表当前显示导航索引,当前切换时调用onTap,onTap回调调用setState方法改变_currentIndex值达到切换效果。 效果如下: ?...Text('书籍'), icon: Icon(Icons.book)), BottomNavigationBarItem( title: Text('

73730
领券