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

在BottomNavigationBar上调用所选索引的小部件的initState

是指在底部导航栏(BottomNavigationBar)中切换选项卡时,调用当前选中的索引对应小部件的initState函数。

底部导航栏通常用于切换应用程序的不同页面或功能模块,每个选项卡对应一个页面或功能模块。当用户切换选项卡时,需要根据当前选中的索引调用对应页面或功能模块的initState函数进行初始化操作。

initState是Flutter框架中的一个生命周期函数,用于在小部件被插入到小部件树中时执行一次初始化操作。它在小部件的生命周期中只被调用一次,并且在build函数之前执行。

调用所选索引的小部件的initState有助于在切换选项卡时执行一些初始化逻辑,例如加载数据、初始化状态、注册事件等。这样可以确保每次切换到对应选项卡时都能得到正确的数据和状态,并且提供更好的用户体验。

以下是一个示例代码,演示在BottomNavigationBar上调用所选索引的小部件的initState:

代码语言: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 = [
    // 不同选项卡对应的小部件列表
    FirstPage(),
    SecondPage(),
    ThirdPage(),
  ];

  @override
  void initState() {
    super.initState();
    _initCurrentPage();
  }

  void _initCurrentPage() {
    // 根据当前选中的索引调用对应页面的initState
    _pages[_currentIndex].initState();
  }

  void _onTabTapped(int index) {
    setState(() {
      _currentIndex = index; // 更新选中的索引
      _initCurrentPage(); // 调用当前选中页面的initState
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar'),
      ),
      body: _pages[_currentIndex], // 根据当前选中的索引显示对应页面
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 当前选中的索引
        onTap: _onTabTapped, // 点击选项卡时的回调函数
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'First',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Second',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Third',
          ),
        ],
      ),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  void initState() {
    super.initState();
    // 初始化操作
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('First Page'),
    );
  }
}

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  void initState() {
    super.initState();
    // 初始化操作
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Second Page'),
    );
  }
}

class ThirdPage extends StatefulWidget {
  @override
  _ThirdPageState createState() => _ThirdPageState();
}

class _ThirdPageState extends State<ThirdPage> {
  @override
  void initState() {
    super.initState();
    // 初始化操作
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Third Page'),
    );
  }
}

在上述示例代码中,使用了一个底部导航栏(BottomNavigationBar)和三个页面小部件(FirstPage、SecondPage、ThirdPage)。每个小部件都有自己的initState函数用于初始化操作。

在_MyHomePageState类中,通过维护一个当前选中的索引_currentIndex,并在底部导航栏的点击回调函数_onTabTapped中更新该索引。然后,在_initCurrentPage函数中根据_currentIndex调用当前选中页面的initState函数进行初始化操作。

这样,每次切换底部导航栏的选项卡时,都会先调用对应页面小部件的initState函数进行初始化,确保每次显示的页面都是正确的,并且每次初始化时都能获取到最新的数据和状态。

此外,需要注意的是,在实际开发中可以根据具体需求和项目框架选择合适的方式来管理底部导航栏和页面的切换,上述示例只是一种简单的演示方式。

参考链接:

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

相关·内容

Flutte部件目录-Material Components 顶

应用程序结构和导航 Scaffold Appbar 上面两个在基本部件中已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。...BottomNavigationBar小部件实现此组件。 一个显示在应用底部的材质小部件,用于在少量视图中进行选择,通常介于3到5之间。...底部导航栏通常与Scaffold结合使用,在Scaffold.bottomNavigationBar参数中提供它。 底部导航栏的type会更改其条目的显示方式。...属性 currentIndex → int 指向当前活动条目的索引....FlatButton 平面按钮是在材料组件部件上打印的部分,通过填充颜色对触摸作出反应。 ? IconButton 图标按钮是一个打印在材质小部件上的图片,通过填充颜色(墨水)对触摸作出反应。 ?

9.5K40

如何在flutter中构建响应式布局(第五节)

Flutter 是一个跨平台的应用程序开发框架,支持屏幕尺寸变化很大的设备:它可以在小到智能手表的设备上运行,也可以运行在大电视等设备上。...尺码等级 大小类是根据大小自动分配给内容区域的特征。iOS 根据内容区域的大小类别动态调整布局。在 iPad 上,当你的 app 在?多任务配置中运行时,size classes 也适用。...在 Android 中,要在单个屏幕上显示多个 UI 视图,您可以使用 Fragments,它们就像可以在应用程序的 Activity 内运行的可重用组件。...基本上,它们是可以连接在一起以构建整个应用程序的构建块。 请记住,在 Flutter 中,每个屏幕甚至整个应用程序也是小部件!...小部件本质上是可重用的,因此您在 Flutter 中构建响应式布局时无需学习任何其他概念。

2.9K10
  • Flutter 中自定义动画底部导航栏

    介绍: 显示在应用程序底部的Material小部件,用于在几个视角中进行选择,通常在 3 到 5 范围内的某个位置。底部导航栏包含各种选项,如文本标签、图标或两者。...它将显示在您的设备上。 特性 自定义动画底部导航栏的一些属性是: selectedIndex:这个属性用于被选中的项是一个索引。更改此属性将更改所选项目并为其设置动画。默认为零。...Listitems:该属性用于定义底部导航栏中显示的按钮的外观。这应该至少有两个项目,最多五个。 onItemSelected:该属性用于在按下项目时调用的回调。...我们将添加四个具有不同文本的容器并返回**IndexedStack()**小部件。在小部件内部,我们将添加索引是我的变量 _currentIndex 和 children 是列表小部件页面。...这是我对用户交互自定义动画底部导航栏的一个小介绍。

    9K30

    激光熔覆技术在油田零部件上的应用

    激光熔覆技术作为一种新型的表面工程技术,已经在许多领域得到了广泛的应用。在油田中,激光熔覆主要应用于石油钻杆、抽油杆、石油管道等方面。下面我们将分别介绍这些应用。...了解决这一问题,激光熔覆技术被广泛应用于石油钻杆的表面强化与修复。  通过激光熔覆技术,在钻杆表面形成一层硬度高、耐腐蚀、耐磨损、耐高温的涂层,可显著提高钻杆的耐用性和使用效率。...经过激光熔覆技术,在抽油杆表面形成一层高硬度、高韧性的涂层,可显著提高抽油杆的耐用度和使用效率。激光熔覆技术还可以修复抽油杆表面的损伤,延长抽油杆的使用寿命,降低更换成本。...通过激光熔覆技术,可以在管道内外表面形成一层具有高耐腐蚀性能的涂层,显著提高管道的耐久性和安全性。同时,激光熔覆技术还可以对管道表面的损伤进行修复,避免了管道泄漏等事故的发生,降低了维修成本。  ...总之激光熔覆技术在油田的应用可以在抽油机上得到实现,大大提高了设备的寿命及安全性,也给企业带来的益处,降低了成本。

    16120

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

    image image image image 简介 这是一个建议的新闻客户端 页面非常简单 通过网络请求加载 分类数据 和 分类详情数据 (key都在代码里了,轻量使用~) UI上几乎是没有任何特点...flutter_webview_plugin: ^0.1.6 #webview shared_preferences: ^0.4.2 #持久化数据 url_launcher: ^3.0.3 #调用系统浏览器...代码 使用单例来保存数据 由于分类原则上是没有变化的,我这里就使用单例来保存从API请求的分类数据,减少请求次数(API请求次数有限) class UserSinglen { ListbottomNavigationBar = new BottomNavigationBar( items: navigationIcons.map(((i) => i.item)).toList...: bottomNavigationBar, ), ); } } 首页 首页实时获取存储在本地的已选择分类,与单例中的所有分类做对比,获取对应的类型id (shared_preferences

    1.3K20

    在小ram和小容量硬盘的vps上的折腾

    这次被拿来折腾的是hax的免费vps,纯ipv6,7天有效期,可无限续期,但是配置也低的可怜,只有450m的运行内存,127m的swap,硬盘总共就只有5g,一开始想装Debian11,就选了Debian11...连上去看看是什么情况 目前hax好像没有提供vnc的web客户端,只能自己另找vnc客户端来连接,不过公有云给的vnc跟我们自己在机子上面搭建的vnc server虽然都是vnc,但它们对vps的控制能力完全不是一个级别的...启动的全程,而我们自己搭建在vps上的vnc,跟ssh没啥很大不同,都是要等到机子正常启动之后才能连接并控制,也有可能因为种种原因,进程被干掉之后就连不上了,所以厂商给的vps一般是给我们拿来排障用的。...的版本,需要安装的软件和编译的命令都一样。...systemctl enable pagermaid_pyro --now 完成之后用systemctl status pagermaid_pyro命令查看状态,显示active(running)就说明理论上是正常的

    2.8K30

    Transformer在小目标检测上的应用

    文章分类在AI学习笔记: AI学习笔记(1)---《Transformer在小目标检测上的应用》 Transformer在小目标检测上的应用 1 小目标检测介绍 小目标检测(Small...虽然在一般目标检测方面已经取得了长足的进展,但SOD的研究进展相对缓慢。更具体地说,即使是领先的检测器,在检测小尺寸物体和正常大小物体方面仍然存在巨大的性能差距。...原文出处: AI视界引擎 《小目标检测的福音 | 一文全览3年来Transformer是怎么在小目标领域大杀四方的?》...DETR在具有挑战性的COCO目标检测数据集上展示了与成熟且高度优化的Faster RCNN基线相当的准确性和运行时间。此外,DETR可以很容易地推广到以统一的方式输出全景分割。...Deformable DETR(ICLR 2021) 代码链接:https://github.com/fundamentalvision/Deformable-DETR DETR以消除在物体检测中对许多手动设计部件的需要

    21110

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

    写在前面 在这篇博客中,我们将深入分析一个 Flutter 应用的完整代码,该应用实现了一个底部导航栏,允许用户在不同页面之间切换。...在这里,我们调用 runApp() 方法来启动 Flutter 应用,并传入 MyApp 组件作为根组件。runApp() 方法会将传入的 Widget 加载到屏幕上。 3....在 build 方法中,我们构建了一个 MaterialApp,这是 Flutter 应用的核心组件,提供了应用的主题、路由等设置。...当用户点击某个导航项时,这个方法会被调用,并通过 setState 方法更新 _selectedIndex,触发界面重建,从而显示新选中的页面。 6....currentIndex 属性设置当前选中的索引,selectedItemColor 属性定义了选中项的颜色。

    10310

    Flutter跨页面改变BottomNavigationBar选中下标

    前言 需求是这样的,bottomBar内有A,B,C,D页面,4个页面由tabBar管理显示,当在A页面点击按钮时让TabBar选中B页面展示,通俗来讲就是在两个不相邻的Widget里,一个Widget...思路: 解决方案1: flutter内有Provider的状态管理,可以定义一个全局的Provider ,在Main函数内装载,放入顶层结构中,全局访问Provider改变Provider的状态,以此来更新...), ); }, ); } 4.在A页面调用这个Provider 使tabBar改变选中下标 // 如A页面的点击函数内 GestureDetector...( onTap: () { // 调用Provider选中第1个 即第2个页面(ps: 下标从0开始的哦~)...(this.index); } 2.在BottomNavigationBar所属的widget文件内监听通知 , 此Widget应是一个有状态的Widget class _TabBarPageState

    1.2K20

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

    Flutter BottomNavigation 底部导航详解 主要是使用了 Scaffold下的 bottomNavigationBar 整个属性,在这个属性下,可以添加底部图标的背景色,选中颜色,...以及是否粘贴到底部,和导航的个数 在app的主页面,home指向底部导航栏的组件 home: BottomNavigation(), 底部导航栏的组件集成 StatefulWidget 在内部创建一个带有状态的组件...StatefulWidget { @override _BottomNavigationState createState() => _BottomNavigationState(); } 状态组件内有一些颜色的变量和选中导航索引的变量...如颜色, 按钮,图标 Colors.white // 白色颜色 Icons.home // home 图标 FloatingActionButton // 漂浮的按钮 效果图 在colors.dart...{ setState(() {_counter++;}); } 使用void关键字修饰, 使用setState 来修改内部变量 问题1: 假如页面停留在首页, 此时来了一个消息,需要在消息的导航栏上加上徽标

    3.3K10

    Flutter 旋转轮

    同样,您将沿顺时针/逆时针的任何方向移动微调器。它将在您的设备上显示所选的文本。...**onChanged:**此 属性用于在每次更改选择时从微调器菜单返回所选值的回调。 「select」:此 属性用于选择(突出显示)圆的扇区。范围是0(项目大小)。想象它就像一个数组。...在itemBuilder中,我们将导航容器小部件。在小部件内,我们将添加一个边距,即容器的高度。他的子属性,我们将添加一个列小部件。在此小部件中,我们将添加两个文本,分别是问题和答案。...在此程序包中,我们将添加」size」表示将在其上绘制圆形微调器的正方形,「item」表示将在微调器上显示该大小。...项「以外的所有选项,应当绘制边框」指令**确定是否应绘制边框,「onChanged」表示每次更改选择时从微调器菜单返回所选值的回调。

    8.9K20

    在小目标检测上另辟蹊径的SNIP

    这个模型是CNN-B在放大的低分辨率图像上fine-tune后的模型,并且输入图像也使用放大的低分辨率模型。...Table1 Table1是检测器在小目标验证集上的检测效果对比结果,用的验证图像尺寸都是 。...「主要原因是训练数据中的那些尺寸非常大或者非常小的目标会影响训练效果」。 因此,基于上面的实验结果,「本文在引入MST思想的同时限定了不同尺寸的目标在训练过程中的梯度回传,这就是SNIP的核心思想」。...还需要注意的一点是在SNIP中,对目标的尺寸限制是在训练过程,而不是预先对训练数据进行过滤,训练数据仍然是基于所有的数据进行的。实验证明这种做法对小目标检测非常有效。...SNIP算法和其他算法的对比 第二行的多尺度测试比第一行的单尺度效果好,而第三行是在多尺度测试的基础上加入了多尺度训练的情况,这个时候在大尺寸目标( )上的检测结果要比只有多尺度测试的时候差,原因在第

    1.1K21

    在SCF上的小程序会话服务器

    Wafer On SCF 项目概况: 该项目基于腾讯云小程序会话服务器(Wafer)的二次开发。修改某些配置,破除一套服务器对应一个小程序或公众号哦的限制。...适配了SCF架构,可直接部署到SCF上,通过API网关,提供内外网环境下的会话管理服务。 本人小白,完全不懂PHP,原项目在代码层面无法支持多个小程序或公众号,所以在此做了修改和适配。...本功能具体请参看官方Wafer介绍 小程序信息接密:小程序中敏感数据需要进行接密,如运动数据、用户信息等,直接调用本服务即可 公众号AccessToken托管:公众号AccessToken生命周期托管。...项目增加了微信AccessToken的管理,可以自动进行AccessToken的生命周期托管,用户只需调用相关接口并使用即可,无需担心微信端请求次数限制。...--- 通过上述修改,实现了带appid参数调用会话服务器,服务器根据对应的appid和secretKey调用微信服务器的接口解析用户登录信息,并生成第三方session保存到数据库cAuth中的sessioninfo

    2.3K41

    Flutter跨平台移动端开发

    虽然从效果来看,父 widget 的限制没有起作用,但是实际上它只是没有影响子 widget 的大小,但还是占有了响应的空间 ---- DecoratedBox(装饰盒) decoratedBox 可以给子...background = 在子 widget 之后绘制,foreground = 在子 widget 之前绘制 child:子 widget /** * @des DecoratedBox Widget...---- Scaffold Widget and TabBar Widget(脚手架及切换组件) scaffold 是 Materrial 库中提供的一个脚手架,可以帮助开发者更快的完成功能页的开发...:悬浮按钮 drawer:抽屉部件 bottomNavigationBar:底部导航栏 模拟商品详情页骨架 /** * @des Scaffold Widget * @author liyongli...() { super.initState(); _tabController = new TabController(length: tabs.length, vsync: this);

    2.8K40
    领券