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 平台颜色平台颜色品牌色值微信#07C160微信绿朋友圈#07C160微信绿微博#E6162D微博红QQ#12B7F5QQ蓝复制链接#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 分享按钮参数参数类型说明示例iconstring按钮图标QQlabelstring按钮文字微信colorstring品牌色#07C160七、路由跳转策略按钮目标API效果‹ 返回上一页router.back()出栈返回分享(待集成)系统分享调用系统分享八、完整代码文件索引文件路径说明pages/SharePreviewPage.ets分享预览页面components/BottomTabBar.ets底部导航栏组件九、本文涉及的所有 APIAPI/组件用途文档链接BuilderUI 复用Builder GuideButton按钮组件ButtonScroll可滚动容器Scrollshadow()阴影效果ShadowborderRadius()圆角BorderRadiusrouter.back()返回RouterFlexAlign对齐枚举FlexAlign总结本文详细讲解了 SharePreviewPage 分享预览与多平台分享按钮的实现。核心知识点包括圆形按钮设计borderRadius(22)实现正圆、Builder 参数化封装ShareButton接受 icon/label/color、分享面板布局SpaceAround分散 6 个按钮。这些技术构成了完整的分享预览页面。下一篇我们将深入 TemplateSelectPage 模板选择页的实现。相关资源HarmonyOS Button 组件Button ReferenceHarmonyOS Builder 装饰器Builder GuideHarmonyOS Scroll 组件Scroll ComponentHarmonyOS shadow 属性Shadow AttributeHarmonyOS borderRadius 属性BorderRadiusHarmonyOS Router 路由Router APIHarmonyOS FlexAlign 枚举FlexAlign Enums开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netTemplateSelectPage 模板选择页如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力