Flutter路由管理插件wuchuheng_router的使用

Flutter路由管理插件wuchuheng_router的使用

什么是wuchuheng_router

系统中的导航页面管理和路由管理是不统一的，而easy_router则将两者统一起来，并通过路由管理整个应用程序界面。

特性

（此处省略特性部分）

安装

在你的项目中添加wuchuheng_router插件：

$ flutter pub add wuchuheng_router

通过路由管理页面

使用方法

以下是一个简单的示例，展示了如何使用wuchuheng_router来管理页面路由：

import 'package:flutter/material.dart';
import 'package:wuchuheng_router/route/route_abstract.dart';
import 'package:wuchuheng_router/wuchuheng_router.dart';

// 定义一个页面类，继承自Page
class HomePage extends Page {
  @override
  Route createRoute(BuildContext context) => MaterialPageRoute(
        settings: this,
        builder: (BuildContext context) => const _HomePage(),
      );
}

// 定义页面的具体实现
class _HomePage extends StatelessWidget {
  const _HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => const Text('home page');
}

// 创建一个WuchuhengRouter实例，并配置路由
final WuchuhengRouter route = WuchuhengRouter(
  {
    '/': () => HomePage(), // 设置主页路由
  },
  before: (RoutePageInfo pageInfo) async => pageInfo, // 可以在此处添加路由前的处理逻辑
);

// 创建应用程序主组件
class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return route.build(context, title: 'snotes'); // 使用WuchuhengRouter构建应用
  }
}

void main() async {
  runApp(const App()); // 运行应用
}

其他信息

以上就是使用wuchuheng_router的基本步骤。你可以根据实际需求进一步扩展和修改路由配置。


更多关于Flutter路由管理插件wuchuheng_router的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter路由管理插件wuchuheng_router的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


wuchuheng_router 是一个用于 Flutter 的路由管理插件，它可以帮助开发者更方便地管理和处理应用中的路由跳转。以下是如何使用 wuchuheng_router 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 wuchuheng_router 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  wuchuheng_router: ^1.0.0  # 请使用最新的版本号

然后运行 flutter pub get 来安装依赖。

2. 初始化路由管理器

在你的 main.dart 文件中，初始化路由管理器：

import 'package:flutter/material.dart';
import 'package:wuchuheng_router/wuchuheng_router.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 初始化路由管理器
      navigatorKey: WuchuhengRouter.navigatorKey,
      onGenerateRoute: WuchuhengRouter.onGenerateRoute,
      initialRoute: '/',
    );
  }
}

3. 定义路由

在你的应用代码中定义路由。你可以使用 WuchuhengRouter 来管理路由：

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 跳转到详情页
            WuchuhengRouter.pushNamed(context, '/detail');
          },
          child: Text('Go to Detail'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 返回上一页
            WuchuhengRouter.pop(context);
          },
          child: Text('Go back'),
        ),
      ),
    );
  }
}

4. 注册路由

在 main.dart 中注册路由：

void main() {
  // 注册路由
  WuchuhengRouter.registerRoutes({
    '/': (context) => HomePage(),
    '/detail': (context) => DetailPage(),
  });

  runApp(MyApp());
}

5. 使用路由跳转

在需要跳转的地方使用 WuchuhengRouter.pushNamed 方法进行路由跳转：

WuchuhengRouter.pushNamed(context, '/detail');

6. 传递参数

你也可以在跳转时传递参数：

WuchuhengRouter.pushNamed(context, '/detail', arguments: {'id': 123});

在目标页面中获取参数：

class DetailPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final Map<String, dynamic> arguments = WuchuhengRouter.of(context).arguments;
    final int id = arguments['id'];

    return Scaffold(
      appBar: AppBar(
        title: Text('Detail'),
      ),
      body: Center(
        child: Text('Detail ID: $id'),
      ),
    );
  }
}
回到顶部