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

要实现底部导航栏的不同项目切换不同的 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.mfbz.cn/a/764166.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

支持混合模型的项目管理系统有哪些?PingCode 混合模型上线

众所周知&#xff0c;敏捷和瀑布是国内外研发项目管理的主流方法。然而&#xff0c;面对复杂性高、规模大、需要创新的项目&#xff0c;单一采用敏捷或瀑布方法往往难以完全满足需求。所以&#xff0c;国内许多企业趋向于结合多种管理模型的优势&#xff0c;形成一种混合管理模…

第一后裔掉宝奖励有什么 怎么领取第一后裔掉宝奖励

第一后裔在今天就要正式上线了&#xff0c;虽然是一款刚刚上线的新游戏&#xff0c;但是其实很早就测试过了&#xff0c;而且测试过很多次&#xff0c;所以有很多已经体验过的小伙伴&#xff0c;这款游戏的玩法还是比较有意思的&#xff0c;第三人称刷宝射击加上MMORPG的玩法&a…

力扣 用队列实现栈(Java)

核心思想&#xff1a;因为队列都是一端进入另一端出&#xff08;先进先出&#xff0c;后进后出&#xff09;&#xff0c;因此一个队列肯定是不能实现栈的功能的&#xff0c;这里就创建两个队列来模拟栈的先进后出&#xff0c;后进先出。 比如说如果是push操作我们肯定是要弹出栈…

自动编码器简单理解及简单使用描述

1. 什么是自动编码器&#xff1f; 自动编码器分为编码器和解码器&#xff0c;其中解码器只在训练阶段用到。具体过程就是&#xff1a; 首先&#xff0c;输入训练样本&#xff0c;编码器对输入样本进行编码&#xff0c;对其进行降维&#xff0c;直到到达某个瓶颈层&#xff1b…

软件开发案例参考

前言&#xff1a;基于平台现有需求进行新功能模块开发与实现&#xff0c;以下内容为部分源码解析&#xff0c;仅提供一些思路参考&#xff0c;不予以客观指导&#xff0c;毕竟条条大路通罗马嘛&#xff1b; 语言&#xff1a;C# 工具&#xff1a;visual studio 2017/visual st…

WGAN(Wassertein GAN)

WGAN E x ∼ P g [ log ⁡ ( 1 − D ( x ) ) ] E x ∼ P g [ − log ⁡ D ( x ) ] \begin{aligned} & \mathbb{E}_{x \sim P_g}[\log (1-D(x))] \\ & \mathbb{E}_{x \sim P_g}[-\log D(x)] \end{aligned} ​Ex∼Pg​​[log(1−D(x))]Ex∼Pg​​[−logD(x)]​ 原始 GAN …

T4打卡 学习笔记

所用环境 ● 语言环境&#xff1a;Python3.11 ● 编译器&#xff1a;jupyter notebook ● 深度学习框架&#xff1a;TensorFlow2.16.1 ● 显卡&#xff08;GPU&#xff09;&#xff1a;NVIDIA GeForce RTX 2070 设置GPU from tensorflow import keras from tensorflow.keras…

uniapp学习笔记

uniapp官网地址&#xff1a;https://uniapp.dcloud.net.cn/ 学习源码&#xff1a;https://gitee.com/qingnian8/uniapp-ling_project.git 颜色网址&#xff1a;https://colordrop.io/ uniapp中如何获取导航中的路由信息&#xff1f; onLoad(e){console.log(e)console.log(e.w…

探索IT世界的第一步:高考后的暑期学习指南

目录 前言1. IT领域概述1.1 IT领域的发展与现状1.2 IT领域的主要分支1.2.1 软件开发1.2.2 数据科学1.2.3 网络与安全1.2.4 系统与运维 2. 学习路线图2.1 基础知识的学习2.1.1 编程语言2.1.2 数据结构与算法 2.2 实战项目的实践2.2.1 个人项目2.2.2 团队项目 2.3 学习资源的利用…

Vue入门-如何创建一个Vue实例

创建一个一个Vue实例总共分为四步&#xff1a; 1.创建一个容器 2.引包&#xff1a;地址栏搜索v2.cn.vuejs.org这是vue2的官网地址&#xff0c;把2去掉就是vue3的官网地址&#xff0c;我们的包分为开发版本和生产版本&#xff0c;开发版本包含完整的警告和调试模式生产版本删除…

Axure原型工具速览:一分钟带你领略设计魅力!

Axure曾经成为产品经理必备的原型设计工具&#xff0c;甚至被认为是专门为产品经理设计的工具。但事实上&#xff0c;软件Axure的应用场景并不局限于产品经理构建产品原型。UI/UX设计师还可以使用Axure软件构件应用APP原型&#xff0c;网页设计师也可以使用Axure软件构件网站架…

Python中的并发编程(5)PyQt 多线程

PyQt 多线程 1 卡住的计时器 我们定义了一个计时器&#xff0c;每秒钟更新一次显示的数字。此外我们定义了一个耗时5秒的任务oh_no&#xff0c;和按钮“危险”绑定。 当我们点击“危险”按钮时&#xff0c;程序去执行oh_no&#xff0c;导致显示停止更新了。 import sys im…

类和对象【上】【C++】

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;LiUEEEEE                        …

泰勒展开式在Android系统或应用程序中的应用

泰勒展开式在Android系统或应用程序中的应用 引言 泰勒展开式(Taylor Series)是高等数学中的一个重要工具,它允许我们将一个复杂函数表示为一个无穷多项式的和,从而近似计算函数值。在Android开发中,理解和应用泰勒展开式有助于优化涉及复杂数值计算的算法,提高应用程序…

感动的短视频:成都柏煜文化传媒有限公司

感动的短视频&#xff1a;瞬间触动心灵的温暖力量 在这个快节奏、高压力的时代&#xff0c;我们常常在忙碌与喧嚣中穿梭&#xff0c;心灵深处那份最纯粹的感动似乎变得愈发珍贵而难得。然而&#xff0c;就在这样一个数字化盛行的今天&#xff0c;短视频以其独特的魅力&#xf…

OpenSearch的演进与语义检索技术革新

周末听了一场关于Open Search的技术分析&#xff0c;整理如下&#xff0c;供大家参考。OpenSearch&#xff0c;作为ElasticSearch的一个分支&#xff0c;不仅继承了其强大的搜索和分析能力&#xff0c;更在开源社区的驱动下&#xff0c;不断演进和创新。本文将介绍OpenSearch的…

leetcode-21-回溯-全排列及其去重

一、[46]全排列 给定一个 没有重复 数字的序列&#xff0c;返回其所有可能的全排列。 示例: 输入: [1,2,3]输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1] ] 其中&#xff0c;不需要使用startIndex used数组&#xff0c;其实就是记录此时path里都有哪些元素…

第十一章 Nest 创建动态模块

在 NestJS 中&#xff0c;动态模块允许在运行时动态添加和删除模块。这对于创建可扩展的和灵活的应用程序非常有用。 新建一个项目&#xff1a; nest new dynamic-module -p npm创建一个crud的模块&#xff1a; nest g resource test启动项目 浏览器访问 可以发现模块生效了 …

Python酷库之旅-第三方库openpyxl(20)

目录 一、 openpyxl库的由来 1、背景 2、起源 3、发展 4、特点 4-1、支持.xlsx格式 4-2、读写Excel文件 4-3、操作单元格 4-4、创建和修改工作表 4-5、样式设置 4-6、图表和公式 4-7、支持数字和日期格式 二、openpyxl库的优缺点 1、优点 1-1、支持现代Excel格式…

【技术杂谈】如何访问Github | 解决无法连接Github的问题

访问网页的过程 什么是域名&#xff1f;什么是IP地址&#xff1f;- 域名是网站的名称。 - IP地址是服务器在互联网上的逻辑地址。域名往往是固定的&#xff0c;但是IP地址很有可能是会改变的。计算机通过Host文件检查本地缓存是否有域名对应IP地址 Host文件路径 C:\Windows\Sy…