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),
)
相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
哲科软件7 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风7 小时前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js