Flutter路由扩展插件go_router_extension的使用

go_router_extension #

这是一个扩展包，旨在简化使用go_router包的过程。（正在开发中）

开始使用 #

该项目是一个用于Flutter的插件包， 这是一种专门的包，包括Android和/或iOS平台特定的实现代码。

有关如何开始Flutter开发的帮助，请查看 在线文档，其中包含教程、示例、移动开发指南以及完整的API参考。

example/lib/main.dart

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:go_router_extension/go_router_extension.dart';
import 'package:path/path.dart';

// 定义一个扩展类来构建自定义路由
extension MyRouteBuilder on MyRoute {
// 使用@PageLinkAnnotation注解来描述路由
@PageLinkAnnotation(page: HomeScreen, description: ‘ホーム 화면’)
static MyRoute get home => MyRoute(’/home’);


@PageLinkAnnotation(page: DetailScreen, description: ‘상세 화면’)
MyRoute get detail => MyRoute(join(path, ‘detail’));
}


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


// 主应用类
class MyApp extends StatelessWidget {
const MyApp({super.key});


@override
Widget build(BuildContext context) {
return const MaterialApp(home: HomeScreen());
}
}


// 主屏幕类
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});


@override
Widget build(BuildContext context) {
// 构建主屏幕路径
var path = MyRouteBuilder.home.build();
return Scaffold(
appBar: AppBar(
title: Text(‘path:$path’),
centerTitle: true,
),
body: const Center(
child: AspectRatio(
aspectRatio: 1,
child: DetailScreen() // 显示详细屏幕
),
),
);
}
}


// 详细屏幕类
class DetailScreen extends StatelessWidget {
const DetailScreen({super.key});


@override
Widget build(BuildContext context) {
// 构建详细屏幕路径
var path = MyRouteBuilder.home.detail.build();
return Scaffold(
backgroundColor: Colors.grey,
body: Center(
child: Text(‘path:$path’), // 显示路径
),
);
}
}


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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用go_router_extension插件的示例代码。这个插件扩展了go_router的功能，提供了更多的路由管理特性。

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

dependencies:
  flutter:
    sdk: flutter
  go_router: ^2.6.0  # 请检查最新版本号
  go_router_extension: ^0.1.0  # 请检查最新版本号

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

接下来，让我们编写一个基本的Flutter应用，展示如何使用go_router_extension。

main.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:go_router_extension/go_router_extension.dart';

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

class MyApp extends StatelessWidget {
  final GoRouter router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) {
          return HomeScreen();
        },
      ),
      GoRoute(
        path: '/details/:id',
        builder: (context, state) {
          final id = state.params['id']!;
          return DetailsScreen(id: id);
        },
      ),
    ],
    redirect: (context, state) {
      if (state.location == '/') {
        return '/details/1'; // 默认重定向到详情页
      }
      return null;
    },
  );

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final GoRouter goRouter = GoRouter.of(context);
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => goRouter.push('/details/2'),
          child: Text('Go to Details Screen'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  final String id;

  DetailsScreen({required this.id});

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

// 使用go_router_extension的例子
// 例如，扩展GoRouter以添加全局导航守卫
extension CustomGoRouterExtension on GoRouter {
  bool canNavigateAway(BuildContext context) {
    // 这里你可以添加一些逻辑，比如显示一个对话框询问用户是否确定要离开当前页面
    return showDialog<bool>(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Do you really want to leave?'),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.of(context).pop(false),
              child: Text('Cancel'),
            ),
            TextButton(
              onPressed: () => Navigator.of(context).pop(true),
              child: Text('OK'),
            ),
          ],
        );
      },
    ) ?? false;
  }
}

// 在需要的地方使用这个扩展
// 例如，在GoRoute的onPopPage回调中
// 注意：为了简洁，这里没有实际在GoRoute中添加这个回调，但你可以这样做

在这个示例中，我们：

  1. 创建了一个基本的Flutter应用，并配置了GoRouter来处理路由。
  2. 创建了两个屏幕：HomeScreen和DetailsScreen。
  3. 在HomeScreen上添加了一个按钮，用于导航到DetailsScreen。
  4. 展示了如何扩展GoRouter来添加一个全局导航守卫，这个守卫在尝试离开当前页面时会显示一个对话框。

请注意，go_router_extension本身可能不直接提供上述CustomGoRouterExtension功能，但这是一个示例，展示了如何扩展GoRouter来实现自定义功能。你可以根据go_router_extension的文档和实际功能来调整这个示例。

回到顶部