flutter路由之flutro
我这里使用的是
fluro
作为路由框架,下面是配置步骤。
依赖安装
yaml
# 版本为 2.0.5
fluro: ^2.0.5
路由配置
在项目中新建
routes
文件夹,分别下面新建以下文件。
dart
// application.dart
import 'package:fluro/fluro.dart';
// 创建 fluro 实例,用于处理后续的逻辑
class Application {
static late final FluroRouter router;
}
dart
// routes.dart
import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
// 需要配置的页面
import 'package:test_drive/pages/home.dart';
import 'package:test_drive/pages/mine.dart';
import 'package:test_drive/pages/listview.dart';
// 页面实例,可以配置传参
var _homeHandler = Handler(
handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
return const HomaPage();
});
var _mineHandler = Handler(
handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
return const MinePage();
});
var _listviewHandler = Handler(
handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
return const ListViewPage();
});
class Routes {
// 页面路由地址,后面会使用到(路由跳转)
static String home = '/';
static String mine = '/mine';
static String listview = '/listview';
static void configureRoutes(FluroRouter router) {
router.notFoundHandler = Handler(
handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
return;
});
// 生成配置实例
router.define(home, handler: _homeHandler);
router.define(mine, handler: _mineHandler);
router.define(listview, handler: _listviewHandler);
}
}
上面的配置做好以后,我们再项目入口函数
main.dart
里面,进行如下配置
dart
// main.dart
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:test_drive/routes/application.dart';
import 'package:test_drive/routes/navigator_util.dart';
import 'package:test_drive/routes/routes.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// 挂载路由
@override
void initState() {
super.initState();
final router = FluroRouter();
Application.router = router;
Routes.configureRoutes(router);
}
@override
Widget build(BuildContext context) {
final app = MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.amber,
),
onGenerateRoute: Application.router.generator, //全局注册
navigatorKey: navigatorKey,
);
return app;
}
}
新增
navigator_util.dart
工具类
dart
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:test_drive/routes/application.dart';
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
class NavigatorUtil {
static void push(
String path, {
bool replace = false, // 替换当前页面
bool clearStack = false, // 是否清空路由栈
Object? arguments,
TransitionType? transition, // 页面进入动效
}) {
Application.router.navigateTo(
navigatorKey.currentContext!,
path,
replace: replace,
clearStack: clearStack,
transition: transition ?? TransitionType.native,
routeSettings: RouteSettings(
arguments: arguments,
),
);
}
static void replase(String path,
{bool replase = true, bool clearStack = false, Object? arguments}) {
Application.router.navigateTo(navigatorKey.currentContext!, path,
replace: replase,
clearStack: clearStack,
transition: TransitionType.native,
routeSettings: RouteSettings(arguments: arguments));
}
static void switchTab(String path,
{bool replase = true, bool clearStack = true, Object? arguments}) {
Application.router.navigateTo(navigatorKey.currentContext!, path,
replace: replase,
clearStack: clearStack,
transition: TransitionType.native,
routeSettings: RouteSettings(arguments: arguments));
}
static void back({int count = 1, Object? params}) {
NavigatorState state = Navigator.of(navigatorKey.currentContext!);
while (count-- > 0) {
state = state..pop(params);
}
}
}
使用
在页面中使用, 示例如下:
dart
ElevatedButton.icon(
onPressed: () {
NavigatorUtil.push("/listview"); // 需要跳转的页面
},
label: const Text("列表加载"),
icon: const Icon(Icons.nat_outlined),
)