主机搭建网站教程山东大学经济研究院
刚开始接触使用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完毕