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

目录

• 前言：时间差转化功能的跨平台实现
• 混合工程结构深度解析
• 展示效果图片
• 引入第三方库 get_time_ago
• 功能代码实现
• 本次开发中容易遇到的问题
• 总结本次开发中用到的技术点

前言：时间差转化功能的跨平台实现

在移动应用开发中，时间差转化是一个常见的功能需求，它可以将具体的时间点转化为相对时间（如"1分钟前"、“1小时前”、"1天前"等），使时间显示更加直观和友好。Flutter作为一款优秀的跨平台框架，为开发者提供了便捷的开发体验，而OpenHarmony作为新兴的全场景分布式操作系统，也在逐渐成为开发者关注的焦点。

本次开发任务，我们将通过适配Flutter三方库get_time_ago到OpenHarmony平台，实现一个功能完整、交互友好的时间差转化组件。这不仅是对跨平台开发能力的一次实践，也是对Flutter与OpenHarmony融合开发的一次探索。

在实现过程中，我们将重点关注组件的抽离开发、交互效果的实现以及在OpenHarmony平台上的适配细节，确保最终的应用能够在多个平台上保持一致的用户体验。

混合工程结构深度解析

项目目录架构

当Flutter项目集成鸿蒙支持后，典型的项目结构会发生显著变化。以下是当前项目的实际结构：

fluuter_openHarmony1/
├── lib/                          # Flutter业务代码
│   ├── main.dart                 # 应用入口
│   └── get_time_ago_widget.dart     # 时间差转化组件
├── pubspec.yaml                  # Flutter依赖配置
├── ohos/                         # 鸿蒙原生层
│   ├── entry/                    # 主模块
│   │   └── src/main/
│   │       ├── ets/              # ArkTS代码
│   │       │   ├── entryability/  # 入口能力
│   │       │   └── pages/         # 鸿蒙页面
│   │       ├── resources/        # 鸿蒙资源文件
│   │       └── module.json5       # 模块配置
│   ├── build-profile.json5      # 构建配置
│   └── oh-package.json5         # 鸿蒙依赖管理
└── 模版.md                       # 项目文档

展示效果图片

flutter 实时预览 效果展示

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

引入第三方库 get_time_ago

在Flutter项目中引入第三方库是实现功能的重要步骤。对于时间差转化功能，我们选择了get_time_ago库，它提供了简单而有效的时间差计算和转化功能，能够将具体的时间点转化为直观的相对时间表达式。

配置依赖

在pubspec.yaml文件中添加get_time_ago依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  # Get time ago package
  get_time_ago: ^2.0.0

功能代码实现

本次开发中，我们将时间差转化功能封装在一个独立的组件中，实现了完整的时间选择、时间差计算和视觉反馈功能。下面详细介绍各个组件的实现细节。

1. 时间差转化组件 (GetTimeAgoWidget)

组件结构

GetTimeAgoWidget是一个StatefulWidget，负责管理时间选择和时间差计算的状态，以及UI的展示。该组件采用了清晰的分层结构，将数据处理和UI展示分离，提高了代码的可维护性。

核心实现

import 'package:flutter/material.dart';
import 'package:get_time_ago/get_time_ago.dart';

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

  @override
  State<GetTimeAgoWidget> createState() => _GetTimeAgoWidgetState();
}

class _GetTimeAgoWidgetState extends State<GetTimeAgoWidget> {
  DateTime _selectedTime = DateTime.now();
  String _timeAgo = '';

  @override
  void initState() {
    super.initState();
    _updateTimeAgo();
  }

  void _updateTimeAgo() {
    setState(() {
      _timeAgo = GetTimeAgo.parse(_selectedTime);
    });
  }

  void _selectTimeBeforeNow(int seconds) {
    setState(() {
      _selectedTime = DateTime.now().subtract(Duration(seconds: seconds));
      _updateTimeAgo();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: Colors.grey[100],
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text(
            '时间差转化为"之前"',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 20),
          Text(
            '选择时间点:',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 10),
          Text(
            _selectedTime.toString(),
            style: const TextStyle(
              fontSize: 14,
              color: Colors.grey,
            ),
          ),
          const SizedBox(height: 20),
          Text(
            '时间差:',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 10),
          Text(
            _timeAgo,
            style: const TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
              color: Colors.blue,
            ),
          ),
          const SizedBox(height: 30),
          // 时间选择按钮
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: () => _selectTimeBeforeNow(60),
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                  margin: const EdgeInsets.symmetric(horizontal: 5),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: Colors.blue,
                  ),
                  child: const Text(
                    '1分钟前',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              GestureDetector(
                onTap: () => _selectTimeBeforeNow(3600),
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                  margin: const EdgeInsets.symmetric(horizontal: 5),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: Colors.blue,
                  ),
                  child: const Text(
                    '1小时前',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              GestureDetector(
                onTap: () => _selectTimeBeforeNow(86400),
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                  margin: const EdgeInsets.symmetric(horizontal: 5),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: Colors.blue,
                  ),
                  child: const Text(
                    '1天前',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 20),
          GestureDetector(
            onTap: () {
              setState(() {
                _selectedTime = DateTime.now();
                _updateTimeAgo();
              });
            },
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 12),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.green,
              ),
              child: const Text(
                '重置为当前时间',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

实现细节

1. 时间状态管理：使用DateTime类型的_selectedTime变量存储当前选择的时间点，初始值为当前时间。

2. 时间差计算：

   • 在initState()方法中调用_updateTimeAgo()初始化时间差显示
   • _updateTimeAgo()方法使用GetTimeAgo.parse()函数计算时间差并更新状态
   • _selectTimeBeforeNow()方法根据传入的秒数设置过去的时间点

3. UI展示设计：

   • 显示当前选择的时间点
   • 显示计算出的时间差（如"1分钟前"、"1小时前"等）
   • 提供三个时间选择按钮（1分钟前、1小时前、1天前）
   • 提供重置按钮，将时间点重置为当前时间

4. 交互效果：

   • 使用GestureDetector实现按钮点击交互
   • 点击按钮后更新时间点并重新计算时间差
   • 实时更新UI显示

使用方法

在需要使用时间差转化功能的地方，直接引入并使用GetTimeAgoWidget组件即可：

import 'get_time_ago_widget.dart';

// 在Widget的build方法中
const GetTimeAgoWidget();

2. 主应用入口 (main.dart)

核心实现

import 'package:flutter/material.dart';
import 'get_time_ago_widget.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 Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Flutter 时间差转化',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 40),
            const GetTimeAgoWidget(),
          ],
        ),
      ),
    );
  }
}

实现细节

1. 应用初始化：在main()函数中调用runApp()启动Flutter应用，传入根组件MyApp。

2. 主题配置：在MyApp组件中设置应用的主题色为深紫色，并启用Material 3设计风格，提升视觉效果。

3. 首页布局：

   • 使用Scaffold作为基础布局组件
   • 使用Center和Column将内容垂直居中
   • 添加标题文本"Flutter 时间差转化"
   • 直接引入并使用GetTimeAgoWidget组件，无需页面跳转

4. 组件集成：通过简单的引入和使用，将时间差转化功能无缝集成到首页中，实现了功能的快速部署。

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

在实现Flutter三方库get_time_ago适配OpenHarmony的过程中，我们遇到了以下几个常见问题：

1. 依赖版本兼容性问题

问题：在配置依赖时，需要确保选择与当前Flutter SDK版本兼容的get_time_ago库版本。

解决方案：选择了^2.0.0版本的get_time_ago库，确保与当前Flutter SDK版本3.6.2兼容。

2. 时间格式处理

问题：get_time_ago库的parse()函数需要传入正确的DateTime对象，否则可能会导致时间差计算错误。

解决方案：确保传入的是有效的DateTime对象，并在组件初始化时正确设置初始值。

3. 跨平台适配问题

问题：在OpenHarmony平台上，某些Flutter组件的行为可能与Android/iOS平台有所差异，需要确保组件在不同平台上的一致性。

解决方案：在开发过程中，选择使用Flutter核心组件和API，确保它们在OpenHarmony平台上有良好的支持。同时，进行必要的测试，验证组件在不同平台上的表现。

4. 用户体验优化

问题：时间差转化功能需要提供清晰、直观的交互方式，以便用户能够方便地测试不同时间点的转化效果。

解决方案：通过以下方式优化用户体验：

• 提供多个时间选择按钮，方便用户快速测试不同时间点
• 实时更新时间差显示，确保用户能够即时看到结果
• 添加重置按钮，方便用户回到初始状态

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

本次开发过程中，我们运用了以下关键技术点：

1. Flutter组件化开发

• 抽离组件：将时间差转化功能封装在独立的GetTimeAgoWidget组件中，实现了功能的模块化，提高了代码的可维护性和复用性。
• 状态管理：使用StatefulWidget和setState()管理组件状态，确保UI与数据的同步更新。

2. 时间处理

• 时间计算：使用DateTime类和Duration类进行时间点的计算和管理。
• 时间差转化：使用get_time_ago库的parse()函数将时间点转化为相对时间表达式。

3. 第三方库集成

• 依赖管理：在pubspec.yaml中正确配置get_time_ago库的依赖版本，确保与Flutter SDK版本兼容，避免版本冲突问题。
• API使用：熟练使用get_time_ago库提供的parse()函数实现时间差转化功能。

4. 跨平台适配

• 平台兼容性：确保使用的Flutter组件和API在多个平台上都能正常运行，保证应用的跨平台一致性。
• OpenHarmony适配：通过ohos_flutter插件，将Flutter应用成功适配到OpenHarmony平台，实现了跨平台部署。

5. UI设计与用户体验

• 视觉设计：设计了美观的时间选择界面和时间差显示，提升用户体验。
• 交互反馈：通过按钮点击和实时更新，为用户提供清晰的交互反馈，增强用户体验。
• 布局优化：使用Container、Column等布局组件，确保UI在不同屏幕尺寸上的适配，实现响应式设计。

6. 代码质量与性能

• 初始化处理：在initState()方法中正确初始化组件状态，确保应用启动时的正确性。
• 代码规范：遵循Flutter的代码规范，保持代码的可读性和可维护性，便于后续开发和维护。
• 性能优化：使用const构造器和mainAxisSize: MainAxisSize.min等优化手段，减少不必要的重建，提高组件性能。

通过本次开发，我们成功实现了Flutter三方库get_time_ago在OpenHarmony平台上的适配，构建了一个功能完整、交互友好的时间差转化应用。这不仅展示了Flutter的跨平台能力，也为开发者提供了一个在OpenHarmony平台上实现时间差转化功能的参考方案。