当前位置: 首页 > 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;利…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...