HarmonyOS开发实战：小分享-PreviewPage线装本排版预览

前言

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

六、阴影与圆角

6.1 卡片阴影

.shadow({ radius: 4, color: '#10000000', offsetY: 2 })

6.2 卡片圆角

.borderRadius(12)

七、路由跳转

7.1 跳转策略

八、核心知识点

8.1 技术要点

• 米黄底色 #FFFDF5 营造古典感
• 装饰分隔线增强视觉层次
• lineHeight 28 提升阅读体验
• @Builder 封装底部工具栏

8.2 实战建议

• 传统风格用暖色调米黄背景
• 分隔线用 80% 宽度居中
• 底部工具栏参数化设计

总结

本文详细讲解了 PreviewPage 线装本排版预览的实现，从 米黄底色、装饰分隔线、预览卡片布局 到 底部工具栏，涵盖了线装本风格的全部设计要点。下一篇我们将深入 SharePreviewPage 分享预览的实现。

相关资源

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

• SharePreviewPage 分享预览与多平台分享按钮

附录：线装本排版预览的完整实现细节

1. 完整的页面结构

Column (主容器，背景 #F5F5F5)
├─ Row (Header 导航栏，白色背景)
│   ├─ Text('‹') 返回
│   ├─ Text('排版预览') 标题
│   └─ Text('分享') 跳转
├─ Scroll (可滚动内容区) - layoutWeight(1)
│   └─ Column
│       └─ Column (预览卡片，米黄底色 #FFFDF5)
│           ├─ Column (标题区)
│           │   ├─ Text('小分享') 28px Bold
│           │   └─ Text('生活的美好在于分享') 16px
│           ├─ Column (正文区)
│           │   ├─ Text(段落1) 15px lineHeight 28
│           │   └─ Text(段落2) 15px lineHeight 28
│           ├─ Column (装饰分隔线) 80% 宽度
│           ├─ Column (图片区) 100%×240px #FFF8F0
│           └─ Column (正文区)
│               └─ Text(段落3) 15px lineHeight 28
└─ Row (底部工具栏，白色背景)
    ├─ BottomToolItem(模板)
    ├─ BottomToolItem(背景)
    ├─ BottomToolItem(音乐)
    └─ BottomToolItem(分享)

2. 米黄底色的设计原理

线装本风格的核心在于米黄色背景 #FFFDF5，这是一种暖色调的米白，模拟传统纸张的质感。相比纯白 #FFFFFF，米黄色更柔和、更护眼，适合长文阅读。

3. 装饰分隔线的设计

Column().width('80%').height(1).backgroundColor('#E0E0E0')
  .margin({ top: 20, bottom: 20 })

80% 宽度居中显示，模拟传统书籍的章节分隔线。

4. 卡片阴影效果

.shadow({ radius: 4, color: '#10000000', offsetY: 2 })

5. 底部工具栏详解

6. @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() } })
}

7. 与普通预览卡的对比

8. 路由跳转策略

9. 本文涉及的所有 API

10. 实现要点总结

线装本预览的核心设计要点：

1. 米黄底色：#FFFDF5 模拟传统纸张质感
2. 装饰分隔线：80% 宽度居中，模拟书籍章节分隔
3. 行高：lineHeight(28) 提升阅读舒适度
4. 卡片阴影：shadow() 制造浮起效果
5. @Builder 封装：工具栏按钮可复用

以上设计元素共同营造了线装本风格的古典雅致阅读体验。

11. 与 SharePreviewPage 的对比

12. 完整代码文件索引

13. 实现要点总结

• 米黄底色 #FFFDF5 营造线装本质感
• 装饰分隔线 80% 宽度居中，模拟传统书籍
• 行高 lineHeight(28) 提升阅读体验
• @Builder 封装底部工具栏，支持参数化配置
• 卡片阴影 制造浮起效果，增强视觉层次

线装本风格是小分享 App 的特色设计之一，在后续的模板系统中也会广泛应用。

14. 下一篇文章预告

第 27 篇将介绍 SharePreviewPage 分享预览页的实现，包括多平台分享按钮、圆形按钮设计、分享面板布局等核心内容。

15. 本文核心知识点索引

16. 总结

本文详细讲解了 PreviewPage 线装本排版预览的实现。核心设计理念包括：米黄底色 #FFFDF5 模拟传统纸张、装饰分隔线 80% 宽度居中模拟书籍章节分隔、行高 lineHeight(28) 提升阅读舒适度、@Builder 封装 底部工具栏按钮。这些设计元素共同营造了线装本风格的古典雅致阅读体验。下一篇我们将深入 SharePreviewPage 分享预览页的实现。

相关资源

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

• SharePreviewPage 分享预览与多平台分享按钮

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