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

目录

• 前言：跨生态开发的新机遇
• 混合工程结构深度解析
• 展示效果图片
• 引入第三方库 timeago
• 功能代码实现
• 本次开发中容易遇到的问题
• 总结本次开发中用到的技术点

前言：跨生态开发的新机遇

在移动开发领域，Flutter凭借其跨平台优势为开发者带来了高效的开发体验。随着鸿蒙生态的迅速崛起，将Flutter应用适配到OpenHarmony平台成为了开发者面临的新挑战与机遇。

本次开发聚焦于在OpenHarmony平台上实现Flutter第三方库timeago的时间转化功能，将时间戳转化为直观可读的“模糊时间戳”格式，例如“30秒前”、“5分钟前”等。通过组件化开发方式，我们成功实现了清晰的时间展示效果，并确保了在OpenHarmony环境下的稳定运行。

混合工程结构深度解析

项目目录架构

当Flutter项目集成鸿蒙支持后，典型的项目结构会发生显著变化。以下是经过ohos_flutter插件初始化后的项目结构：

my_flutter_harmony_app/
├── lib/                          # Flutter业务代码（基本不变）
│   ├── main.dart                 # 应用入口
│   ├── components/               # 组件目录
│   │   └── time_ago.dart         # 时间戳转化组件
├── pubspec.yaml                  # Flutter依赖配置
├── ohos/                         # 鸿蒙原生层（核心适配区）
│   ├── entry/                    # 主模块
│   │   └── src/main/
│   │       ├── ets/              # ArkTS代码
│   │       │   ├── entryability/
│   │       │   │   └── EntryAbility.ets
│   │       │   └── pages/
│   │       │       └── Index.ets
│   │       ├── resources/        # 鸿蒙资源文件
│   │       └── module.json5
│   ├── hvigor/                   # 构建配置
│   └── oh-package.json5          # 鸿蒙依赖管理
└── README.md

展示效果图片

• Flutter 实时预览效果展示

• 

• 运行到鸿蒙虚拟设备中效果展示
  

引入第三方库 timeago

在项目中引入timeago库非常简单，只需在pubspec.yaml文件中添加依赖即可：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  timeago: ^3.6.0  # 添加timeago依赖

添加依赖后，运行flutter pub get命令来获取库文件。

功能代码实现

时间戳转化组件

组件结构与实现

我们创建了TimeAgoWidget组件，实现了时间戳转化为可读“模糊时间戳”的功能。该组件位于lib/components/time_ago.dart文件中：

import 'package:flutter/material.dart';
import 'package:timeago/timeago.dart' as timeago;

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

  @override
  State<TimeAgoWidget> createState() => _TimeAgoWidgetState();
}

class _TimeAgoWidgetState extends State<TimeAgoWidget> {
  // 示例时间列表，包含不同时间点
  final List<DateTime> _timeList = [
    DateTime.now().subtract(const Duration(seconds: 30)),
    DateTime.now().subtract(const Duration(minutes: 5)),
    DateTime.now().subtract(const Duration(hours: 2)),
    DateTime.now().subtract(const Duration(days: 1)),
    DateTime.now().subtract(const Duration(days: 7)),
    DateTime.now().subtract(const Duration(days: 30)),
  ];

  // 记录点击的时间
  DateTime? _lastClickedTime;

  @override
  void initState() {
    super.initState();
    // 初始化中文本地化
    timeago.setLocaleMessages('zh', timeago.ZhMessages());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('时间戳转化演示'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              '时间戳转化为可读格式:',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 20),
            // 显示不同时间点的转化结果
            ..._timeList.map((time) {
              return GestureDetector(
                onTap: () {
                  setState(() {
                    _lastClickedTime = time;
                  });
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('你点击了: ${timeago.format(time, locale: 'zh')}'),
                      duration: const Duration(seconds: 1),
                    ),
                  );
                },
                child: Card(
                  elevation: 2,
                  margin: const EdgeInsets.symmetric(vertical: 8),
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          time.toString(),
                          style: const TextStyle(
                            fontSize: 14,
                            color: Colors.grey,
                          ),
                        ),
                        Text(
                          timeago.format(time, locale: 'zh'),
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                            color: Colors.deepPurple,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              );
            }).toList(),
            const SizedBox(height: 30),
            // 显示最后点击的时间
            if (_lastClickedTime != null)
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.deepPurple.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '最后点击的时间:',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 8),
                    Text(
                      '原始时间: ${_lastClickedTime}',
                      style: const TextStyle(fontSize: 14),
                    ),
                    Text(
                      '转化后: ${timeago.format(_lastClickedTime!, locale: 'zh')}',
                      style: const TextStyle(
                        fontSize: 14,
                        color: Colors.deepPurple,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            const SizedBox(height: 30),
            // 交互提示
            Center(
              child: Text(
                '点击上面的卡片查看交互效果',
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey[600],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

核心功能说明

1. 时间戳转化：使用timeago.format()方法将DateTime对象转化为可读的“模糊时间戳”格式，自动根据时间差选择合适的时间单位。

2. 中文本地化：通过timeago.setLocaleMessages('zh', timeago.ZhMessages())初始化中文本地化，确保时间显示为中文格式，符合中文用户的阅读习惯。

3. 交互效果：为每个时间卡片添加了GestureDetector，实现了点击事件处理，点击时会显示SnackBar提示，增强用户交互体验。

4. 状态管理：使用setState管理最后点击的时间，实时更新UI显示，确保界面与数据的同步。

使用方法

在main.dart文件中，我们直接将TimeAgoWidget组件作为首页显示：

import 'package:flutter/material.dart';
import 'package:aa/components/time_ago.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter for openHarmony',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flutter for openHarmony'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return const TimeAgoWidget();
  }
}

开发中需要注意的点

1. 本地化配置：使用timeago库时，必须根据应用的目标语言进行本地化配置，否则默认会使用英文显示，影响用户体验。

2. 时间计算：timeago库会根据当前时间与目标时间的差值自动计算合适的时间单位，无需手动处理时间差计算，简化了开发流程。

3. 性能优化：对于频繁更新的时间显示，建议使用Timer定期更新，避免不必要的UI重建，提升应用性能。

4. OpenHarmony适配：确保在OpenHarmony环境下测试时间显示的准确性和格式化的正确性，确保跨平台体验一致。

本次开发中容易遇到的问题

1. 本地化问题

   • 问题：默认情况下timeago库使用英文显示，不符合中文用户的阅读习惯。
   • 解决方案：通过timeago.setLocaleMessages('zh', timeago.ZhMessages())设置中文本地化，确保时间显示为中文格式。

2. 时间格式问题

   • 问题：某些特殊时间点的显示可能不符合预期，例如非常短的时间间隔或非常长的时间跨度。
   • 解决方案：查看timeago库的文档，了解其时间格式化规则，必要时自定义格式化逻辑以满足特定需求。

3. 性能问题

   • 问题：在列表中大量使用时间戳转化可能影响性能，特别是当列表项数量较多时。
   • 解决方案：使用类似CachedNetworkImage的缓存机制，或定期批量更新时间显示，减少不必要的计算和重建。

4. OpenHarmony平台适配问题

   • 问题：在OpenHarmony环境下，时间计算可能与其他平台有差异，导致显示不一致。
   • 解决方案：在不同平台上测试时间显示的一致性，确保跨平台体验统一，必要时针对OpenHarmony平台进行特殊处理。

总结本次开发中用到的技术点

1. Flutter组件化开发

   • 使用StatefulWidget创建可复用的时间戳转化组件，提高代码的可维护性和可复用性
   • 通过抽离组件，使代码结构更加清晰，便于后续扩展和维护

2. 第三方库集成

   • 集成timeago库实现时间戳转化功能，简化开发流程
   • 正确配置依赖版本，确保库的稳定性和兼容性

3. 本地化处理

   • 配置中文本地化，确保时间显示符合中文用户习惯
   • 了解timeago库的本地化机制，为多语言支持做准备

4. 用户交互

   • 使用GestureDetector处理点击事件，增强用户交互体验
   • 通过ScaffoldMessenger显示用户反馈，提升应用的友好性

5. 状态管理

   • 使用setState管理组件状态，实现UI与数据的同步
   • 合理管理组件状态，避免不必要的重建和计算

6. UI设计

   • 使用Card和Row布局展示时间信息，提高界面的美观性和可读性
   • 实现响应式布局，适应不同屏幕尺寸，确保在各种设备上的良好显示效果

7. OpenHarmony适配

   • 确保Flutter代码在OpenHarmony环境下正常运行，验证跨平台兼容性
   • 测试并优化在OpenHarmony设备上的用户体验，确保应用在鸿蒙生态中表现良好

通过本次开发，我们成功实现了在OpenHarmony平台上使用Flutter第三方库timeago的时间戳转化功能，为Flutter应用在OpenHarmony生态中的落地提供了实践参考。该实现不仅功能完整，而且代码结构清晰，用户体验良好，展示了Flutter跨平台开发的优势。