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

Flutter基础(路由页面跳转)

基础路由表配置​

直接使用 routes 属性定义简单路由(无需传参):

MaterialApp(initialRoute: '/', // 初始页面routes: {'/': (context) => HomePage(),         // 首页'/detail': (context) => DetailPage(), // 详情页'/profile': (context) => ProfilePage(),},onUnknownRoute: (settings) =>        // 处理未定义路由MaterialPageRoute(builder: (_) => NotFoundPage()),
);

基础跳转实现​

在按钮的 onPressed 回调中调用 Navigator.pushNamed,传入当前 context 和注册的路由路径:

// 在 HomePage 的按钮跳转到详情页
ElevatedButton(onPressed: () {Navigator.pushNamed(context, '/detail'); // 使用命名路由跳转},child: Text('进入详情页'),
);// 在详情页跳转到个人页
ElevatedButton(onPressed: () {Navigator.pushNamed(context, '/profile');},child: Text('进入个人页'),
);

带参数跳转(高级用法)​

若需向目标页面传递数据(如商品ID),需结合 arguments 属性和路由解析:

步骤:

跳转时传递参数​​:

Navigator.pushNamed(context,'/detail',arguments: {'id': 1001, 'title': '商品详情'}, // 动态数据
);

​目标页面接收参数​​(需修改路由表注册方式):
使用 onGenerateRoute 替代 routes,解析参数并初始化页面。

MaterialApp(onGenerateRoute: (RouteSettings settings) {switch (settings.name) {case '/detail':final args = settings.arguments as Map<String, dynamic>; // 类型转换return MaterialPageRoute(builder: (_) => DetailPage(id: args['id'], title: args['title']),);// 其他路由...}},
);

http://www.lryc.cn/news/576417.html

相关文章:

  • 布林带的使用
  • 展开说说:Android之ContentProvider源码浅析
  • 【数据结构】map/set模拟实现(红黑树作底层)
  • STM32HAL 旋转编码器教程
  • 1.2 基于蜂鸟E203处理器的完整开发流程
  • Tailwind CSS工作原理
  • 从 “慢如蜗牛” 到 “风驰电掣”:中欧跨境网络专线加速方案
  • 电子电气架构 --- 车载芯片SOC简介
  • 深入解析 Electron 架构:主进程 vs 渲染进程
  • 软测八股--计算机网络
  • AD 学习笔记——第一章 系统的安装及参数设置
  • 鸿蒙HarmonyOS 5小游戏实践:数字记忆挑战(附:源代码)
  • ZooKeeper深度面试指南二
  • Flutter基础(Children|​​Actions|Container|decoration|child)
  • STM32F103之SPI软件读写W25Q64
  • 力扣第73题-矩阵置零
  • 用鸿蒙打造真正的跨设备数据库:从零实现分布式存储
  • 【区块链】区块链交易(Transaction)之nonce
  • 默克树技术原理
  • Node.js特训专栏-实战进阶:10.MongoDB文档操作与聚合框架
  • 嵌入式硬件与应用篇---寄存器GPIO控制
  • 软件反调试(1)- 基于进程列表的检测
  • Spring AI Alibaba 入门指南:打造企业级 AI 应用
  • 《从 0 到 1 掌握正则表达式:解析串口数据的万能钥匙》
  • Note2.3 机器学习:Adaptive Learning Rate
  • golang中struct中大小写对gin框架的影响
  • 深入剖析AI大模型:Dify的介绍
  • SpringMVC系列(七)(Restful架构风格(下))(完结篇)
  • SpringMVC系列(五)(响应实验以及Restful架构风格(上))
  • 微软人工智能证书AI-102 | 如何快速通过?