Flutter路由管理插件better_router的使用

特性

• 静态路由
• 动态路由
• 通配符匹配所有

开始使用

首先，在你的项目中添加 better_router 插件：

flutter pub add better_router

使用方法

示例代码

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

// 定义书籍类
class Book {
  final String id;
  final String name;
  final String author;

  const Book({required this.id, required this.name, required this.author});
}

void main() {
  // 定义一些书籍数据
  final books = [
    const Book(id: '3160', name: '奥德赛', author: '荷马'),
    const Book(id: '8795', name: '神曲', author: '但丁'),
  ];

  // 定义路由表
  final betterRoutes = BetterRouter(routes: {
    '/': DefaultPageRouteBuilder((context) => Column(children: [
          Text('首页'),
          TextButton(
              onPressed: () => Navigator.pushNamed(context, "/books"),
              child: Text("书籍")),
          TextButton(
            onPressed: () =>
                Navigator.pushNamed(context, "/this_page_does_not_exists"),
            child: Text("前往不存在的页面"),
          ),
          TextButton(
            onPressed: () =>
                Navigator.pushNamed(context, "/custom_route_transition"),
            child: Text("前往自定义过渡效果页面"),
          )
        ])),
    '/home': DefaultPageRouteBuilder((_) => Text('主页')),
    '/books': DefaultPageRouteBuilder((context) => Column(children: [
          for (var i = 0; i < books.length; i++)
            TextButton(
                onPressed: () =>
                    Navigator.pushNamed(context, "/books/${books[i].id}"),
                child: Text(books[i].name))
        ])),
    r"\/books\/(?<id>.+)": DefaultPageRouteBuilder((context) {
      final params = RouteParams.of(context);

      return Column(
        children: [Text('书籍详情页'), Text("书籍ID: ${params['id']}")],
      );
    }),
    '/custom_route_transition': (RouteSettings settings) => PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) =>
          Text("过渡效果"),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        var begin = Offset(0.0, 1.0);
        var end = Offset.zero;
        var tween = Tween(begin: begin, end: end);
        var offsetAnimation = animation.drive(tween);

        return SlideTransition(
          position: offsetAnimation,
          child: child,
        );
      },
    ),
    '*matchAll': PageRouteBuilder((_) => Text('找不到页面')),
  });

  // 运行应用
  runApp(MaterialApp(onGenerateRoute: betterRoutes));
}

代码解释

1. 定义书籍类：

   class Book {
     final String id;
     final String name;
     final String author;
   
     const Book({required this.id, required this.name, required this.author});
   }
   

   这里定义了一个简单的 Book 类来表示书籍信息。

2. 定义路由表：

   final betterRoutes = BetterRouter(routes: {
     '/': DefaultPageRouteBuilder((context) => Column(children: [
           Text('首页'),
           TextButton(
               onPressed: () => Navigator.pushNamed(context, "/books"),
               child: Text("书籍")),
           TextButton(
             onPressed: () =>
                 Navigator.pushNamed(context, "/this_page_does_not_exists"),
             child: Text("前往不存在的页面"),
           ),
           TextButton(
             onPressed: () =>
                 Navigator.pushNamed(context, "/custom_route_transition"),
             child: Text("前往自定义过渡效果页面"),
           )
         ])),
     '/home': DefaultPageRouteBuilder((_) => Text('主页')),
     '/books': DefaultPageRouteBuilder((context) => Column(children: [
           for (var i = 0; i < books.length; i++)
             TextButton(
                 onPressed: () =>
                     Navigator.pushNamed(context, "/books/${books[i].id}"),
                 child: Text(books[i].name))
         ])),
     r"\/books\/(?<id>.+)": DefaultPageRouteBuilder((context) {
       final params = RouteParams.of(context);
   
       return Column(
         children: [Text('书籍详情页'), Text("书籍ID: ${params['id']}")],
       );
     }),
     '/custom_route_transition': (RouteSettings settings) => PageRouteBuilder(
       pageBuilder: (context, animation, secondaryAnimation) =>
           Text("过渡效果"),
       transitionsBuilder: (context, animation, secondaryAnimation, child) {
         var begin = Offset(0.0, 1.0);
         var end = Offset.zero;
         var tween = Tween(begin: begin, end: end);
         var offsetAnimation = animation.drive(tween);
   
         return SlideTransition(
           position: offsetAnimation,
           child: child,
         );
       },
     ),
     '*matchAll': PageRouteBuilder((_) => Text('找不到页面')),
   });
   

   • / 路由：根路径，包含三个按钮，分别跳转到书籍列表页、不存在的页面和自定义过渡效果页面。
   • /home 路由：主页，仅显示文本 “主页”。
   • /books 路由：书籍列表页，动态生成按钮，每个按钮点击后跳转到对应的书籍详情页。
   • r"\/books\/(?<id>.+)" 路由：匹配书籍详情页，通过正则表达式捕获书籍ID。
   • /custom_route_transition 路由：自定义过渡效果页，使用滑动过渡动画。
   • *matchAll 路由：通配符路由，用于处理未匹配的路由。

3. 运行应用：

   runApp(MaterialApp(onGenerateRoute: betterRoutes));