Flutter for OpenHarmony 实战：mango_shop 项目初始化与目录架构搭建

作者：爱吃大芒果

本文所属专栏Flutter

项目概述

mango_shop 是一个基于 Flutter 开发的跨平台电商应用，支持 Android、iOS、Web、Windows、Linux 以及 OpenHarmony 等多个平台。本文将详细介绍该项目的初始化过程、目录架构设计以及 OpenHarmony 平台的适配方案。

项目初始化

1. 创建 Flutter 项目

首先，我们需要使用 Flutter 命令行工具创建一个新的 Flutter 项目：

bash 复制代码

flutter create mango_shop

2. 配置项目依赖

在项目的 pubspec.yaml 文件中，我们配置了以下依赖：

yaml 复制代码

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  carousel_slider: ^5.1.1
  image_picker: ^1.1.1

其中：

cupertino_icons：提供 iOS 风格的图标
carousel_slider：用于实现首页轮播图功能
image_picker：用于图片选择功能，可用于用户头像上传等场景

3. 配置 OpenHarmony 支持

Flutter 3.0+ 版本已经内置了对 OpenHarmony 的支持，我们可以通过以下命令为项目添加 OpenHarmony 平台：

bash 复制代码

flutter create --platforms=ohos .

执行完成后，项目会生成 ohos 目录，包含 OpenHarmony 应用的配置和代码。

目录架构设计

mango_shop 项目采用了清晰的目录架构设计，便于代码管理和维护。整体结构如下：

1. 核心目录结构

复制代码

mango_shop/
├── lib/                # Flutter 应用核心代码
│   ├── assets/         # 静态资源文件（图片、图标等）
│   ├── components/     # 可复用组件
│   ├── pages/          # 页面
│   ├── routes/         # 路由配置
│   ├── utils/          # 工具类
│   └── main.dart       # 应用入口
├── ohos/               # OpenHarmony 平台代码
├── android/            # Android 平台代码
├── ios/                # iOS 平台代码
├── web/                # Web 平台代码
├── windows/            # Windows 平台代码
├── linux/              # Linux 平台代码
└── pubspec.yaml        # 项目配置文件

2. 详细目录说明

2.1 lib 目录

assets 目录：存放应用所需的图片、图标等静态资源，包括：

公共图标：如底部导航栏的图标
商品图片：如水果、蔬菜、饮料等商品图片
其他图片资源

components 目录：按功能模块划分的可复用组件，如：

Home 模块组件：轮播图、分类导航、热门商品等
其他功能模块的组件

pages 目录：应用的各个页面，按功能模块划分：

Main：主页面，包含底部导航栏
Home：首页
Category：分类页
Cart：购物车页
Mine：个人中心页
Search：搜索页
Login：登录页
Orders：订单相关页面

routes 目录：路由配置，管理应用的导航结构。

utils 目录：工具类，如颜色定义、文本样式等。

2.2 ohos 目录

OpenHarmony 平台的代码目录，结构符合 OpenHarmony 应用规范：

复制代码

ohos/
├── AppScope/           # 应用全局配置
│   └── resources/      # 应用全局资源
├── entry/              # 应用入口模块
│   ├── src/            # 源代码
│   │   ├── main/       # 主代码
│   │   │   ├── ets/    # ArkTS 代码
│   │   │   └── resources/ # 资源文件
│   │   └── ohosTest/   # 测试代码
│   └── module.json5    # 模块配置
└── build-profile.json5 # 构建配置

核心功能实现

1. 应用入口与路由配置

应用的入口文件是 lib/main.dart，通过 runApp(getRootWidget()) 启动应用。路由配置在 lib/routes/index.dart 中定义，使用 MaterialApp 的 routes 属性配置命名路由：

dart 复制代码

// 返回APP根级组件
Widget getRootWidget(){
   return MaterialApp(
    //命名路由
    routes: getRootRoutes(),
   );
}

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

2. 主页面与底部导航栏

主页面 Mainpage 实现了底部导航栏功能，包含首页、分类、购物车和我的四个标签页：

dart 复制代码

// 定义Tab栏数据
final List<Map<String, dynamic>> _tablist = [
  {
    "icon": "lib/assets/ic_public_home_normal.png",
    "activeIcon": "lib/assets/ic_public_home_active.png",
    "text": "首页",
    "page": Center(child: Text("首页")),
  },
  {
    "icon": "lib/assets/ic_public_pro_normal.png",
    "activeIcon": "lib/assets/ic_public_pro_active.png",
    "text": "分类",
    "page": Center(child: Text("分类")),
  },
  {
    "icon": "lib/assets/ic_public_cart_normal.png",
    "activeIcon": "lib/assets/ic_public_cart_active.png",
    "text": "购物车",
    "page": Center(child: Text("购物车")),
  },
  {
    "icon": "lib/assets/ic_public_my_normal.png",
    "activeIcon": "lib/assets/ic_public_my_active.png",
    "text": "我的",
    "page": Center(child: Text("我的")),
  },
];

购物车标签页还实现了商品数量的角标显示：

dart 复制代码

// 购物车图标添加数量显示
if (index == 2) {
  return Stack(
    alignment: Alignment.topRight,
    children: [
      icon,
      if (_cartCount > 0)
        Container(
          padding: EdgeInsets.all(2),
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(10),
          ),
          constraints: BoxConstraints(
            minWidth: 18,
            minHeight: 18,
          ),
          child: Text(
            _cartCount > 99 ? '99+' : _cartCount.toString(),
            style: TextStyle(
              color: Colors.white,
              fontSize: 12,
              fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.center,
          ),
        ),
    ],
  );
}

3. 首页功能实现

首页 HomeView 包含多个功能模块，使用 ListView 垂直排列：

dart 复制代码

body: ListView(
  padding: EdgeInsets.zero,
  children: [
    // 轮播图和搜索栏
    Stack(
      children: [
        // 轮播图
        Container(
          width: double.infinity,
          child: Mgslider(),
        ),
        // 透明搜索栏（置顶）
        Positioned(
          top: 16,
          left: 16,
          right: 16,
          child: GestureDetector(
            onTap: () {
              // 搜索栏点击事件
              print('搜索栏被点击');
              // 跳转到搜索页面
              Navigator.pushNamed(context, '/search');
            },
            child: AnimatedScale(
              duration: Duration(milliseconds: 100),
              scale: 1.0,
              child: Container(
                height: 40,
                decoration: BoxDecoration(
                  color: AppColors.white.withOpacity(0.95),
                  borderRadius: BorderRadius.circular(20),
                  boxShadow: [
                    BoxShadow(
                      color: AppColors.black.withOpacity(0.1),
                      blurRadius: 8,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: Row(
                  children: [
                    SizedBox(width: 16),
                    Icon(Icons.search, color: AppColors.textHint, size: 20),
                    SizedBox(width: 12),
                    Text('搜索商品', style: TextStyle(color: AppColors.textHint, fontSize: 14)),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    ),
    // 分类导航
    Mgcategory(),
    // 热门商品
    Mghot(),
    // 推荐商品
    Mgsuggestion(),
    // 更多商品列表
    MgmoreList(),
    SizedBox(height: 32),
  ],
),

4. 购物车功能实现

购物车功能在 Mainpage 中实现了数据管理，通过 CartItem 模型管理购物车商品：

dart 复制代码

// 购物车商品模型
class CartItem {
  final String id;
  final String name;
  final String image;
  final double price;
  int quantity;
  bool isSelected;

  CartItem({
    required this.id,
    required this.name,
    required this.image,
    required this.price,
    required this.quantity,
    this.isSelected = true,
  });
}

通过 _updateCartItems 方法更新购物车数据，并在购物车页面和分类页面之间共享：

dart 复制代码

// 更新购物车数据
void _updateCartItems(List<CartItem> newCartItems) {
  setState(() {
    _cartItems = newCartItems;
  });
}

OpenHarmony 平台适配

1. 配置文件说明

OpenHarmony 平台的配置文件主要包括：

ohos/build-profile.json5：应用构建配置
ohos/entry/module.json5：入口模块配置
ohos/entry/src/main/ets/entryability/EntryAbility.ets：应用入口能力

2. 资源适配

在 OpenHarmony 平台中，资源文件需要放在 ohos/entry/src/main/resources 目录下，包括：

字符串资源：element/string.json
颜色资源：element/color.json
图片资源：media/ 目录

3. 构建与运行

要在 OpenHarmony 设备或模拟器上运行应用，需要执行以下步骤：

确保已安装 OpenHarmony SDK 和相关工具
连接 OpenHarmony 设备或启动模拟器
执行以下命令构建并运行应用：

bash 复制代码

flutter run -d ohos

项目优化建议

状态管理优化 ：对于复杂的应用状态，建议使用 Provider、Bloc 或 Riverpod 等状态管理方案，替代当前的 setState 方式。
网络请求封装：添加网络请求封装，实现与后端 API 的交互。
本地存储 ：使用 shared_preferences 或 hive 等库实现本地数据存储，如用户登录信息、购物车数据等。
性能优化：
- 图片懒加载
- 组件缓存
- 避免不必要的重建
测试覆盖：添加单元测试和集成测试，提高代码质量。

总结

mango_shop 项目是一个基于 Flutter 开发的跨平台电商应用，通过合理的目录架构设计和功能实现，为用户提供了良好的购物体验。同时，项目内置了对 OpenHarmony 平台的支持，展示了 Flutter 的跨平台能力。

通过本文的介绍，我们了解了如何使用 Flutter 初始化一个支持 OpenHarmony 的项目，以及如何设计合理的目录架构。这些知识对于开发 Flutter 跨平台应用，特别是支持 OpenHarmony 的应用，具有重要的参考价值。

Flutter for OpenHarmony 的组合为开发者提供了一种高效、统一的跨平台开发方案，使得开发者可以使用一套代码库，构建同时运行在 Android、iOS、Web、Windows、Linux 和 OpenHarmony 等多个平台的应用，大大提高了开发效率和代码复用率。

后续规划

完善商品详情页和下单流程
实现用户登录和注册功能
添加支付功能
优化应用性能和用户体验
完善 OpenHarmony 平台的适配细节

通过不断的迭代和优化，mango_shop 项目将成为一个功能完善、性能优异的跨平台电商应用，为用户提供便捷、高效的购物服务。

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