flutter路由之flutro

flutter路由之flutro

我这里使用的是fluro作为路由框架，下面是配置步骤。

依赖安装

# 版本为 2.0.5
fluro: ^2.0.5

路由配置

在项目中新建 routes 文件夹，分别下面新建以下文件。

// application.dart
import 'package:fluro/fluro.dart';

// 创建 fluro 实例，用于处理后续的逻辑
class Application {
  static late final FluroRouter router;
}

// 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 里面，进行如下配置

// 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 工具类

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);
    }
  }
}

使用

在页面中使用, 示例如下：

ElevatedButton.icon(
    onPressed: () {
        NavigatorUtil.push("/listview"); // 需要跳转的页面
    },
    label: const Text("列表加载"),
    icon: const Icon(Icons.nat_outlined),
)