🚀运行效果展示

Flutter框架跨平台鸿蒙开发——周报模板生成APP的开发流程

📝 前言

随着移动互联网的快速发展，跨平台开发框架逐渐成为开发者的首选。Flutter作为Google推出的开源UI工具包，以其"一次编写，处处运行"的特性赢得了广泛关注。与此同时，华为的鸿蒙系统（HarmonyOS）也在快速崛起，成为移动生态的重要组成部分。本文将介绍如何使用Flutter框架开发一款能够在鸿蒙系统上运行的周报模板生成APP，分享完整的开发流程和关键技术点。

🎯 项目介绍

项目背景

周报是职场中常用的工作汇报方式，然而传统的周报编写方式存在效率低下、格式不统一等问题。为了解决这些问题，我们开发了一款周报模板生成APP，帮助用户快速创建、编辑和管理周报。

核心功能

• ✅ 模板管理：提供多种周报模板，支持自定义模板
• ✅ 周报编辑：可视化编辑周报内容，支持添加、删除工作项
• ✅ 周报预览：实时预览生成的周报
• ✅ 本地存储：自动保存周报内容，支持离线使用
• ✅ 跨平台运行：同时支持Flutter和鸿蒙平台

技术栈

技术	版本	用途
Flutter	3.6.2	UI框架
Dart	3.0.0+	开发语言
shared_preferences	2.2.2	本地存储
HarmonyOS	3.0+	目标平台

🔧 开发流程

1. 项目初始化

首先，我们需要使用Flutter CLI创建一个新的Flutter项目，并配置鸿蒙支持。

flutter create .

创建完成后，项目结构将包含以下关键目录：

• lib/：Flutter代码目录
• ohos/：鸿蒙平台支持目录
• android/：Android平台支持目录
• ios/：iOS平台支持目录

2. 数据模型设计

数据模型是应用的核心，我们需要设计合理的数据结构来表示周报和模板。

// 工作周报主模型
class WeeklyReport {
  final String id;
  final String title;
  final DateTime startDate;
  final DateTime endDate;
  final String author;
  final String department;
  final List<WorkItem> thisWeekWork;
  final List<WorkItem> nextWeekPlan;
  final String issuesAndSuggestions;
  final DateTime createdAt;
  final DateTime updatedAt;
  final bool isTemplate;
  // ... 构造函数和方法
}

// 工作项模型
class WorkItem {
  final String description;
  final String status;
  final double hoursSpent;
  final String remarks;
  // ... 构造函数和方法
}

3. 页面设计与实现

我们采用MVVM架构设计应用，将UI与业务逻辑分离。主要包含以下页面：

3.1 模板列表页面

用于展示和管理周报模板，支持新建、编辑和删除模板。

class TemplateListPage extends StatefulWidget {
  const TemplateListPage({super.key});

  @override
  State<TemplateListPage> createState() => _TemplateListPageState();
}

class _TemplateListPageState extends State<TemplateListPage> {
  // 模板数据
  final List<ReportTemplate> _templates = [/* 模拟数据 */];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('周报模板')),
      body: _buildTemplateList(),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _navigateToEditPage(context, null),
        child: const Icon(Icons.edit),
      ),
    );
  }
  // ... 其他方法
}

3.2 周报编辑页面

用于创建和编辑周报内容，支持添加、删除工作项。

class ReportEditPage extends StatefulWidget {
  final WeeklyReport? report;
  final bool isNewReport;

  const ReportEditPage({super.key, this.report, this.isNewReport = false});

  @override
  State<ReportEditPage> createState() => _ReportEditPageState();
}

class _ReportEditPageState extends State<ReportEditPage> {
  final _formKey = GlobalKey<FormState>();
  late WeeklyReport _report;
  // ... 控制器和初始化方法

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.isNewReport ? '新建周报' : '编辑模板')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildBasicInfoSection(),
              _buildThisWeekWorkSection(),
              _buildNextWeekPlanSection(),
              _buildIssuesSection(),
            ],
          ),
        ),
      ),
    );
  }
  // ... 其他方法
}

3.3 周报预览页面

用于预览生成的周报，支持分享和打印。

class ReportPreviewPage extends StatelessWidget {
  final WeeklyReport report;

  const ReportPreviewPage({super.key, required this.report});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('周报预览')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: _buildReportContent(context),
      ),
    );
  }
  // ... 其他方法
}

4. 本地存储实现

使用shared_preferences库实现周报和模板的持久化存储。

class StorageService {
  static const String _reportsKey = 'weekly_reports';
  static const String _templatesKey = 'report_templates';

  // 保存周报
  Future<bool> saveReport(WeeklyReport report) async {
    try {
      final prefs = await SharedPreferences.getInstance();
      final reports = await getAllReports();
      // ... 保存逻辑
      return await prefs.setStringList(_reportsKey, reportsJson);
    } catch (e) {
      print('保存周报失败: $e');
      return false;
    }
  }
  // ... 其他方法
}

5. 鸿蒙平台集成

Flutter项目默认包含鸿蒙支持目录，我们只需要进行简单的配置即可在鸿蒙设备上运行。

5.1 鸿蒙项目结构

ohos/
├── AppScope/
│   ├── app.json5
│   └── resources/
├── entry/
│   ├── src/
│   │   └── main/
│   │       ├── ets/
│   │       │   ├── entryability/
│   │       │   │   └── EntryAbility.ets
│   │       │   └── pages/
│   │       │       └── Index.ets
│   │       └── resources/
│   └── module.json5
└── oh-package.json5

5.2 关键配置文件

EntryAbility.ets - 鸿蒙应用入口

import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos';
import { GeneratedPluginRegistrant } from '../plugins/GeneratedPluginRegistrant';

export default class EntryAbility extends FlutterAbility {
  configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    GeneratedPluginRegistrant.registerWith(flutterEngine)
  }
}

Index.ets - 鸿蒙页面

import common from '@ohos.app.ability.common';
import { FlutterPage } from '@ohos/flutter_ohos'

let storage = LocalStorage.getShared()
const EVENT_BACK_PRESS = 'EVENT_BACK_PRESS'

@Entry(storage)
@Component
struct Index {
  private context = getContext(this) as common.UIAbilityContext
  @LocalStorageLink('viewId') viewId: string = "";

  build() {
    Column() {
      FlutterPage({ viewId: this.viewId })
    }
  }
  // ... 其他方法
}

🏗️ 开发流程图

🎨 应用架构图

🔑 关键技术点

1. 响应式布局设计

使用Flutter的响应式布局组件，确保应用在不同屏幕尺寸上都能正常显示。

@override
Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      return SingleChildScrollView(
        padding: EdgeInsets.all(constraints.maxWidth * 0.05),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 响应式布局内容
          ],
        ),
      );
    },
  );
}

2. 状态管理

使用Flutter的StatefulWidget和setState方法进行状态管理，适合中小型应用。

setState(() {
  _report.thisWeekWork.add(WorkItem(
    description: description,
    status: '已完成',
    hoursSpent: 0.0,
  ));
});

3. JSON序列化与反序列化

使用dart:convert库实现数据模型与JSON之间的转换。

// 从JSON转换为对象
factory WeeklyReport.fromJson(Map<String, dynamic> json) {
  return WeeklyReport(
    id: json['id'],
    title: json['title'],
    startDate: DateTime.parse(json['startDate']),
    // ... 其他字段
  );
}

// 转换为JSON
Map<String, dynamic> toJson() {
  return {
    'id': id,
    'title': title,
    'startDate': startDate.toIso8601String(),
    // ... 其他字段
  };
}

4. 日期处理

封装日期工具类，提供日期格式化和计算功能。

class DateUtils {
  static String formatDate(DateTime date) {
    return '${date.year}-${_twoDigits(date.month)}-${_twoDigits(date.day)}';
  }
  
  static DateTime getLastWeekStart() {
    final now = DateTime.now();
    final weekday = now.weekday;
    return now.subtract(Duration(days: weekday - 1));
  }
  // ... 其他方法
}

🎯 测试与调试

1. 本地测试

使用Flutter的测试框架进行单元测试和Widget测试。

flutter test

2. 鸿蒙设备测试

将应用安装到鸿蒙设备上进行真机测试。

flutter run --device-id <device_id>

3. 调试工具

使用Flutter DevTools进行调试和性能分析。

http://127.0.0.1:9101?uri=http://127.0.0.1:61265/

🚀 打包与发布

1. 打包鸿蒙应用

flutter build ohos

2. 生成HAP文件

打包完成后，会在build/ohos/hap/目录下生成HAP文件，可用于发布到鸿蒙应用市场。

💡 经验总结

1. 跨平台开发优势：使用Flutter框架开发跨平台应用，可以显著提高开发效率，减少维护成本。
2. 鸿蒙生态支持：Flutter对鸿蒙的支持越来越完善，开发者可以轻松将现有Flutter应用迁移到鸿蒙平台。
3. 本地存储选择：对于中小型应用，shared_preferences是一个简单易用的本地存储解决方案。
4. 响应式设计重要性：在开发跨平台应用时，响应式设计是确保应用在不同设备上正常显示的关键。
5. 调试工具利用：充分利用Flutter DevTools等调试工具，可以提高开发效率，快速定位和解决问题。

🔮 未来展望

1. 性能优化：进一步优化应用性能，提高渲染速度和响应能力。
2. 云同步功能：添加云同步功能，支持多设备数据同步。
3. 导出功能：支持将周报导出为PDF、Word等格式。
4. 协作功能：添加团队协作功能，支持多人编辑同一周报。
5. AI辅助写作：集成AI技术，辅助用户生成周报内容。

📚 参考资料

1. Flutter官方文档
2. 鸿蒙开发者文档
3. Flutter与鸿蒙集成指南
4. shared_preferences插件文档

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net