当前位置: 首页 > news >正文

Flutter_学习记录_导航和其他

Flutter 的导航页面跳转,是通过组件Navigator 和 组件MaterialPageRoute来实现的,Navigator提供了很多个方法,但是目前,我只记录我学习过程中接触到的方法:

  1. Navigator.push(), 跳转下一个页面
  2. Navigator.pop(), 返回上一个页面

1. 不带参数的页面跳转案例

代码如下:

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(title: "导航演示",home: FirstScreen(),));
}class FirstScreen extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("导航页面"),),body: Center(child: ElevatedButton(style: ElevatedButton.styleFrom(backgroundColor: Colors.blueAccent,foregroundColor: Colors.white),onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));}, child: Text("查看商品详情页"))),);}
}class SecondScreen extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("商品详情页")),body: Center(child: ElevatedButton(onPressed: (){Navigator.pop(context);}, child: Text("点击返回")),),);}
}

效果图:
在这里插入图片描述

2. 导航常数的传递和接收

代码如下:

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(title: "导航演示",home: ProductList(products: List.generate(20, (i) => Product("商品$i", "这是一个商品详情页,编号为:$i")))));
}class ProductList extends StatelessWidget {// 定义一个参数final List<Product> products;// 接收参数const ProductList({super.key, required this.products});Widget build(BuildContext context) {return Scaffold(appBar: AppBar( title: Text("商品列表")),body: ListView.builder(itemCount: products.length,itemBuilder: (context, index) {return ListTile(title: Text(products[index].title),onTap: (){Navigator.push(context, MaterialPageRoute(builder: (context) => ProductDetail(product:products[index])));},);}));}
}// 商品详情页
class ProductDetail extends StatelessWidget {// 定义一个参数final Product product;const ProductDetail({super.key, required this.product});Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(product.title)),body: Center(child: Text(product.description),),);}
}// 定义一个商品的对象
class Product {final String title; // 商品标题final String description; // 商品描述Product(this.title, this.description);
}

效果图如下:
在这里插入图片描述

3. 子页面给父级页面返回数据

代码如下:

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(title: "导航演示",home: FirstPage()));
}class FirstPage extends StatelessWidget {const FirstPage({super.key});Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("子页面将数据回传给父视图")),body: Center(child: RouteButton(),),);}
}class RouteButton extends StatelessWidget {Widget build(BuildContext context) {return ElevatedButton(onPressed: (){_navigateDataToChildView(context);}, child: Text("传递数据"));}_navigateDataToChildView(BuildContext context) async {// 等待子视图返回时,回传的数据final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => ChildView()));// 屏幕底部的小弹窗ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(result)));}
}// 子视图
class ChildView extends StatelessWidget {const ChildView({super.key});Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("子视图")),body: Center(child: Column(children: [ElevatedButton(onPressed: (){Navigator.pop(context, "回传:这是第一个数据回传");}, style: ElevatedButton.styleFrom(backgroundColor: Colors.blueAccent,foregroundColor: Colors.white),child: Text("第一个数据回传")),ElevatedButton(onPressed: (){Navigator.pop(context, "回传:这是第二个数据回传");},style: ElevatedButton.styleFrom(backgroundColor: Colors.orangeAccent,foregroundColor: Colors.white), child: Text("第二个数据回传"))],),),);}
}

效果图如下:

Flutter_学习记录_数据回传

4. 设置导航栏的主题色

MaterialApp组件里面有个 theme属性,设置theme属性就可以设置导航栏的主题色,代码如下:

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Contrainer(),// 设置导航栏的主题色theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 设置导航栏颜色为蓝色),),);}
}

5. 导航栏的左右两侧添加操作按钮

AppBar组件中的leading是可以添加左边一个按钮,actions是可以添加右边的一组按钮,代码实例如下:

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return  MaterialApp(debugShowCheckedModeBanner: true,home: Home(),theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.yellow, // 设置导航栏颜色为蓝色),),);}
}class Home extends StatelessWidget {const Home({super.key});Widget build(BuildContext context) {return Scaffold(appBar: AppBar(// 添加左边的操作按钮leading: IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.menu),tooltip: "Navigation",),// 添加右边的操作按钮actions: [IconButton(onPressed: () => debugPrint("navigation button is pressed."), icon: Icon(Icons.search),tooltip: "search",)],title: Text("App Demo"),elevation: 0.0),body: Center(child: Text("添加导航栏的事件"),),);}
}

效果图如下:
在这里插入图片描述

相关文章:

Flutter_学习记录_导航和其他

Flutter 的导航页面跳转&#xff0c;是通过组件Navigator 和 组件MaterialPageRoute来实现的&#xff0c;Navigator提供了很多个方法&#xff0c;但是目前&#xff0c;我只记录我学习过程中接触到的方法&#xff1a; Navigator.push(), 跳转下一个页面Navigator.pop(), 返回上一…...

二叉树-堆(补充)

二叉树-堆 1.二叉树的基本特性2.堆2.1.堆的基本概念2.2.堆的实现2.2.1.基本结构2.2.2.堆的初始化2.2.3.堆的销毁2.2.4.堆的插入2.2.5.取出堆顶的数据2.2.6.堆的删除2.2.7.堆的判空2.2.8.堆的数据个数2.2.9.交换2.2.10.打印堆数据2.2.11.堆的创建2.2.12.堆排序2.2.13.完整代码 3…...

Big Bird:适用于更长序列的Transformer模型

摘要 基于Transformer的模型&#xff0c;如BERT&#xff0c;已成为自然语言处理&#xff08;NLP&#xff09;中最成功的深度学习模型之一。然而&#xff0c;它们的一个核心限制是由于其全注意力机制&#xff0c;对序列长度的二次依赖&#xff08;主要是在内存方面&#xff09;…...

doris:MySQL Load

Doris 兼容 MySQL 协议&#xff0c;可以使用 MySQL 标准的 LOAD DATA 语法导入本地文件。MySQL Load 是一种同步导入方式&#xff0c;执行导入后即返回导入结果。可以通过 LOAD DATA 语句的返回结果判断导入是否成功。一般来说&#xff0c;可以使用 MySQL Load 导入 10GB 以下的…...

电感的饱和、温升、额定电流

电感饱和电流的定义&#xff1a; 电感的感值下降30%时候对应的电流 注意不要让电感的瞬间电流大于饱和电流&#xff1a; 温升电流&#xff1a; 电感器的饱和电流、温升电流和额定电流是描述电感在不同工作条件下表现的三个重要参数。它们分别反映了电感的不同工作特性&#xf…...

基于阿里云百炼大模型Sensevoice-1的语音识别与文本保存工具开发

基于阿里云百炼大模型Sensevoice-1的语音识别与文本保存工具开发 摘要 随着人工智能技术的不断发展&#xff0c;语音识别在会议记录、语音笔记等场景中得到了广泛应用。本文介绍了一个基于Python和阿里云百炼大模型的语音识别与文本保存工具的开发过程。该工具能够高效地识别东…...

【go语言】函数

一、什么是函数 函数是入门简单精通难&#xff0c;函数是什么&#xff1f;&#xff1f;&#xff1f; 函数就是一段代码的集合go 语言中至少有一个 main 函数函数需要有一个名字&#xff0c;独立定义的情况下&#xff0c;见名知意函数可能需要有一个结果&#xff0c;也可能没有…...

CTF-web: phar反序列化+数据库伪造 [DASCTF2024最后一战 strange_php]

step 1 如何触发反序列化? 漏洞入口在 welcome.php case delete: // 获取删除留言的路径&#xff0c;优先使用 POST 请求中的路径&#xff0c;否则使用会话中的路径 $message $_POST[message_path] ? $_POST[message_path] : $_SESSION[message_path]; $msg $userMes…...

从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架(动态菜单组件实现)

目录 面对对象C的程序设计&#xff08;范例&#xff09; 面对对象C的程序设计&#xff08;应用&#xff09; 进一步谈论我上面给出的代码——继承 实现一个面对对象的文本编辑器 所以&#xff0c;什么是继承 重申我们对菜单的抽象 抽象菜单项目 抽象菜单动画 实现菜单功…...

EtherCAT主站IGH-- 23 -- IGH之fsm_slave.h/c文件解析

EtherCAT主站IGH-- 23 -- IGH之fsm_slave.h/c文件解析 0 预览一 该文件功能`fsm_slave.c` 文件功能函数预览二 函数功能介绍`fsm_slave.c` 中主要函数的作用1. `ec_fsm_slave_init`2. `ec_fsm_slave_clear`3. `ec_fsm_slave_exec`4. `ec_fsm_slave_set_ready`5. `ec_fsm_slave_…...

windows10 配置使用json server作为图片服务器

步骤1&#xff1a;在vs code中安装json server, npm i -g json-server 注意&#xff1a;需要安装对应版本的json server&#xff0c;不然可能会报错&#xff0c;比如&#xff1a; npm i -g json-server 0.16.3 步骤2&#xff1a;出现如下报错&#xff1a; json-server 不是…...

Linux——网络(tcp)

文章目录 目录 文章目录 前言 一、TCP逻辑 1. 面向连接 三次握手&#xff08;建立连接&#xff09; 四次挥手&#xff08;关闭连接&#xff09; 2. 可靠性 3. 流量控制 4. 拥塞控制 5. 基于字节流 6. 全双工通信 7. 状态机 8. TCP头部结构 9. TCP的应用场景 二、编写tcp代码函数…...

腾讯云开发提供免费GPU服务

https://ide.cloud.tencent.com/dashboard/web 适用于推理场景&#xff0c;每个月10000分钟免费时长 166 小时 40 分钟 自带学术加速&#xff0c;速度还是不错的 白嫖 Tesla T4 16G 算力 显存&#xff1a;16GB 算力&#xff1a;8 TFlops SP CPU&#xff1a;8 核 内存&#…...

详解python的修饰符

Python 中的修饰符&#xff08;Decorator&#xff09;是一种用于修改或扩展函数或类行为的工具。它们本质上是一个函数&#xff0c;接受另一个函数或类作为参数&#xff0c;并返回一个新的函数或类。修饰符通常用于在不修改原函数或类代码的情况下&#xff0c;添加额外的功能。…...

《攻克语言密码:教AI理解隐喻与象征》

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;让计算机理解人类语言中的隐喻和象征&#xff0c;是迈向更高语言理解水平的关键一步。从“时间就是金钱”这样的概念隐喻&#xff0c;到文学作品里象征着坚韧的“寒梅”&#xff0c;这些非字面意义的表达方式承载着丰…...

如何解除TikTok地区限制:实用方法解析

随着社交媒体的不断发展&#xff0c;TikTok作为一款短视频平台&#xff0c;已经在全球范围内吸引了数以亿计的用户。然而&#xff0c;不同地区对TikTok的使用权限存在一定的限制&#xff0c;这使得一些用户无法享受平台提供的完整内容和功能。 一、了解TikTok地区限制的原因 在…...

神经网络|(七)概率论基础知识-贝叶斯公式

【1】引言 前序我们已经了解了一些基础知识。 古典概型&#xff1a;有限个元素参与抽样&#xff0c;每个元素被抽样的概率相等。 条件概率&#xff1a;在某条件已经达成的前提下&#xff0c;新事件发生的概率。实际计算的时候&#xff0c;应注意区分&#xff0c;如果是计算综…...

《DeepSeek 网页/API 性能异常(DeepSeek Web/API Degraded Performance):网络安全日志》

DeepSeek 网页/API 性能异常&#xff08;DeepSeek Web/API Degraded Performance&#xff09;订阅 已识别 - 已识别问题&#xff0c;并且正在实施修复。 1月 29&#xff0c; 2025 - 20&#xff1a;57 CST 更新 - 我们将继续监控任何其他问题。 1月 28&#xff0c; 2025 - 22&am…...

使用Edu邮箱申请一年免费的.me域名

所需材料&#xff1a;公立Edu教育邮箱一枚&#xff08;P.S&#xff1a;该服务不支持所有的Edu教育邮箱&#xff0c;仅支持比较知名的院校&#xff09; 说到域名&#xff0c;.me这个后缀可谓是个性十足&#xff0c;适合个人网站、博客等。.me是黑山的国家顶级域名&#xff08;c…...

【MCU】DFU、IAP、OTA

我发现很多人把几个概念都学混了&#xff0c;只记得一个升级了 DFU DFU (device firmware update)是指的 USB DFU&#xff0c;这个是 USB 的一个机制&#xff0c;可以升级设备的固件&#xff0c;可以去 USB-IF 查看规范文件。 OTA 全称为 Over-the-air update&#xff0c;利…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

数据库——redis

一、Redis 介绍 1. 概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的内存键值数据库系统&#xff0c;具有以下核心特点&#xff1a; 内存存储架构&#xff1a;数据主要存储在内存中&#xff0c;提供微秒级的读写响应 多数据结构支持&…...