Flutter 10: 图解页面小跳转 (二)

简介:       小菜前两天尝试了一下 Flutter 中的页面跳转,主要时通过 Navigator 相关的 push 和 pop 方法进行页面跳转和基本传参,很方便也很简洁;今天小菜补充一下 Flutter 测试过程中常用的另一种页面跳转方式。

      小菜前两天尝试了一下 Flutter 中的页面跳转,主要时通过 Navigator 相关的 pushpop 方法进行页面跳转和基本传参,很方便也很简洁;今天小菜补充一下 Flutter 测试过程中常用的另一种页面跳转方式。

补充一

      小菜上一篇在测试页面跳转时,测试的页面都是在一个 main.dart 文件中;这样自然不合理,按照正常的业务逻辑会有很多分包,这样如何跳转到其他包下或其他文件下的 Page 页面呢?其实很简单,直接引入包名文件即可:

  1. import 包名 + 文件名,小菜测试发现 Flutter 没有像 Android 一样的清单文件,所以需要手动引入包名文件;
  1. 正常调用对应文件中 Page 页面跳转即可;

      Tips: 小菜建议不同文件中不要重名,如果本文件中有与其他包下文件中相同 Page 名称,会优先跳转到本文件中 Page 页。

补充二 fluro

小菜在学习中发现有的大神会用到 fluro,小菜也顺道学习一下,fluro 是 Flutter 关于页面跳转的三方库,它添加了灵活的 options 选项,如通配符、命名参数和清晰的跳转定义。

集成如下:
  1. 在 pubspec.yaml 中添加 fluro 依赖库 fluro: "^1.3.4",如图:
  1. 在需要跳转的页面引入包并初始化定义一个 Router,可以定义全局变量或静态变量,方便在其他地方引用;如图:
import 'package:fluro/fluro.dart';

Router router = new Router();
  1. 初始化之后定义 routes 和 route handlers
var homeHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
  return HomePage(params["data"][0]);
});

void defineRoutes(Router router) {
  router.define("/home/:data", handler: homeHandler);
}

defineRoutes(router);

Tips: params["data"][0] 中只可传0,否则数组越界。

  1. 调用跳转方式 navigateTo 即可:
onPressed: () {
  // 按 fluro 方式跳转页面并传参
  var bodyJson = {
    'user': (_phonecontroller.text),
    'pass': (_pwdcontroller.text)
  };
//  router.navigateTo(context, "/home/1234", transition: TransitionType.fadeIn);
  router.navigateTo(context, '/home/$bodyJson');
}

Tips: "/home/:data" 中的 data 可以直接传键值对,也可以传递 String/int 等类型的值,可以按需求随意传递;同事 router 也可以向自身传递数据,需添加 transition: TransitionType.fadeIn

      GitHub Demo


      小菜刚接触 Flutter 时间不长,还有很多不清楚和不理解的地方,如果又不对的地方还希望多多指出。以下是小菜公众号,欢迎闲来吐槽~

公众号

目录
相关文章
Flutter Getx 路由 until 方法帮助你跳转指定路由
不少同学都会问我,这样一个场景,当我点击商品列表,进入商品页,点击购买,支付成功后,想返回商品页,或者我的中心的订单列表。怎么做,这中间跨度了 n 个路由。 我不只一次的推荐 GetX 的 until 方法,和 offNamedUntil 方法。 我写了个 demo 今天我们就一起来看下这两个方法如何使用。
1712 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
|
1月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
186 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
133 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
105 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2月前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
132 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
2月前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
39 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
5月前
|
Dart 开发者
flutter:页面整合 (十)
本文档介绍了如何在 Flutter 应用中使用底部导航栏(`BottomNavigationBar`)和侧边栏(`Drawer`),包括简单的使用方法、属性配置、与按钮结合使用、使用图片作为图标、以及如何实现顶部导航。示例代码展示了如何创建包含多个页面的导航栏,并通过 `TabController` 控制器实现页面切换。同时,文档还提供了如何自定义导航栏样式和添加浮动操作按钮(`FloatingActionButton`)的方法。最后,整合了底部导航栏、侧边栏和顶部导航栏的完整示例代码,帮助开发者快速构建具有导航功能的 Flutter 应用界面。
|
8月前
|
Android开发
Flutter路由跳转参数处理小技巧
Flutter路由跳转参数处理小技巧
71 0
|
10月前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
500 0
Flutter仿写微信导航栏快速实现页面导航
Flutter仿写微信导航栏快速实现页面导航