页面预览

分享预览与多平台分享流程图

前言

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

分享预览 是用户发布前的最后一步，预览卡片效果并选择分享到哪个平台。小分享 App 的 SharePreviewPage 包含卡片预览区和多平台分享按钮，使用 @Builder 封装圆形按钮、FlexAlign.SpaceAround 分散布局 等技巧。本篇详细讲解分享预览页的完整实现。详细 API 可参考 HarmonyOS Button 官方文档。

一、SharePreviewPage 完整代码

1.1 页面完整实现

import router from '@ohos.router';
import { BottomTabBar } from '../components/BottomTabBar';

@Entry
@Component
struct SharePreviewPage {
  build() {
    Column() {
      this.HeaderBar()
      Scroll() { Column() { this.PreviewCard() }.padding({ bottom: 120 }) }.layoutWeight(1)
      this.SharePanel()
    }
    .width('100%').height('100%').backgroundColor('#F5F5F5')
  }
}

1.2 Header 导航栏

Row() {
  Text('‹').fontSize(24).fontColor('#1A1A1A').onClick(() => { router.back() })
  Text('预览').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#1A1A1A').layoutWeight(1).textAlign(TextAlign.Center)
  Text('分享').fontSize(16).fontColor('#F5A623')
}
.width('100%').padding({ left: 16, right: 16, top: 12, bottom: 12 }).backgroundColor(Color.White)

二、预览卡片

2.1 卡片布局

Column({ space: 16 }) {
  Text('生活的美好在于分享').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#1A1A1A').width('100%')
  Text('无论是清晨的一缕阳光...').fontSize(14).fontColor('#666666').lineHeight(24).width('100%')
  Column() { Text('').fontSize(60) }
    .width('100%').height(200).backgroundColor('#FFF8F0').borderRadius(12)
    .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  Text('让我们用文字记录这些美好...').fontSize(14).fontColor('#666666').lineHeight(24).width('100%')
}
.width('100%').padding(20).backgroundColor('#FFFDF5').borderRadius(12)
.margin({ left: 16, right: 16, top: 16 })
.shadow({ radius: 4, color: '#10000000', offsetY: 2 })

三、圆形分享按钮

3.1 @Builder 封装

@Builder ShareButton(icon: string, label: string, color: string) {
  Column({ space: 6 }) {
    Column() { Text(icon).fontSize(22) }
      .width(44).height(44).backgroundColor(color).borderRadius(22)
      .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
    Text(label).fontSize(11).fontColor('#666666')
  }
  .alignItems(HorizontalAlign.Center)
}

3.2 圆形按钮原理

.width(44).height(44)    // 宽高相等
.borderRadius(22)        // 圆角 = 宽/2 = 22 → 正圆形

四、多平台分享面板

4.1 平台颜色

平台 颜色 品牌色值
微信 #07C160 微信绿
朋友圈 #07C160 微信绿
微博 #E6162D 微博红
QQ #12B7F5 QQ蓝
复制链接 #666666 灰色
更多 #999999 浅灰

4.2 分享面板布局

Column({ space: 12 }) {
  Text('分享到').fontSize(13).fontColor('#999999').width('100%').textAlign(TextAlign.Center)
  Row({ space: 0 }) {
    this.ShareButton('', '微信', '#07C160')
    this.ShareButton('', '朋友圈', '#07C160')
    this.ShareButton('', '微博', '#E6162D')
    this.ShareButton('QQ', 'QQ', '#12B7F5')
    this.ShareButton('', '复制链接', '#666666')
    this.ShareButton('', '更多', '#999999')
  }
  .width('100%').justifyContent(FlexAlign.SpaceAround)
}
.width('100%').padding({ top: 16, bottom: 20 }).backgroundColor(Color.White)
.shadow({ radius: 4, color: '#10000000', offsetY: -2 })

五、页面布局结构

Column (主容器，背景 #F5F5F5)
├─ Row (Header 导航栏，白色背景)
│   ├─ Text('‹') 返回
│   ├─ Text('预览') 标题
│   └─ Text('分享') 完成
├─ Scroll (可滚动内容区) - layoutWeight(1)
│   └─ Column (padding bottom: 120)
│       └─ Column (预览卡片，米黄底色 #FFFDF5)
│           ├─ Text(标题) 20px Bold
│           ├─ Text(正文) 14px 灰色
│           ├─ Column(图片) 100%×200px #FFF8F0
│           └─ Text(正文) 14px 灰色
└─ Column (分享面板，白色背景)
    ├─ Text('分享到') 13px 灰色
    └─ Row (6 个分享按钮) - SpaceAround

六、@Builder 参数化设计

6.1 分享按钮参数

参数 类型 说明 示例
icon string 按钮图标 'QQ'
label string 按钮文字 '微信'
color string 品牌色 '#07C160'

七、路由跳转策略

按钮 目标 API 效果
‹ 返回 上一页 router.back() 出栈返回
分享 (待集成) 系统分享 调用系统分享

八、完整代码文件索引

文件路径 说明
pages/SharePreviewPage.ets 分享预览页面
components/BottomTabBar.ets 底部导航栏组件

九、本文涉及的所有 API

API/组件 用途 文档链接
@Builder UI 复用 Builder Guide
Button 按钮组件 Button
Scroll 可滚动容器 Scroll
shadow() 阴影效果 Shadow
borderRadius() 圆角 BorderRadius
router.back() 返回 Router
FlexAlign 对齐枚举 FlexAlign

总结

本文详细讲解了 SharePreviewPage 分享预览与多平台分享按钮的实现。核心知识点包括：圆形按钮设计（borderRadius(22) 实现正圆）、@Builder 参数化封装（ShareButton 接受 icon/label/color）、分享面板布局（SpaceAround 分散 6 个按钮）。这些技术构成了完整的分享预览页面。下一篇我们将深入 TemplateSelectPage 模板选择页的实现。

  • TemplateSelectPage 模板选择页

相关资源

附录：分享预览的完整实现细节

1. 完整的页面布局结构

Column (主容器，背景 #F5F5F5)
├─ Row (Header 导航栏，白色背景)
│   ├─ Text('‹') 返回按钮
│   ├─ Text('预览') 标题居中
│   └─ Text('分享') 操作按钮
├─ Scroll (可滚动内容区) - layoutWeight(1)
│   └─ Column (padding bottom: 120，避免被分享面板遮挡)
│       └─ Column (预览卡片，米黄底色 #FFFDF5)
│           ├─ Text(标题) 20px Bold
│           ├─ Text(正文) 14px 灰色 lineHeight 24
│           ├─ Column(图片) 100%×200px #FFF8F0
│           └─ Text(正文) 14px 灰色 lineHeight 24
└─ Column (分享面板，白色背景，固定在底部)
    ├─ Text('分享到') 13px 灰色 居中
    └─ Row (6 个分享按钮) - FlexAlign.SpaceAround
        ├─ ShareButton(微信, #07C160)
        ├─ ShareButton(朋友圈, #07C160)
        ├─ ShareButton(微博, #E6162D)
        ├─ ShareButton(QQ, #12B7F5)
        ├─ ShareButton(复制链接, #666666)
        └─ ShareButton(更多, #999999)

2. 分享按钮的完整参数

参数 类型 默认值 说明
icon string ‘’ 按钮图标（Emoji 或文字）
label string ‘’ 按钮下方显示的文字
color string ‘#07C160’ 按钮背景色（品牌色）

3. 圆形按钮的完整实现

@Builder ShareButton(icon: string, label: string, color: string) {
  Column({ space: 6 }) {
    // 圆形图标容器
    Column() {
      Text(icon)
        .fontSize(22)
    }
    .width(44)
    .height(44)
    .backgroundColor(color)
    .borderRadius(22)    // 圆角 = 宽/2 = 22 → 正圆
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)

    // 下方文字标签
    Text(label)
      .fontSize(11)
      .fontColor('#666666')
  }
  .alignItems(HorizontalAlign.Center)
}

4. 分享面板的完整实现

Column({ space: 12 }) {
  Text('分享到')
    .fontSize(13)
    .fontColor('#999999')
    .width('100%')
    .textAlign(TextAlign.Center)

  Row({ space: 0 }) {
    this.ShareButton('', '微信', '#07C160')
    this.ShareButton('', '朋友圈', '#07C160')
    this.ShareButton('', '微博', '#E6162D')
    this.ShareButton('QQ', 'QQ', '#12B7F5')
    this.ShareButton('', '复制链接', '#666666')
    this.ShareButton('', '更多', '#999999')
  }
  .width('100%')
  .justifyContent(FlexAlign.SpaceAround)
}
.width('100%')
.padding({ top: 16, bottom: 20 })
.backgroundColor(Color.White)
.shadow({ radius: 4, color: '#10000000', offsetY: -2 })

5. 预览卡片的完整实现

Column({ space: 16 }) {
  Text('生活的美好在于分享')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .fontColor('#1A1A1A')
    .width('100%')

  Text('无论是清晨的一缕阳光，还是夜晚的一盏明灯，都是生活中值得记录的瞬间。')
    .fontSize(14)
    .fontColor('#666666')
    .lineHeight(24)
    .width('100%')

  // 图片占位区
  Column() {
    Text('')
      .fontSize(60)
  }
  .width('100%')
  .height(200)
  .backgroundColor('#FFF8F0')
  .borderRadius(12)
  .justifyContent(FlexAlign.Center)
  .alignItems(HorizontalAlign.Center)

  Text('让我们用文字记录这些美好，与身边的人分享这份温暖。')
    .fontSize(14)
    .fontColor('#666666')
    .lineHeight(24)
    .width('100%')
}
.width('100%')
.padding(20)
.backgroundColor('#FFFDF5')
.borderRadius(12)
.margin({ left: 16, right: 16, top: 16 })
.shadow({ radius: 4, color: '#10000000', offsetY: 2 })

6. 阴影效果详解

// 卡片阴影 - 使卡片浮起
.shadow({ radius: 4, color: '#10000000', offsetY: 2 })

// 分享面板阴影 - 使面板浮起
.shadow({ radius: 4, color: '#10000000', offsetY: -2 })

7. 路由跳转策略

按钮 目标 API 说明
‹ 返回 上一页 router.back() 出栈返回
分享 系统分享 router.pushUrl() 跳转分享

8. 与 PreviewPage 的对比

对比维度 SharePreviewPage PreviewPage
用途 最终分享预览 文字排版预览
工具栏 分享到各平台 模板/背景/音乐/分享
跳转来源 PreviewPage TextEditPage
核心功能 多平台分享 样式调整

9. 完整代码文件索引

文件路径 说明
pages/SharePreviewPage.ets 分享预览页面
components/BottomTabBar.ets 底部导航栏组件

10. 本文涉及的所有 API

API/组件 用途 文档链接
@Builder UI 复用 Builder Guide
Button 按钮组件 Button
Scroll 可滚动容器 Scroll
shadow() 阴影效果 Shadow
borderRadius() 圆角 BorderRadius
router.back() 返回 Router
FlexAlign 对齐枚举 FlexAlign

11. 实现要点总结

分享预览页的核心实现要点：

  1. 圆形按钮：width=height=44, borderRadius=22 实现正圆形按钮
  2. @Builder 封装：ShareButton(icon, label, color) 参数化封装分享按钮
  3. 品牌色：每个平台使用对应的品牌色（微信绿、微博红、QQ蓝）
  4. SpaceAround 布局：6 个按钮在 Row 中均匀分布
  5. 卡片阴影：shadow() 属性制造浮起效果

下一步优化方向：

  • 集成 @ohos.systemShare 实现真实系统分享
  • 集成 Want 实现跳转到指定应用分享
  • 添加分享到更多平台的扩展

12. 总结

本文详细讲解了 SharePreviewPage 分享预览与多平台分享按钮的完整实现。核心知识点包括：圆形按钮设计（borderRadius(22) 实现正圆）、@Builder 参数化封装（ShareButton(icon, label, color) 三参数）、分享面板布局（FlexAlign.SpaceAround 分散 6 个按钮）、品牌色使用（微信绿、微博红、QQ蓝）。这些技术构成了完整的分享预览页面。下一篇我们将深入 TemplateSelectPage 模板选择页的实现。

  • TemplateSelectPage 模板选择页

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

# 后端
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Windows下载、安装react-native-v0.86.0（附安装包React.Native.DevTools-windows-x86_64.tar.gz）

avatar 开源鸿蒙跨平台开发者社区
cover

【OpenHarmony/HarmonyOS】短信验证码云函数设计：参数校验、限流、安全与客户端边界

avatar 开源鸿蒙跨平台开发者社区
cover

macOS下载、安装react-native-v0.86.0（附安装包React.Native.DevTools-macos-aarch64.tar.gz）

avatar 开源鸿蒙跨平台开发者社区