前言欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net排版预览是小分享 App 的核心功能之一采用「线装本」传统风格设计营造古典雅致的阅读体验。线装本是中国传统书籍的装订方式其米黄色纸张、疏朗的排版给人以宁静致远的感受。本篇讲解 PreviewPage 的米黄底色、装饰分隔线、底部工具栏、Builder 封装等实现。详细 API 可参考 HarmonyOS ArkUI 样式官方文档。一、PreviewPage 完整代码1.1 页面完整实现import router from ohos.router; Entry Component struct PreviewPage { build() { Column() { // Header 导航栏 this.HeaderBar() // 预览内容区域 Scroll() { Column() { this.PreviewCard() } .padding({ bottom: 100 }) } .layoutWeight(1) // 底部工具栏 this.BottomToolbar() } .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).onClick(() { router.pushUrl({ url: pages/SharePreviewPage }) }) } .width(100%).padding({ left: 16, right: 16, top: 12, bottom: 12 }).backgroundColor(Color.White)二、线装本风格设计2.1 米黄底色线装本风格的核心在于米黄色背景模拟传统纸张的质感.backgroundColor(#FFFDF5)2.2 装饰分隔线装饰分隔线用于区分内容区域增强视觉层次感Column().width(80%).height(1).backgroundColor(#E0E0E0).margin({ top: 20, bottom: 20 })2.3 行高设置合适的行高能大幅提升阅读体验.lineHeight(28)三、预览卡片布局3.1 卡片结构预览卡片采用传统竖排文字风格包含标题、正文、图片和装饰元素Column({ space: 20 }) { // 标题区 Column({ space: 12 }) { Text(小分享).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#1A1A1A) Text(生活的美好在于分享).fontSize(16).fontColor(#666666) } .alignItems(HorizontalAlign.Center).margin({ top: 30 }) // 正文区 Column({ space: 16 }) { Text(生活的美好在于分享...).fontSize(15).fontColor(#333333).lineHeight(28).width(100%) Text(让我们用文字记录这些美好...).fontSize(15).fontColor(#333333).lineHeight(28).width(100%) } .padding({ left: 24, right: 24, top: 20 }) // 装饰分隔线 Column().width(80%).height(1).backgroundColor(#E0E0E0).margin({ top: 20, bottom: 20 }) // 图片区 Column() { Text().fontSize(80) } .width(100%).height(240).backgroundColor(#FFF8F0).borderRadius(8) .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center) // 更多正文 Column({ space: 16 }) { Text(通过文字我们可以传递情感...).fontSize(15).fontColor(#333333).lineHeight(28).width(100%) } .padding({ left: 24, right: 24, bottom: 30 }) } .width(100%).backgroundColor(#FFFDF5).borderRadius(12) .margin({ left: 16, right: 16, top: 16 }) .shadow({ radius: 4, color: #10000000, offsetY: 2 })四、底部工具栏4.1 Builder 封装底部工具栏包含模板、背景、音乐、分享四个功能按钮Builder BottomToolItem(icon: string, label: string, onClick?: () void) { Column({ space: 4 }) { Text(icon).fontSize(20) Text(label).fontSize(11).fontColor(#666666) } .alignItems(HorizontalAlign.Center) .onClick(() { if (onClick) { onClick() } }) }4.2 工具栏布局Row({ space: 0 }) { this.BottomToolItem(, 模板, () { router.pushUrl({ url: pages/TemplateSelectPage }) }) this.BottomToolItem(, 背景) this.BottomToolItem(, 音乐) this.BottomToolItem(, 分享, () { router.pushUrl({ url: pages/SharePreviewPage }) }) } .width(100%).height(60).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround) .shadow({ radius: 4, color: #10000000, offsetY: -2 })五、Builder 与 Component 选择5.1 对比维度BuilderComponent复用粒度UI 片段完整组件状态管理共享外部状态独立状态调用方式this.xxx()标签调用适用场景简单工具栏按钮复杂独立组件六、阴影与圆角6.1 卡片阴影.shadow({ radius: 4, color: #10000000, offsetY: 2 })6.2 卡片圆角.borderRadius(12)七、路由跳转7.1 跳转策略按钮目标页面路由 API‹ 返回上一页router.back()分享SharePreviewPagerouter.pushUrl()模板TemplateSelectPagerouter.pushUrl()八、核心知识点8.1 技术要点米黄底色 #FFFDF5 营造古典感装饰分隔线增强视觉层次lineHeight 28 提升阅读体验Builder 封装底部工具栏8.2 实战建议传统风格用暖色调米黄背景分隔线用 80% 宽度居中底部工具栏参数化设计总结本文详细讲解了 PreviewPage 线装本排版预览的实现从米黄底色、装饰分隔线、预览卡片布局到底部工具栏涵盖了线装本风格的全部设计要点。下一篇我们将深入 SharePreviewPage 分享预览的实现。SharePreviewPage 分享预览与多平台分享按钮相关资源HarmonyOS ArkUI 样式ArkUI StylingHarmonyOS Builder 装饰器Builder GuideHarmonyOS Scroll 组件Scroll ComponentHarmonyOS shadow 属性Shadow AttributeHarmonyOS borderRadius 属性BorderRadiusHarmonyOS Router 路由Router APIHarmonyOS Text 组件Text Reference开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netSharePreviewPage 分享预览与多平台分享按钮如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力