Flutter路由管理插件wouter的使用

wouter 是一个用于Flutter应用的轻量级且强大的路由管理插件，旨在简化Navigator 2.0的复杂性，并提供类似Navigator 1.0的易用API。本文将介绍如何使用wouter插件进行路由管理，并提供完整的示例代码。

特点

• 简洁的API：类似于Navigator 1.0的API。
• 无样板代码：无需创建特殊的类来定义路径或位置。
• 正则表达式支持：使用path_to_regexp库支持路径匹配。
• 相对路径：支持相对路径（如push("../../here")）。
• 灵活的导航器：可以轻松地构建自己的导航器。

主要组件

Wouter

Wouter 组件用于封装一组具有相同基础路径的路径。

const Wouter({
    Key? key,
    required Widget child,
    PathMatcherBuilder matcher = PathMatchers.regexp,
    String base = "",
})

WouterSwitch

WouterSwitch 用于在一组路由之间切换，每个路由由正则表达式定义。

const WouterSwitch({
    Key? key,
    required Map<String, WouterRouteBuilder<T>> routes,
    List<NavigatorObserver> observers = const [],
    TransitionDelegate<T> transition = const DefaultTransitionDelegate(),
})

示例Demo

以下是一个完整的示例，展示如何使用wouter进行路由管理：

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

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

class MyApp extends StatelessWidget {
  final delegate = WouterRouterDelegate(
    child: WouterSwitch(
      routes: {
        "/": (context, arguments) => const MaterialPage(
              key: ValueKey("home"),
              child: HomeScreen(),
            ),
        "/people": (context, arguments) => const MaterialPage(
              key: ValueKey("people"),
              child: PeopleScreen(),
            ),
        "/:_(.*)": (context, arguments) => const MaterialPage(
              key: ValueKey("redirect"),
              child: Redirect(
                to: "/",
              ),
            ),
      },
    ),
  );

  @override
  Widget build(BuildContext context) => MaterialApp.router(
        routerDelegate: delegate,
        routeInformationParser: const WouterRouteInformationParser(),
        backButtonDispatcher: WouterBackButtonDispatcher(
          delegate: delegate,
        ),
      );
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push('/people');
          },
          child: const Text('Go to People'),
        ),
      ),
    );
  }
}

class PeopleScreen extends StatelessWidget {
  const PeopleScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('People')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text('Go back to Home'),
        ),
      ),
    );
  }
}

解释

1. MyApp：应用程序的根组件，设置WouterRouterDelegate和WouterSwitch来定义路由。
2. HomeScreen 和 PeopleScreen：两个简单的屏幕，分别显示“Home”和“People”，并提供按钮进行页面切换。
3. WouterSwitch：根据当前路径渲染不同的页面。
4. Redirect：用于重定向未知路径到指定路径。

通过这个示例，你可以看到wouter如何简化路由管理，并提供灵活的路由配置选项。希望这个示例能帮助你更好地理解和使用wouter插件。