基础入门 Flutter for OpenHarmony：share_extend 系统分享详解

哈__2026-02-15 18:19

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
🎯 欢迎来到 Flutter for OpenHarmony 社区！本文将深入讲解 Flutter 中 share_extend 系统分享组件的使用方法，带你全面掌握在应用中实现系统级分享功能。

一、share_extend 组件概述

在 Flutter for OpenHarmony 应用开发中，share_extend 是一个非常实用的系统分享插件，它允许应用调用系统原生的分享面板，将文本、图片、文件等内容分享到其他应用。通过系统分享功能，用户可以方便地将内容分享到微信、QQ、短信、邮件等应用，大大提升了用户体验。

📋 share_extend 组件特点

特点 说明
跨平台支持 支持 Android、iOS、OpenHarmony
系统原生 调用系统原生分享面板，体验一致
多类型支持 支持分享文本、图片、文件等多种类型
简单易用 API 简洁直观，几行代码即可实现分享
无需集成SDK 不需要集成各平台SDK，直接使用系统功能
用户友好 用户可自主选择分享目标应用

💡 使用场景：分享文章链接、分享图片到社交平台、分享文件、分享邀请码、分享商品信息等。

二、OpenHarmony 平台适配说明

2.1 兼容性信息

本项目基于 share_extend@2.0.0 开发，适配 Flutter 3.27.5-ohos-1.0.4。

2.2 支持的功能

在 OpenHarmony 平台上，share_extend 支持以下功能：

功能 说明 OpenHarmony 支持
分享文本 分享纯文本内容 ✅ yes
分享图片 分享图片文件 ✅ yes
分享文件 分享任意类型文件 ✅ yes
分享多张图片 同时分享多张图片 ✅ yes
指定分享类型 设置分享的 MIME 类型 ✅ yes

三、项目配置与安装

3.1 添加依赖配置

首先，需要在你的 Flutter 项目的 pubspec.yaml 文件中添加 share_extend 依赖。

打开项目根目录下的 pubspec.yaml 文件，找到 dependencies 部分，添加以下配置：

yaml 复制代码 
dependencies:
  flutter:
    sdk: flutter

  # 添加 share_extend 依赖（OpenHarmony 适配版本）
  share_extend:
    git:
      url: "https://atomgit.com/openharmony-sig/fluttertpc_share_extend.git"
      ref: "master"

配置说明：

  • 使用 git 方式引用开源鸿蒙适配的 share_extend 仓库
  • url：指定 AtomGit 托管的仓库地址
  • ref：指定分支或标签
  • 本项目基于 share_extend@2.0.0 开发，适配 Flutter 3.27.5-ohos-1.0.4

⚠️ 重要：对于 OpenHarmony 平台，必须使用 git 方式引用适配版本，不能直接使用 pub.dev 的版本号。

3.2 下载依赖

配置完成后，需要在项目根目录执行以下命令下载依赖：

bash 复制代码 
flutter pub get

执行成功后，你会看到类似以下的输出：

复制代码 
Running "flutter pub get" in my_cross_platform_app...
Resolving dependencies...
Got dependencies!

3.3 依赖自动配置说明

执行 flutter pub get 后，OpenHarmony 平台的依赖会自动配置到 ohos/entry/oh-package.json5 文件中。Flutter 构建系统会自动处理平台相关的依赖配置，无需手动干预。

四、share_extend 基础用法

4.1 导入库

在使用 share_extend 之前，需要先导入库：

dart 复制代码 
import 'package:share_extend/share_extend.dart';

4.2 分享文本

最简单的分享方式是分享纯文本：

dart 复制代码 
// 分享文本
ShareExtend.share("这是一条分享的文本内容", "text");

参数说明：

  • 第一个参数：要分享的内容
  • 第二个参数：分享类型（"text" 表示文本）

4.3 分享图片

分享图片需要先获取图片路径：

dart 复制代码 
import 'package:image_picker/image_picker.dart';

// 分享图片
Future<void> shareImage() async {
  final picker = ImagePicker();
  final XFile? image = await picker.pickImage(source: ImageSource.gallery);
  
  if (image != null) {
    ShareExtend.share(image.path, "image");
  }
}

4.4 分享文件

分享任意类型的文件：

dart 复制代码 
// 分享文件
Future<void> shareFile(String filePath) async {
  ShareExtend.share(filePath, "file");
}

4.5 分享多张图片

同时分享多张图片：

dart 复制代码 
// 分享多张图片
Future<void> shareMultipleImages(List<String> imagePaths) async {
  ShareExtend.shareMultiple(imagePaths, "image");
}

五、常用 API 详解

5.1 share - 单项分享

分享单个内容项：

dart 复制代码 
ShareExtend.share(
  String text,      // 要分享的内容（文本或文件路径）
  String type,      // 分享类型：text、image、file
);

分享类型说明：

类型 说明 示例
text 纯文本 ShareExtend.share("文本", "text")
image 图片文件 ShareExtend.share(path, "image")
file 任意文件 ShareExtend.share(path, "file")

5.2 shareMultiple - 多项分享

分享多个内容项：

dart 复制代码 
ShareExtend.shareMultiple(
  List<String> paths,   // 文件路径列表
  String type,          // 分享类型
);

使用示例：

dart 复制代码 
// 分享多张图片
List<String> imagePaths = ['/path/to/image1.jpg', '/path/to/image2.jpg'];
ShareExtend.shareMultiple(imagePaths, "image");

六、实际应用场景

6.1 分享文章链接

dart 复制代码 
class ArticleShareButton extends StatelessWidget {
  final String title;
  final String url;

  const ArticleShareButton({
    super.key,
    required this.title,
    required this.url,
  });

  void _shareArticle() {
    String shareContent = '$title\n$url';
    ShareExtend.share(shareContent, "text");
  }

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

6.2 分享图片到社交平台

dart 复制代码 
class ImageSharePage extends StatefulWidget {
  const ImageSharePage({super.key});

  @override
  State<ImageSharePage> createState() => _ImageSharePageState();
}

class _ImageSharePageState extends State<ImageSharePage> {
  String? _imagePath;

  Future<void> _pickAndShareImage() async {
    final picker = ImagePicker();
    final XFile? image = await picker.pickImage(source: ImageSource.gallery);
    
    if (image != null) {
      setState(() => _imagePath = image.path);
      ShareExtend.share(image.path, "image");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('分享图片')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_imagePath != null)
              Image.network(
                _imagePath!,
                width: 200,
                height: 200,
                fit: BoxFit.cover,
              ),
            const SizedBox(height: 20),
            ElevatedButton.icon(
              onPressed: _pickAndShareImage,
              icon: const Icon(Icons.share),
              label: const Text('选择并分享图片'),
            ),
          ],
        ),
      ),
    );
  }
}

6.3 分享邀请码

dart 复制代码 
class InviteShareButton extends StatelessWidget {
  final String inviteCode;

  const InviteShareButton({super.key, required this.inviteCode});

  void _shareInviteCode() {
    String shareContent = '''
邀请您加入我们的应用！
邀请码：$inviteCode
点击链接下载：https://example.com/download
''';
    ShareExtend.share(shareContent, "text");
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton.icon(
      onPressed: _shareInviteCode,
      icon: const Icon(Icons.card_giftcard),
      label: const Text('分享邀请码'),
    );
  }
}

6.4 分享商品信息

dart 复制代码 
class ProductShareCard extends StatelessWidget {
  final String name;
  final double price;
  final String imageUrl;
  final String productUrl;

  const ProductShareCard({
    super.key,
    required this.name,
    required this.price,
    required this.imageUrl,
    required this.productUrl,
  });

  void _shareProduct() {
    String shareContent = '''
【$name】
价格：¥$price
购买链接：$productUrl
''';
    ShareExtend.share(shareContent, "text");
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(name, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            Text('¥$price', style: const TextStyle(fontSize: 16, color: Colors.red)),
            const SizedBox(height: 16),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton.icon(
                  onPressed: _shareProduct,
                  icon: const Icon(Icons.share),
                  label: const Text('分享'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

6.5 分享截图

dart 复制代码 
import 'dart:io';
import 'dart:ui' as ui;
import 'package:flutter/rendering.dart';
import 'package:path_provider/path_provider.dart';

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

  @override
  State<ScreenshotShare> createState() => _ScreenshotShareState();
}

class _ScreenshotShareState extends State<ScreenshotShare> {
  final GlobalKey _repaintBoundaryKey = GlobalKey();

  Future<void> _captureAndShare() async {
    try {
      RenderRepaintBoundary boundary = 
          _repaintBoundaryKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
      ui.Image image = await boundary.toImage(pixelRatio: 3.0);
      final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
      
      final buffer = byteData!.buffer.asUint8List();
      final tempDir = await getTemporaryDirectory();
      final file = File('${tempDir.path}/screenshot.png');
      await file.writeAsBytes(buffer);
      
      ShareExtend.share(file.path, "image");
    } catch (e) {
      debugPrint('截图分享失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('截图分享')),
      body: RepaintBoundary(
        key: _repaintBoundaryKey,
        child: Container(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              const Text('这是要截图分享的内容'),
              const SizedBox(height: 20),
              ElevatedButton.icon(
                onPressed: _captureAndShare,
                icon: const Icon(Icons.share),
                label: const Text('截图并分享'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

七、完整示例代码

下面是一个完整的示例应用，展示了 share_extend 的各种用法：

dart 复制代码 
import 'package:flutter/material.dart';
import 'package:share_extend/share_extend.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ShareExtend 示例',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF6366F1)),
        useMaterial3: true,
      ),
      home: const ShareDemoPage(),
    );
  }
}

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

  @override
  State<ShareDemoPage> createState() => _ShareDemoPageState();
}

class _ShareDemoPageState extends State<ShareDemoPage> {
  final TextEditingController _textController = TextEditingController();
  final ImagePicker _picker = ImagePicker();
  List<String> _selectedImages = [];

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }

  Future<void> _shareText() async {
    if (_textController.text.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('请输入要分享的内容')),
      );
      return;
    }
    ShareExtend.share(_textController.text, "text");
  }

  Future<void> _shareSingleImage() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      ShareExtend.share(image.path, "image");
    }
  }

  Future<void> _shareMultipleImages() async {
    final List<XFile> images = await _picker.pickMultiImage();
    if (images.isNotEmpty) {
      setState(() {
        _selectedImages = images.map((x) => x.path).toList();
      });
      ShareExtend.shareMultiple(_selectedImages, "image");
    }
  }

  void _shareArticle() {
    String content = '''
【Flutter for OpenHarmony 教程】

分享功能是移动应用中常见的功能之一。通过 share_extend 插件，我们可以轻松实现系统级分享功能。

主要特点：
- 跨平台支持
- 系统原生体验
- 多类型支持

查看详情：https://openharmonycrossplatform.csdn.net
''';
    ShareExtend.share(content, "text");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ShareExtend 示例'),
        centerTitle: true,
        elevation: 0,
      ),
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFFE8F4FF),
              Color(0xFFF8F9FF),
            ],
          ),
        ),
        child: SafeArea(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                _buildSectionTitle('分享文本'),
                const SizedBox(height: 12),
                Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(12),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.05),
                        blurRadius: 10,
                      ),
                    ],
                  ),
                  child: Column(
                    children: [
                      TextField(
                        controller: _textController,
                        maxLines: 3,
                        decoration: const InputDecoration(
                          hintText: '输入要分享的文本内容...',
                          border: OutlineInputBorder(),
                        ),
                      ),
                      const SizedBox(height: 12),
                      ElevatedButton.icon(
                        onPressed: _shareText,
                        icon: const Icon(Icons.text_fields),
                        label: const Text('分享文本'),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: const Color(0xFF6366F1),
                          foregroundColor: Colors.white,
                          minimumSize: const Size(double.infinity, 48),
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 24),
                _buildSectionTitle('分享图片'),
                const SizedBox(height: 12),
                Row(
                  children: [
                    Expanded(
                      child: _buildShareButton(
                        '单张图片',
                        Icons.image,
                        _shareSingleImage,
                        Colors.blue,
                      ),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: _buildShareButton(
                        '多张图片',
                        Icons.photo_library,
                        _shareMultipleImages,
                        Colors.purple,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 24),
                _buildSectionTitle('分享场景示例'),
                const SizedBox(height: 12),
                _buildShareButton(
                  '分享文章',
                  Icons.article,
                  _shareArticle,
                  Colors.teal,
                ),
                const SizedBox(height: 12),
                _buildShareButton(
                  '分享邀请码',
                  Icons.card_giftcard,
                  () {
                    ShareExtend.share(
                      '邀请码：ABC123XYZ\n下载链接：https://example.com',
                      "text",
                    );
                  },
                  Colors.orange,
                ),
                const SizedBox(height: 12),
                _buildShareButton(
                  '分享商品',
                  Icons.shopping_cart,
                  () {
                    ShareExtend.share(
                      '【特价商品】\n价格：¥99.00\n购买链接：https://shop.example.com/product/123',
                      "text",
                    );
                  },
                  Colors.red,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFF6366F1), Color(0xFF8B5CF6)],
        ),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        title,
        style: const TextStyle(
          color: Colors.white,
          fontSize: 16,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  Widget _buildShareButton(
    String text,
    IconData icon,
    VoidCallback onPressed,
    Color color,
  ) {
    return ElevatedButton.icon(
      onPressed: onPressed,
      icon: Icon(icon),
      label: Text(text),
      style: ElevatedButton.styleFrom(
        backgroundColor: color,
        foregroundColor: Colors.white,
        padding: const EdgeInsets.symmetric(vertical: 14),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    );
  }
}

八、常见问题与解决方案

8.1 分享图片失败

问题原因：

  • 图片路径不正确
  • 图片文件不存在
  • 没有读取权限

解决方案：

dart 复制代码 
// 确保文件存在
Future<void> shareImageSafely(String path) async {
  final file = File(path);
  if (await file.exists()) {
    ShareExtend.share(path, "image");
  } else {
    debugPrint('文件不存在: $path');
  }
}

8.2 分享面板不弹出

问题原因：

  • 设备没有可分享的应用
  • 平台适配问题

解决方案：

  • 确保设备安装了可分享的应用
  • 检查 OpenHarmony 平台适配是否正确

8.3 分享中文乱码

问题原因：

  • 编码问题

解决方案：

dart 复制代码 
// 使用 UTF-8 编码
String content = '分享中文内容';
ShareExtend.share(content, "text");

九、总结

share_extend 是 Flutter for OpenHarmony 应用开发中常用的系统分享组件。通过本文的学习，我们掌握了：

  1. 基础用法：分享文本、图片、文件
  2. 多项分享：同时分享多张图片
  3. 实际应用：分享文章、邀请码、商品信息、截图等场景
  4. 常见问题：分享失败、乱码等问题的解决方案

💡 开发建议：使用 share_extend 时应注意：

  • 分享前检查文件是否存在
  • 分享内容应简洁明了
  • 提供友好的错误提示
  • 考虑用户隐私，避免分享敏感信息
相关推荐
思考着亮3 小时前
1.Flutter 环境配置 & Shell 基础知识笔记
flutter
哈__5 小时前
基础入门 Flutter for OpenHarmony：fluttertoast 消息提示详解
flutter
哈__7 小时前
基础入门 Flutter for OpenHarmony：SystemChrome 屏幕方向控制详解
flutter
键盘鼓手苏苏9 小时前
Flutter for OpenHarmony 实战：Flutter Rust Bridge — 极致计算性能方案
开发语言·后端·flutter·华为·rust·json·harmonyos
夏小鱼的blog10 小时前
【AtomGit 携手开源鸿蒙】Flutter-OH三方库鸿蒙化 - 1
flutter·开源·harmonyos
哈__10 小时前
基础入门 Flutter for OpenHarmony：webview_flutter 内嵌浏览器详解
flutter·华为·harmonyos
松叶似针10 小时前
Flutter三方库适配OpenHarmony【secure_application】— 插件功能全景与适配价值
flutter·harmonyos·鸿蒙
钛态10 小时前
Flutter for OpenHarmony：leak_tracker 自动监测内存泄漏，精准定位未释放对象（内存性能优化） 深度解析与鸿蒙适配指南
flutter·华为·性能优化·harmonyos
松叶似针11 小时前
Flutter三方库适配OpenHarmony【secure_application】— 开发环境与工具链准备
flutter·harmonyos
热门推荐
01PHP Error: 常见错误及其解决方法02GitHub 镜像站点03Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services04openClaw安装飞书插件｜核心踩坑：spawn EINVAL 错误终极解决指南05UV安装并设置国内源06HTB 赛季10 - Pterodactyl - user07243 行 microGPT：把“训练 + 推理”拆到骨头里08Android Studio Panda 1 正式版来了：JDK 终于不用手动配了，内存泄漏也有原生方案了09如何解决 OpenClaw “Pairing required” 报错：两种官方解决方案详解10爬虫逆向之观安（观镜WEB应用安全防护系统）