Flutter与OpenHarmony青花瓷分享功能实现

2501_94669463

455人浏览 · 2025-12-22 23:12:07

2501_94669463 · 2025-12-22 23:12:07 发布

在这里插入图片描述

前言

分享功能让用户可以将喜爱的青花瓷藏品分享给朋友，传播传统文化之美。我们将实现支持多平台分享的功能，包括微信、微博等社交平台，以及系统分享面板。分享内容包括藏品图片、名称和简介。

分享是社交传播的重要途径，一个好的分享功能不仅要技术实现完善，还要考虑分享内容的呈现效果，让接收者能够被内容吸引并产生兴趣。

分享数据模型

定义分享内容的数据模型，包含分享所需的各种信息。

// lib/models/share_content.dart
class ShareContent {
  final String title;
  final String description;
  final String imageUrl;
  final String webUrl;

  const ShareContent({
    required this.title,
    required this.description,
    required this.imageUrl,
    required this.webUrl,
  });
}


分享数据模型包含了分享所需的核心信息：`title`是分享标题，`description`是分享描述，`imageUrl`是分享图片，`webUrl`是点击后跳转的网页链接。这种结构适配了大多数社交平台的分享格式要求。

## 分享服务封装

封装分享服务，提供统一的分享接口。

```dart
// lib/services/share_service.dart
import 'package:share_plus/share_plus.dart';

class ShareService {
  static Future<void> shareText(String text) async {
    await Share.share(text);
  }

  static Future<void> shareWithImage(
    ShareContent content,
  ) async {
    await Share.share(
      '${content.title}\n${content.description}\n${content.webUrl}',
      subject: content.title,
    );
  }

  static Future<void> shareToWeChat(ShareContent content) async {
    // 微信分享需要集成微信SDK
    // 这里展示接口设计
  }
}

ShareService封装了不同的分享方式，shareText用于纯文本分享，shareWithImage用于图文分享。share_plus包提供了跨平台的系统分享功能，会调起系统的分享面板让用户选择分享目标。

OpenHarmony分享实现

在OpenHarmony端使用系统分享能力实现分享功能。

// ohos/entry/src/main/ets/services/ShareService.ets
import common from '@ohos.app.ability.common';
import Want from '@ohos.app.ability.Want';

export class ShareService {
  static async shareText(context: common.UIAbilityContext, text: string) {
    const want: Want = {
      action: 'ohos.want.action.sendData',
      type: 'text/plain',
      parameters: {
        'shareText': text
      }
    };
    
    await context.startAbility(want);
  }

  static async shareImage(context: common.UIAbilityContext, imagePath: string) {
    const want: Want = {
      action: 'ohos.want.action.sendData',
      type: 'image/*',
      parameters: {
        'shareImagePath': imagePath
      }
    };
    
    await context.startAbility(want);
  }
}

ArkTS使用Want对象描述分享意图，action指定分享动作，type指定内容类型。startAbility方法启动系统分享面板，用户可以选择分享到哪个应用。这种方式与Android的Intent机制类似。

分享按钮组件

创建分享按钮组件，点击后弹出分享选项。

// lib/widgets/share_button.dart
class ShareButton extends StatelessWidget {
  final ShareContent content;

  const ShareButton({super.key, required this.content});

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.share),
      onPressed: () => _showShareOptions(context),
    );
  }

  void _showShareOptions(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (context) => ShareOptionsSheet(content: content),
    );
  }
}

分享按钮使用标准的分享图标，点击后弹出底部选项面板。ShareOptionsSheet组件展示各种分享选项，用户可以选择分享方式。这种交互模式符合用户的使用习惯。

分享选项面板

分享选项面板展示可用的分享渠道，让用户选择分享目标。

// lib/widgets/share_options_sheet.dart
class ShareOptionsSheet extends StatelessWidget {
  final ShareContent content;

  const ShareOptionsSheet({super.key, required this.content});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text('分享到', style: TextStyle(fontSize: 16)),
          const SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ShareOption(
                icon: Icons.chat,
                label: '微信',
                onTap: () => ShareService.shareToWeChat(content),
              ),
              ShareOption(
                icon: Icons.more_horiz,
                label: '更多',
                onTap: () => ShareService.shareWithImage(content),
              ),
            ],
          ),
        ],
      ),
    );
  }
}