HarmonyOS开发实战：小分享-SharePreviewPage分享预览与多平台分享按钮

前言

欢迎加入开源鸿蒙跨平台社区：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 平台颜色

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 分享按钮参数

七、路由跳转策略

八、完整代码文件索引

九、本文涉及的所有 API

总结

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

相关资源

• HarmonyOS Button 组件：Button Reference
• HarmonyOS @Builder 装饰器：@Builder Guide
• HarmonyOS Scroll 组件：Scroll Component
• HarmonyOS shadow 属性：Shadow Attribute
• HarmonyOS borderRadius 属性：BorderRadius
• HarmonyOS Router 路由：Router API
• HarmonyOS FlexAlign 枚举：FlexAlign Enums
• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

• TemplateSelectPage 模板选择页

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