Flutter路由管理插件clean_framework_router的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter路由管理插件clean_framework_router的使用

Clean Framework Router

Flutter实现的Clean架构，灵感来源于Uncle Bob的指导原则。

安装插件

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

dependencies:
  clean_framework_router: ^1.0.0

然后运行flutter pub get以安装该库。

基本使用

创建路由配置

首先，你需要创建一个路由配置类来定义你的路由。例如：

import 'package:clean_framework_router/clean_framework_router.dart';

class AppRouter extends Router {
  @override
  void configureRoutes() {
    addRoute(
      routeName: 'home',
      path: '/',
      viewBuilder: (_) => HomeScreen(),
    );
    addRoute(
      routeName: 'details',
      path: '/details/:id',
      viewBuilder: (Map<String, dynamic> params) => DetailsScreen(id: params['id']),
    );
  }
}

初始化路由器

在你的应用入口点初始化路由器：

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

class MyApp extends StatelessWidget {
  final router = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: router.delegate(),
      routeInformationParser: router.parser(),
    );
  }
}

导航到其他页面

你可以在任何地方通过路由器导航到其他页面：

// 在某个Widget中
void navigateToDetails(String id) {
  router.go('details', {'id': id});
}

获取当前路径参数

在目标页面中，你可以通过RouteData获取当前路径参数：

class DetailsScreen extends StatefulWidget {
  final String id;

  DetailsScreen({required this.id});

  @override
  _DetailsScreenState createState() => _DetailsScreenState();
}

class _DetailsScreenState extends State<DetailsScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('详情'),
      ),
      body: Center(
        child: Text('ID: ${widget.id}'),
      ),
    );
  }
}

路由管理

替换当前路由

如果你想替换当前路由而不增加历史记录，可以使用replace方法：

router.replace('details', {'id': 'newId'});

返回上一级

你可以通过pop方法返回上一级：

router.pop();

监听路由变化

你还可以监听路由的变化：

router.addListener(() {
  print('Route changed to ${router.currentRoute}');
});

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

1 回复

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


当然，以下是一个关于如何使用 clean_framework_router 进行 Flutter 路由管理的代码示例。clean_framework_router 是一个用于 Flutter 的路由管理插件，它提供了一种清晰且结构化的方式来管理应用中的路由。

首先，确保你已经在 pubspec.yaml 文件中添加了 clean_framework_router 依赖：

dependencies:
  flutter:
    sdk: flutter
  clean_framework_router: ^最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，我们将展示如何配置和使用 clean_framework_router。

1. 配置路由

创建一个 router.dart 文件来配置你的路由：

import 'package:flutter/material.dart';
import 'package:clean_framework_router/clean_framework_router.dart';
import 'package:your_app/screens/home_screen.dart';
import 'package:your_app/screens/detail_screen.dart';

class AppRouter {
  final Router _router = Router();

  void configureRoutes() {
    _router.define('/', (context, state) => HomeScreen());
    _router.define('/detail/:id', (context, state) {
      final id = state.params['id']!;
      return DetailScreen(id: id);
    });
  }

  Router get router => _router;
}

2. 创建屏幕

创建两个简单的屏幕：home_screen.dart 和 detail_screen.dart。

home_screen.dart

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Router router = Router.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            router.navigateTo('/detail/123');
          },
          child: Text('Go to Detail'),
        ),
      ),
    );
  }
}

detail_screen.dart

import 'package:flutter/material.dart';

class DetailScreen extends StatelessWidget {
  final String id;

  DetailScreen({required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: Text('Detail for ID: $id'),
      ),
    );
  }
}

3. 在主应用中使用路由

在你的 main.dart 文件中，使用配置好的路由：

import 'package:flutter/material.dart';
import 'package:clean_framework_router/clean_framework_router.dart';
import 'router.dart';

void main() {
  final appRouter = AppRouter();
  appRouter.configureRoutes();

  runApp(MaterialApp.router(
    routeInformationParser: appRouter.router.routeInformationParser,
    routerDelegate: appRouter.router.routerDelegate,
  ));
}

总结

以上代码展示了如何使用 clean_framework_router 来配置和管理 Flutter 应用中的路由。我们通过定义一个 AppRouter 类来配置路由，然后在主应用中使用 MaterialApp.router 来启动应用，并使用配置的路由。

这个示例展示了基本的路由配置和导航，你可以根据需要扩展和自定义路由配置，以适应你的应用需求。

回到顶部