Flutter路由管理与注解插件flutter_mixin_router_ann的使用

Flutter路由管理与注解插件flutter_mixin_router_ann的使用

在Flutter开发中，路由管理是一项重要的任务。为了简化路由管理和页面跳转的复杂性，可以使用一些框架和插件来帮助我们。本文将介绍如何使用flutter_mixin_router框架，并结合flutter_mixin_router_ann插件来实现路由管理。

项目设置

首先，确保你的项目已经添加了必要的依赖项。打开pubspec.yaml文件并添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_mixin_router: ^0.0.1
  flutter_mixin_gen: ^0.0.1

然后运行flutter pub get命令以安装这些依赖项。

配置路由

接下来，我们需要配置路由。在项目的入口文件中，例如main.dart，我们可以创建一个路由表并初始化路由管理器。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: AppRouterDelegate(),
      routeInformationParser: AppRouteInformationParser(),
    );
  }
}

// 定义路由委托类
class AppRouterDelegate extends RouterDelegate<AppRoutePath>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<AppRoutePath> {
  @override
  Widget build(BuildContext context) {
    // 根据路由路径返回相应的页面
    return Navigator(
      pages: [
        if (_currentPath is HomePath)
          MaterialPage(child: HomePage())
        else if (_currentPath is DetailPath)
          MaterialPage(child: DetailPage())
      ],
      onPopPage: (route, result) {
        if (!route.didPop(result)) {
          return false;
        }
        _currentPath = HomePath();
        notifyListeners();
        return true;
      },
    );
  }

  // 当前路径
  AppRoutePath get _currentPath => _navigatorKeys.first.currentState?.widget as AppRoutePath;

  // 导航键列表
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [GlobalKey<NavigatorState>()];

  // 重写go方法
  void go(AppRoutePath path) {
    _currentPath = path;
    notifyListeners();
  }
}

// 定义路由信息解析器
class AppRouteInformationParser extends RouteInformationParser<AppRoutePath> {
  @override
  Future<AppRoutePath> parseRouteInformation(RouteInformation routeInformation) async {
    final uri = Uri.parse(routeInformation.location!);
    if (uri.pathSegments.isEmpty) {
      return HomePath();
    }
    if (uri.pathSegments.length == 1 && uri.pathSegments.first == "detail") {
      return DetailPath();
    }
    return HomePath();
  }

  @override
  RouteInformation restoreRouteInformation(AppRoutePath configuration) {
    if (configuration is HomePath) {
      return const RouteInformation(location: "/");
    } else if (configuration is DetailPath) {
      return const RouteInformation(location: "/detail");
    }
    return const RouteInformation(location: "/");
  }
}

// 路由路径类
class AppRoutePath {
  final String location;
  AppRoutePath({this.location = "/"});
}

// 主页路径类
class HomePath extends AppRoutePath {
  HomePath() : super(location: "/");
}

// 详情页路径类
class DetailPath extends AppRoutePath {
  DetailPath() : super(location: "/detail");
}

使用注解插件

现在我们引入flutter_mixin_router_ann插件来简化路由定义和页面跳转。

添加注解

首先，在你的页面类上添加注解以标识它们的路由路径。例如：

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

@RoutePage(path: "/home")
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("首页"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pushNamed("/detail");
          },
          child: Text("跳转到详情页"),
        ),
      ),
    );
  }
}

@RoutePage(path: "/detail")
class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("详情页"),
      ),
      body: Center(
        child: Text("这是详情页"),
      ),
    );
  }
}

生成路由代码

运行flutter pub run build_runner build命令以生成路由相关的代码。

页面跳转

现在，你可以在应用中轻松地进行页面跳转。例如，从首页跳转到详情页：

onPressed: () {
  Navigator.of(context).pushNamed("/detail");
},