Flutter for OpenHarmony 实战：mango_shop 路由系统的配置与页面跳转逻辑

在这里插入图片描述

作者：爱吃大芒果

个人主页 爱吃大芒果

本文所属专栏Flutter

更多专栏
Ascend C 算子开发教程（进阶）
鸿蒙集成
OpenAgents
openJiuwen
从0到1自学C++

路由系统概述

路由是 Flutter 应用中页面导航的核心机制，它负责管理不同页面之间的切换和数据传递。在 Flutter for OpenHarmony 环境下，路由系统的实现需要考虑跨平台兼容性，确保在 OpenHarmony 平台上的表现与其他平台一致。

项目当前路由实现分析

1. 路由配置结构

mango_shop 项目当前的路由配置非常简洁，主要包含以下部分：

// lib/routes/index.dart
Map<String, Widget Function(BuildContext)> getRootRoutes(){
  return {
    "/": (context) => Mainpage(),//主页路由
    "/login": (context) => LoginPage(),//登录路由
    "/search": (context) => SearchView(),//搜索页面路由
  };
}

在这里插入图片描述

2. 主页面导航实现

主页面 Mainpage 使用 IndexedStack 实现底部导航栏的页面切换：

// lib/pages/Main/index.dart
List<Widget> _getChildren(){
  return [
    HomeView(),
    categoryView(
      cartItems: _cartItems,
      onCartItemsChanged: _updateCartItems,
      onCartCountChanged: (count) {
        setState(() {
          // 这里不需要手动更新，因为_cartCount是根据_cartItems计算的
        });
      },
    ),
    CartView(
      cartItems: _cartItems,
      onCartItemsChanged: _updateCartItems,
      onCartCountChanged: (count) {
        setState(() {
          // 这里不需要手动更新，因为_cartCount是根据_cartItems计算的
        });
      },
    ),
    MineView()
  ];
}

在这里插入图片描述

3. 页面跳转实现

目前项目中实现的页面跳转主要有：

  1. 底部导航栏切换：通过 _currentIndex 状态管理，使用 setState 更新
  2. 搜索页面跳转：在首页通过 Navigator.pushNamed(context, '/search') 实现

路由系统优化方案

1. 路由配置优化

1.1 集中式路由管理

建议采用集中式路由管理方案，将所有路由配置集中到一个文件中：

// lib/routes/router.dart
import 'package:flutter/material.dart';
import 'package:mango_shop/pages/Main/index.dart';
import 'package:mango_shop/pages/login/index.dart';
import 'package:mango_shop/pages/Search/index.dart';
import 'package:mango_shop/pages/Mine/AddressManagement.dart';
import 'package:mango_shop/pages/Mine/EditProfile.dart';
import 'package:mango_shop/pages/Mine/Settings.dart';
import 'package:mango_shop/pages/Orders/PendingPaymentOrders.dart';
import 'package:mango_shop/pages/Orders/PendingShipmentOrders.dart';
import 'package:mango_shop/pages/Orders/ShippingOrders.dart';

// 路由名称常量
class RouteNames {
  static const String home = '/';
  static const String login = '/login';
  static const String search = '/search';
  static const String addressManagement = '/addressManagement';
  static const String editProfile = '/editProfile';
  static const String settings = '/settings';
  static const String pendingPaymentOrders = '/pendingPaymentOrders';
  static const String pendingShipmentOrders = '/pendingShipmentOrders';
  static const String shippingOrders = '/shippingOrders';
}

// 路由配置
class AppRouter {
  static Map<String, Widget Function(BuildContext)> routes = {
    RouteNames.home: (context) => Mainpage(),
    RouteNames.login: (context) => LoginPage(),
    RouteNames.search: (context) => SearchView(),
    RouteNames.addressManagement: (context) => AddressManagement(),
    RouteNames.editProfile: (context) => EditProfile(),
    RouteNames.settings: (context) => Settings(),
    RouteNames.pendingPaymentOrders: (context) => PendingPaymentOrders(),
    RouteNames.pendingShipmentOrders: (context) => PendingShipmentOrders(),
    RouteNames.shippingOrders: (context) => ShippingOrders(),
  };

  // 生成MaterialApp的routes配置
  static Map<String, Widget Function(BuildContext)> generateRoutes() {
    return routes;
  }
}
1.2 路由生成器

为了支持动态路由参数，建议添加路由生成器：

// lib/routes/router.dart 续
class AppRouter {
  // ... 之前的代码 ...

  // 路由生成器
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case RouteNames.home:
        return MaterialPageRoute(builder: (_) => Mainpage());
      case RouteNames.login:
        return MaterialPageRoute(builder: (_) => LoginPage());
      case RouteNames.search:
        // 支持搜索参数
        final String? searchQuery = settings.arguments as String?;
        return MaterialPageRoute(
          builder: (_) => SearchView(searchQuery: searchQuery),
        );
      case RouteNames.addressManagement:
        return MaterialPageRoute(builder: (_) => AddressManagement());
      case RouteNames.editProfile:
        return MaterialPageRoute(builder: (_) => EditProfile());
      case RouteNames.settings:
        return MaterialPageRoute(builder: (_) => Settings());
      case RouteNames.pendingPaymentOrders:
        return MaterialPageRoute(builder: (_) => PendingPaymentOrders());
      case RouteNames.pendingShipmentOrders:
        return MaterialPageRoute(builder: (_) => PendingShipmentOrders());
      case RouteNames.shippingOrders:
        return MaterialPageRoute(builder: (_) => ShippingOrders());
      default:
        // 未知路由，返回首页
        return MaterialPageRoute(builder: (_) => Mainpage());
    }
  }
}

2. 导航服务封装

为了简化导航操作，建议封装一个导航服务：

// lib/routes/navigation_service.dart
import 'package:flutter/material.dart';
import 'package:mango_shop/routes/router.dart';

class NavigationService {
  static final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  // 导航到指定路由
  static Future<dynamic> navigateTo(String routeName, {dynamic arguments}) {
    return navigatorKey.currentState?.pushNamed(routeName, arguments: arguments);
  }

  // 替换当前路由
  static Future<dynamic> replaceWith(String routeName, {dynamic arguments}) {
    return navigatorKey.currentState?.pushReplacementNamed(routeName, arguments: arguments);
  }

  // 导航到指定路由并移除所有之前的路由
  static Future<dynamic> navigateToAndRemoveAll(String routeName, {dynamic arguments}) {
    return navigatorKey.currentState?.pushNamedAndRemoveUntil(
      routeName,
      (Route<dynamic> route) => false,
      arguments: arguments,
    );
  }

  // 弹出当前路由
  static void pop<T>([T? result]) {
    navigatorKey.currentState?.pop(result);
  }

  // 弹出到指定路由
  static void popUntil(String routeName) {
    navigatorKey.currentState?.popUntil(ModalRoute.withName(routeName));
  }
}

3. 应用入口配置

更新应用入口，使用新的路由配置：

// lib/routes/index.dart
import 'package:flutter/material.dart';
import 'package:mango_shop/routes/router.dart';
import 'package:mango_shop/routes/navigation_service.dart';

// 返回APP根级组件
Widget getRootWidget() {
  return MaterialApp(
    // 路由导航键
    navigatorKey: NavigationService.navigatorKey,
    // 初始路由
    initialRoute: RouteNames.home,
    // 路由生成器
    onGenerateRoute: AppRouter.generateRoute,
    // 命名路由
    routes: AppRouter.generateRoutes(),
  );
}

页面跳转逻辑最佳实践

1. 底部导航栏实现优化

当前使用 IndexedStack 实现底部导航栏，这种方式会保持所有页面的状态，适合大多数场景。但如果页面较多或较复杂，可以考虑使用 PageView 实现：

class Mainpage extends StatefulWidget {
  Mainpage({Key? key}) : super(key: key);

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

class _MainpageState extends State<Mainpage> {
  int _currentIndex = 0;
  final PageController _pageController = PageController(initialPage: 0);
  // ... 其他代码 ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        children: _getChildren(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        // ... 其他配置 ...
        currentIndex: _currentIndex,
        onTap: (index) {
          _pageController.jumpToPage(index);
        },
      ),
    );
  }
}

在这里插入图片描述

2. 页面跳转方式选择

根据不同场景选择合适的页面跳转方式：

  1. 普通跳转：使用 Navigator.pushNamed 或 NavigationService.navigateTo

    • 适用于大多数页面跳转场景

  2. 带参数跳转：使用带参数的 pushNamed 或 navigateTo

    • 适用于需要传递数据的场景，如商品详情页

  3. 替换当前页面：使用 Navigator.pushReplacementNamed 或 NavigationService.replaceWith

    • 适用于登录后不再返回登录页的场景

  4. 清除所有历史页面：使用 Navigator.pushNamedAndRemoveUntil 或 NavigationService.navigateToAndRemoveAll

    • 适用于退出登录后返回登录页的场景

3. 页面返回逻辑处理

  1. 普通返回：使用 Navigator.pop 或 NavigationService.pop
  2. 带返回值：使用 Navigator.pop(context, result) 传递返回值
  3. 拦截返回：使用 WillPopScope 拦截返回事件，实现自定义返回逻辑

跨平台路由适配

1. OpenHarmony 平台适配

在 OpenHarmony 平台上，路由系统的实现需要注意以下几点：

  1. 路由动画：OpenHarmony 平台对动画的支持可能与其他平台有所不同，建议使用平台感知的动画实现

  2. 页面转场：根据 OpenHarmony 的设计规范，调整页面转场动画

  3. 导航栏适配：OpenHarmony 平台的导航栏可能与其他平台不同，需要进行适配

2. 平台感知路由实现

// lib/routes/platform_router.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

class PlatformRouter {
  // 判断当前平台
  static bool get isOpenHarmony {
    return Platform.environment.containsKey('OHOS') || 
           Platform.operatingSystem.toLowerCase() == 'openharmony';
  }

  // 获取平台特定的页面转场动画
  static PageTransitionsBuilder getPageTransitionsBuilder() {
    if (isOpenHarmony) {
      // OpenHarmony 平台的转场动画
      return CupertinoPageTransitionsBuilder();
    }
    // 其他平台的转场动画
    return FadeUpwardsPageTransitionsBuilder();
  }

  // 获取平台特定的导航栏高度
  static double getNavBarHeight(BuildContext context) {
    if (isOpenHarmony) {
      // OpenHarmony 平台的导航栏高度
      return kBottomNavigationBarHeight + MediaQuery.of(context).padding.bottom;
    }
    // 其他平台的导航栏高度
    return kBottomNavigationBarHeight;
  }
}

路由系统性能优化

1. 路由预加载

对于常用页面，可以实现路由预加载，提高页面切换速度：

// lib/routes/preload_service.dart
import 'package:flutter/material.dart';

class PreloadService {
  static final Map<String, Widget> _preloadedWidgets = {};

  // 预加载页面
  static void preloadWidget(String routeName, Widget widget) {
    _preloadedWidgets[routeName] = widget;
  }

  // 获取预加载的页面
  static Widget? getPreloadedWidget(String routeName) {
    return _preloadedWidgets[routeName];
  }

  // 清除预加载的页面
  static void clearPreloadedWidget(String routeName) {
    _preloadedWidgets.remove(routeName);
  }

  // 清除所有预加载的页面
  static void clearAllPreloadedWidgets() {
    _preloadedWidgets.clear();
  }
}

2. 路由缓存管理

实现路由缓存管理，避免重复创建页面：

// lib/routes/cache_manager.dart
import 'package:flutter/material.dart';

class RouteCacheManager {
  static final Map<String, Widget> _routeCache = {};

  // 缓存路由
  static void cacheRoute(String routeName, Widget widget) {
    _routeCache[routeName] = widget;
  }

  // 获取缓存的路由
  static Widget? getCachedRoute(String routeName) {
    return _routeCache[routeName];
  }

  // 清除缓存的路由
  static void clearCachedRoute(String routeName) {
    _routeCache.remove(routeName);
  }

  // 清除所有缓存的路由
  static void clearAllCachedRoutes() {
    _routeCache.clear();
  }
}

3. 延迟加载路由

对于大型页面，可以实现延迟加载，提高应用启动速度：

// lib/routes/lazy_router.dart
import 'package:flutter/material.dart';

class LazyRouter {
  // 延迟加载路由
  static Future<Widget> loadRouteAsync(String routeName) async {
    // 根据路由名称异步加载页面
    switch (routeName) {
      case '/profile':
        // 模拟网络请求或其他异步操作
        await Future.delayed(Duration(milliseconds: 200));
        // 动态导入页面
        final module = await import('package:mango_shop/pages/Mine/index.dart');
        return module.MineView();
      default:
        return Container();
    }
  }
}

实际应用示例

1. 搜索页面跳转优化

// 优化前
GestureDetector(
  onTap: () {
    Navigator.pushNamed(context, '/search');
  },
  // ... 其他代码 ...
),

// 优化后
GestureDetector(
  onTap: () {
    NavigationService.navigateTo(RouteNames.search);
  },
  // ... 其他代码 ...
),

在这里插入图片描述

2. 带参数的商品详情页跳转

// 商品卡片点击事件
GestureDetector(
  onTap: () {
    NavigationService.navigateTo('/productDetail', arguments: {
      'productId': product.id,
      'productName': product.name,
    });
  },
  // ... 其他代码 ...
),

在这里插入图片描述

3. 登录后跳转

// 登录成功后
void _onLoginSuccess() {
  // 替换当前页面，不再返回登录页
  NavigationService.replaceWith(RouteNames.home);
}

在这里插入图片描述

测试与调试

1. 路由测试策略

  1. 单元测试：测试路由配置是否正确
  2. 集成测试：测试页面跳转逻辑是否正常
  3. 性能测试：测试路由切换的性能表现
  4. 跨平台测试：确保在所有平台上路由系统表现一致

2. 路由调试工具

  1. 路由日志：添加路由跳转日志，便于调试
  2. 路由监控：监控路由栈的变化，了解导航状态
  3. 性能分析：分析路由切换的性能瓶颈

总结与展望

通过本文介绍的路由系统优化方案，我们可以：

  1. 提高代码可维护性：集中式路由管理，便于统一管理和修改
  2. 简化导航操作：封装导航服务，减少重复代码
  3. 增强跨平台兼容性：针对 OpenHarmony 平台进行适配
  4. 提升用户体验：优化页面跳转逻辑和动画效果
  5. 提高应用性能：实现路由预加载和缓存管理

未来，可以考虑：

  1. 路由守卫：实现路由权限控制，如未登录用户无法访问需要登录的页面
  2. 深度链接：支持从外部应用或网页跳转到应用内部页面
  3. 动态路由：根据后端配置动态生成路由
  4. 路由分析：分析用户导航行为，优化应用流程

Flutter for OpenHarmony 为跨平台应用开发提供了新的可能性，通过合理的路由系统设计，可以构建出在所有平台上表现出色的应用。

欢迎加入开源鸿蒙跨平台社区：开源鸿蒙跨平台开发者社区

# flutter # javascript # 开发语言
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter for OpenHarmony 剧本杀组队App实战04：发起组队表单实现

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony 剧本杀组队App实战04：发起组队表单实现

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony 剧本杀组队App实战04：发起组队表单实现

avatar 开源鸿蒙跨平台开发者社区