Flutter路由管理插件routly的使用

Routly是一个个人项目，旨在自我训练数据结构和算法。其主要目标是利用二叉树或树算法来高效地识别URL路径匹配。

示例

动态ID匹配

• 路径模板: <code>/users/{id}</code>
• 示例路径: <code>/users/thisIsID10</code>

严格整数ID匹配

• 路径模板: <code>/users/{id:int}</code>
• 示例路径: <code>/users/1323</code>

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用routly进行路由管理：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Routly Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      onGenerateRoute: (settings) {
        return Router.generateRoute(settings);
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/users/thisIsID10');
          },
          child: Text('Go to User Page'),
        ),
      ),
    );
  }
}

class UserPage extends StatelessWidget {
  final String userId;

  UserPage({required this.userId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Page'),
      ),
      body: Center(
        child: Text('User ID: $userId'),
      ),
    );
  }
}

// 配置路由
Router.register('/users/{id}', (context, params) => UserPage(userId: params['id']));

代码解释

1. 导入必要的包:

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

2. 定义主应用类:

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Routly Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         initialRoute: '/',
         onGenerateRoute: (settings) {
           return Router.generateRoute(settings);
         },
       );
     }
   }
   

3. 定义首页组件:

   class HomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Home Page'),
         ),
         body: Center(
           child: ElevatedButton(
             onPressed: () {
               Navigator.pushNamed(context, '/users/thisIsID10');
             },
             child: Text('Go to User Page'),
           ),
         ),
       );
     }
   }
   

4. 定义用户页面组件:

   class UserPage extends StatelessWidget {
     final String userId;
   
     UserPage({required this.userId});
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('User Page'),
         ),
         body: Center(
           child: Text('User ID: $userId'),
         ),
       );
     }
   }
   

5. 配置路由:

   Router.register('/users/{id}', (context, params) => UserPage(userId: params['id']));