【开源鸿蒙跨平台开发训练营】Flutter框架开发鸿蒙应用的长按分享功能实现

模仿抖音，给详情页添加长按手势，实现长按调出分享面板。

文章目录

详情页长按分享面板
- 一、目标与方案
- 二、涉及文件
- 三、手势与双击收藏的关系
- 四、实现要点
- - [4.1 长按触发](#4.1 长按触发)
  - [4.2 底部分享面板样式与动效](#4.2 底部分享面板样式与动效)
  - [4.3 面板选项与行为](#4.3 面板选项与行为)
  - [4.4 复制链接与分享内容规则](#4.4 复制链接与分享内容规则)
- 五、关键代码
- - [5.1 依赖与导入（work_detail_page.dart）](#5.1 依赖与导入（work_detail_page.dart）)
  - [5.2 长按与 GestureDetector](#5.2 长按与 GestureDetector)
  - [5.3 弹出分享面板](#5.3 弹出分享面板)
  - [5.4 选项行组件 _ShareSheetTile](#5.4 选项行组件 _ShareSheetTile)
  - [5.5 多语言 key（app_zh.arb / app_en.arb）](#5.5 多语言 key（app_zh.arb / app_en.arb）)
- 六、使用方式与检查
- 结束语

详情页长按分享面板

本文档说明作品详情页「长按屏幕」弹出底部分享面板的交互与实现，类似抖音的长按页面动画弹窗底部分享面板。与现有「双击收藏」手势互不影响。

一、目标与方案

目标：
1. 在作品详情页全屏图片上支持长按手势。
2. 长按后从底部弹出分享面板（Modal Bottom Sheet），带圆角与滑入动效。
3. 面板提供「复制链接」「保存图片」「分享到」等选项。
4. 不改变现有双击收藏逻辑与动效。
方案：
- 在 PageView 每页的 GestureDetector 上增加 onLongPress，回调中调用 showModalBottomSheet。
- 底部面板使用 backgroundColor: Colors.transparent + 自定义圆角容器，顶部拖拽条、标题「分享」、若干 _ShareSheetTile 行。
- 复制链接使用 Clipboard.setData；分享到使用 share_plus 调起系统分享；保存图片暂为「敬请期待」提示。

二、涉及文件

文件	说明
`lib/pages/work_detail_page.dart`	详情页：长按 `onLongPress`、`_showShareBottomSheet`、`_ShareSheetTile` 组件
`lib/l10n/app_zh.arb`	中文：share、copyLink、saveImage、shareTo、linkCopied、saveImageComingSoon
`lib/l10n/app_en.arb`	英文：同上
`pubspec.yaml`	新增依赖 `share_plus: ^10.0.0`

三、手势与双击收藏的关系

双击收藏 ：onTap（配合 _lastTapTime 判断 400ms 内两次点击）+ onDoubleTap，均触发 _triggerFavoriteAndAnimation。
长按分享 ：onLongPress 触发 _showShareBottomSheet。
Flutter 手势竞技场中，长按（默认约 500ms 按下）与双击（两次短按）是不同识别器，互不抢占，因此长按不会影响双击收藏，双击也不会误触分享面板。

四、实现要点

4.1 长按触发

在 PageView.builder 的每页子组件上，GestureDetector 同时设置：
- onTap: _onImageTap
- onDoubleTap: _triggerFavoriteAndAnimation
- onLongPress: _showShareBottomSheet
无需额外防抖或状态；长按仅打开一次底部面板。

4.2 底部分享面板样式与动效

使用 showModalBottomSheet，backgroundColor: Colors.transparent，内容为自定义 Container：
- 背景色：theme.colorScheme.surface
- 圆角：BorderRadius.vertical(top: Radius.circular(20))
- 顶部居中拖拽条（小横条）、标题「分享」、若干选项行。
系统默认的 modal bottom sheet 自带自下而上滑入动效，无需额外动画。
使用 SafeArea（top: false）仅适配底部安全区；内容 padding 中加上 MediaQuery.padding.bottom。

4.3 面板选项与行为

选项	文案（l10n）	行为
复制链接	copyLink	将作品链接或标题+首图拼成文本，`Clipboard.setData`，关闭面板后 SnackBar 提示「链接已复制」
保存图片	saveImage	关闭面板后 SnackBar 提示「保存图片功能敬请期待」
分享到	shareTo	使用 `Share.share(text)`（share_plus）调起系统分享，内容为标题 + 链接（如有）

4.4 复制链接与分享内容规则

若作品有 id：链接为 https://calmharbor.app/work/{id}；复制与分享均包含该链接。
若 id 为空：复制/分享使用标题 + 首图 URL（若有），仅作占位，后续可改为实际分享链接。

五、关键代码

5.1 依赖与导入（work_detail_page.dart）

dart 复制代码

import 'package:flutter/services.dart';  // Clipboard
import 'package:share_plus/share_plus.dart';

5.2 长按与 GestureDetector

dart 复制代码

return GestureDetector(
  behavior: HitTestBehavior.opaque,
  onTap: _onImageTap,
  onDoubleTap: _triggerFavoriteAndAnimation,
  onLongPress: _showShareBottomSheet,
  child: NetworkImageWidget(...),
);

5.3 弹出分享面板

dart 复制代码

void _showShareBottomSheet() {
  final work = widget.work;
  final l10n = AppLocalizations.of(context)!;
  showModalBottomSheet<void>(
    context: context,
    backgroundColor: Colors.transparent,
    isScrollControlled: true,
    builder: (context) => Container(
      decoration: BoxDecoration(
        color: theme.colorScheme.surface,
        borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
      ),
      padding: EdgeInsets.fromLTRB(24, 20, 24, 24 + MediaQuery.of(context).padding.bottom),
      child: SafeArea(
        top: false,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 拖拽条、标题「分享」
            _ShareSheetTile(icon: Icons.link, label: l10n.copyLink, onTap: () { ... }),
            _ShareSheetTile(icon: Icons.download_outlined, label: l10n.saveImage, onTap: () { ... }),
            _ShareSheetTile(icon: Icons.share_outlined, label: l10n.shareTo, onTap: () { ... }),
          ],
        ),
      ),
    ),
  );
}

5.4 选项行组件 _ShareSheetTile

接收 icon、label、onTap。
使用 InkWell + Row(Icon + Text)，点击后执行 onTap（一般在回调内先 Navigator.pop 再执行复制/分享/提示）。

5.5 多语言 key（app_zh.arb / app_en.arb）

share：分享 / Share
copyLink：复制链接 / Copy link
saveImage：保存图片 / Save image
shareTo：分享到 / Share to
linkCopied：链接已复制 / Link copied
saveImageComingSoon：保存图片功能敬请期待 / Save image coming soon

六、使用方式与检查

使用：在作品详情页全屏图片上长按约 0.5 秒，底部滑出分享面板；点击「复制链接」/「保存图片」/「分享到」执行对应操作；点击面板外或完成操作后关闭。双击仍仅触发收藏动效，不受影响。
检查：
- 长按弹出底部分享面板，圆角、拖拽条、标题与选项布局正确。
- 复制链接后剪贴板有内容，并出现「链接已复制」SnackBar。
- 保存图片为「敬请期待」提示。
- 分享到可调起系统分享面板。
- 双击收藏与心形动效仍正常，与长按无冲突。

结束语

感谢阅读本帖，如对贴中内容有意见和建议的，欢迎与我联系交流，也欢迎加入开源鸿蒙跨平台社区：

https://openharmonycrossplatform.csdn.net