【flutter】点击底部不同的item实现切换Scaffold

devtools/2024/11/14 21:11:01/

要实现底部导航栏的不同项目切换不同的 Scaffold,您可以使用 IndexedStack 和 BottomNavigationBar 的组合。IndexedStack 可以根据当前所选的底部导航栏项目来切换不同的 Scaffold。以下是一个示例代码:

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatefulWidget {_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _selectedIndex = 0;Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Bottom Navigation Bar'),),body: IndexedStack(index: _selectedIndex,children: <Widget>[Scaffold(body: Center(child: Text('Home Page'),),),Scaffold(body: Center(child: Text('Business Page'),),),Scaffold(body: Center(child: Text('School Page'),),],),bottomNavigationBar: BottomNavigationBar(items: const <BottomNavigationBarItem>[BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),BottomNavigationBarItem(icon: Icon(Icons.business),label: 'Business',),BottomNavigationBarItem(icon: Icon(Icons.school),label: 'School',),],currentIndex: _selectedIndex,selectedItemColor: Colors.blue,onTap: (int index) {setState(() {_selectedIndex = index;});},),);}
}

在这个示例中,我们使用 IndexedStack 来包裹不同的 Scaffold,根据底部导航栏当前所选的项目来切换不同的 Scaffold。当用户点击底部导航栏的项目时,会触发 onTap 回调函数,然后根据所选的项目更新 _selectedIndex,最终切换到对应的 Scaffold。


http://www.ppmy.cn/devtools/56817.html

相关文章

大二暑假 + 大三上

希望&#xff0c;暑假能早睡早起&#xff0c;胸围达到 95&#xff0c;腰围保持 72&#xff0c;大臂 36&#xff0c;小臂 32&#xff0c;小腿 38&#x1f36d;&#x1f36d; 目录 &#x1f348;暑假计划 &#x1f339;每周进度 &#x1f923;寒假每日进度&#x1f602; &…

Windows页面错误(Page Fault)写几种c++会导致,此问题的例子

在C中&#xff0c;直接导致Windows页面错误&#xff08;Page Fault&#xff09;的情景较少直接由编程错误引发&#xff0c;页面错误更多是由操作系统在内存管理和虚拟内存机制中处理的。不过&#xff0c;某些编程错误可能导致访问违规&#xff0c;进而间接引起操作系统报告页面…

学生党蓝牙耳机推荐有哪些?四款学生党必入的性价比蓝牙耳机推荐

在数字化和移动设备普及的今天&#xff0c;蓝牙耳机已经成为了我们日常生活中不可或缺的一部分&#xff0c;尤其是对于学生群体来说&#xff0c;一款性价比高的蓝牙耳机都能极大地提升他们的生活质量&#xff0c;那么学生党蓝牙耳机推荐有哪些&#xff1f;市面上的蓝牙耳机品牌…

数据恢复篇:如何在 Android 手机上恢复未保存/删除的 Word 文档

在 Android 手机上访问 Word 文档通常很简单&#xff0c;但是当这些重要文件被删除或未保存时会发生什么&#xff1f;这种情况虽然令人痛苦&#xff0c;但并非毫无希望。到 2024 年&#xff0c;有几种强大的方法来处理此类数据丢失。本指南重点介绍如何在Android手机上恢复已删…

laravel对接百度智能云 实现智能机器人

创建API Key和 Secret Key进入网址&#xff1a;百度智能云千帆大模型平台 如下图操作&#xff1a; 填写完毕点击确认后&#xff0c;即可得到sk和ak 后端接口实现代码&#xff1a; //调用百度智能云第三方机器人接口public function run($text) {$curl curl_init();curl_setop…

Django靓号管理系统:实现Home页面

在本文中,我们将详细介绍如何在Django靓号管理系统中实现Home页面。Home页面是用户成功登录后看到的第一个页面,它应该提供一个友好的欢迎信息和系统的基本布局。 1. 更新 ​​urls.py​​ 首先,我们需要确保 ​​urls.py​​ 文件中包含了 Home 页面的 URL 配置: # url…

2024 年江西省研究生数学建模竞赛A题:交通信号灯管理问题分析、实现代码及参考论文

2024 年江西省研究生数学建模竞赛题目交通信号灯管理 1 题目 交通信号灯是指挥车辆通行的重要标志&#xff0c;由红灯、绿灯、 黄灯组成。红灯停、绿灯行&#xff0c;而黄灯则起到警示作用。交通 信号灯分为机动车信号灯、非机动车信号灯、人行横道信号 灯、方向指示灯等。 一…

docker compose部署zabbix7.0官方yaml文件方法快速搭建

环境介绍&#xff1a; 系统&#xff1a;centos7 官方文档&#xff1a;https://www.zabbix.com/documentation/current/zh/manual/installation/containers docker镜像接口配置 vi /etc/docker/daemon.json{"registry-mirrors": ["https://docker.1panel.live…