flutter路由之flutro配置

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),
)
相关推荐
江城开朗的豌豆几秒前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子4 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain911 分钟前
Gradle 8.11.1的升级之旅
前端
移动开发者1号12 分钟前
Kotlin协程超时控制:深入理解withTimeout与withTimeoutOrNull
android·kotlin
一拳不是超人21 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa
KaneLogger23 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
程序员JerrySUN27 分钟前
RK3588 Android SDK 实战全解析 —— 架构、原理与开发关键点
android·架构
前端风云志36 分钟前
JavaScript中如何遍历对象?
javascript
移动开发者1号40 分钟前
Java Phaser:分阶段任务控制的终极武器
android·kotlin
zwjapple7 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker