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

Flutter flutter_boost 集成

刚开始接触使用flutter boost路由的心得体会记录如下:

Fltter项目部分:

  • 第一步
    在Flutter项目的 pubspec.yaml文件中添加如下信息:
flutter_boost:git:url: 'https://github.com/alibaba/flutter_boost.git'ref: '4.3.0'

之后在flutter工程下运行flutter pub get dart端就集成完毕了,然后可以在dart端上使用flutter boost了。

  • 第二步
    在main.dart 文件中进行代码编写
import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:list/douban/hyrouter.dart';void main() {// 这里的CustomFlutterBinding 调用务必不可缺少,用于控制Boost状态的resume磨合pauseCustomFlutterBinding();runApp(const MyApp());
}// 创建一个自定义的Biding,继承和with的关系如下,里面什么都不用写
class CustomFlutterBinding extends WidgetsFlutterBinding with BoostFlutterBinding{}class MyApp extends StatelessWidget {const MyApp({super.key});
// FlutterBoostRouteFactory 使用
// 这是创建了一个文件单独管理路由映射表 HYRouterRoute<dynamic>? routeFactory(RouteSettings settings, String? uniqueId) {FlutterBoostRouteFactory func = HYRouter.routeMap[settings.name] as FlutterBoostRouteFactory;return func(settings, uniqueId);}Widget appBuilder(Widget home) {return MaterialApp(home: home,debugShowCheckedModeBanner: true,// 必须加上builder参数,否则 showDialog 等会出问题builder: (_, __){return home;},);}// This widget is the root of your application.Widget build(BuildContext context) {return FlutterBoostApp(// 这里是使用上面工厂 routerouteFactory,appBuilder: appBuilder);}
}

路由管理类:

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:list/douban/detail.dart';
import 'hello.dart';class HYRouter {static const String home = '/';static const String detail = '/detail';static final Map<String, FlutterBoostRouteFactory> routeMap = {
// 路由注册home:(settings, uniqueId) {return MaterialPageRoute(settings: settings,builder: (_) {return HelloPage();});},detail:(settings, uniqueId) {return MaterialPageRoute(settings:  settings,builder: (_) {final map = settings.arguments as Map<String, dynamic>;print("detail: ${map}");return DetailPage();});}};}

创建 home = ‘/’ widget,进入flutter的入口

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:list/douban/hyrouter.dart';class HelloPage extends StatefulWidget {State<StatefulWidget> createState() {return _HelloPageState();}
}class _HelloPageState extends State<HelloPage> {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("home"),),body: Center(child: Column (mainAxisAlignment: MainAxisAlignment.center,children: [TextButton(child: Text("跳转详情"),onPressed: () {print("点击跳转详情");// 使用flutter boost跳转,也可以使用 Navigator ofBoostNavigator.instance.push(HYRouter.detail,arguments: {"home":"home界面传给detail的数据"});},)],),),);}}

页面返回上一级

 BoostNavigator.instance.pop("点击返回首页的数据");

到此一个简单集成 使用 flutter boos完毕

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

相关文章:

  • Stable Diffusion中人物生成相关的negative prompts
  • QT - 建立页面
  • python中几个有趣的函数和推导式
  • 【Jenkins】Jenkins 安装
  • LNMP搭建以及Discuz论坛部署
  • MGRE综合
  • hcip的mgre和ospf实验
  • gdb学习笔记
  • java -jar指定外部配置文件
  • 【IDEA】常用插件清单
  • 私域流量运营数据分析:6个关键指标
  • 解释器模式——自定义语言的实现
  • 基于STM32103移植FreeRTOS
  • docker compose一键部署lnmt环境
  • Eeny Meeny Moo
  • flask---闪现/请求扩展/g对象
  • Qt视频播放器
  • Stable Diffusion教程(8) - X/Y/Z 图表使用
  • Android 获取网关 ip 和 DNS ip
  • Docker root用户的pip使用方法
  • 企业新片场排名如何优化
  • Database Name
  • git代码版本管理
  • k8s概念-ConfigMap
  • Mybatis 实体类属性名和表中字段名不一致怎么处理
  • CAS - 从AtomicInteger窥探CAS
  • micro-ros IMU ML 代码
  • 二十三种设计模式第二十四篇--访问者模式(完结撒花)
  • 月报总结|Moonbeam 7月份大事一览
  • 【2023.8】docker一键部署wvp-GB28181-pro和ZLMediaKit过程全记录