Flutter静态路由管理插件static_route的使用

Flutter静态路由管理插件static_route的使用

static_route 是一个用于静态页面导航路由模板库。

获取开始

1. 在 pubspec.yaml 文件中添加 static_route。

   dependencies:
     static_route: ^版本号
   

2. 导入 static_route 包。

   import 'package:static_route/static_route.dart';
   

在每个可导航页面中增加 StaticRouteFactory 类型的静态 route 变量：

class HomePage extends StatelessWidget {

  // 定义一个静态路由
  static final route = StaticRouteFactory(
    name: 'HomePage', // 路由名称
    builder: (BuildContext context, Object? arguments) {
      return HomePage();
    },
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HomePage')),
      body: Center(
        child: ElevatedButton(
          child: Text('Next page'),
          onPressed: () {
            // 导航到下一个页面
            Navigator.pushNamed(context, NextPage.route.name, arguments: 'from HomePage');
          },
        ),
      ),
    );
  }
}

class NextPage extends StatefulWidget {
  NextPage(this.content);

  final String content;

  // 定义一个静态路由
  static final route = StaticRouteFactory(
    name: 'NextPage',
    builder: (BuildContext context, Object? arguments) {
      return NextPage(arguments as String);
    },
  );

  [@override](/user/override)
  State createState() => _NextPageState();
}

在某个 Dart 文件中（例如 pages.dart）中注册每个可导航页面的 route 列表：

// 注册所有可导航页面的路由
final routeTable = <StaticRoute>[
  HomePage.route,
  NextPage.route,
  // 其他页面...
];

在应用入口点 MaterialApp 的 onGenerateRoute 中调用 Iterable<StaticRoute> 的扩展方法 generateRoute 注册 routeTable 中的路由器：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      onGenerateRoute: routeTable.generateRoute,
      initialRoute: HomePage.route.name,
    );
  }
}

使用示例

在 main.dart 文件中，可以这样使用：

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

// 主应用类
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      onGenerateRoute: routeTable.generateRoute,
      initialRoute: HomePage.route.name,
    );
  }
}

// 注册所有可导航页面的路由
final routeTable = <StaticRoute>[
  HomePage.route,
  NextPage.route,
];

// 主页面
class HomePage extends StatelessWidget {
  static final route = StaticRoute(
    name: 'HomePage',
    builder: (RouteSettings settings) {
      return MaterialPageRoute(
        settings: settings,
        builder: (context) => HomePage(),
      );
    },
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HomePage')),
      body: Center(
        child: ElevatedButton(
          child: Text('Next page'),
          onPressed: () {
            // 导航到下一个页面
            Navigator.pushNamed(context, NextPage.route.name, arguments: 'from HomePage');
          },
        ),
      ),
    );
  }
}

// 下一个页面
class NextPage extends StatefulWidget {
  NextPage(this.content);

  final String content;

  static final route = StaticRouteFactory(
    name: 'NextPage',
    builder: (BuildContext context, Object? arguments) {
      return NextPage(arguments as String);
    },
  );

  [@override](/user/override)
  State createState() => _NextPageState();
}

// 下一个页面的状态类
class _NextPageState extends State<NextPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('NextPage')),
      body: Center(
        child: Text(widget.content),
      ),
    );
  }
}