前言欢迎加入开源鸿蒙跨平台社区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 分享预览与多平台分享按钮如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力
企业数字化 ERP 产品动态
相关推荐
GPT-SOL-5.6：国产数学推理大模型在IMO测试获满分的突破 这次我们来看一个在数学推理领域取得突破性进展的国产模型——GPT-SOL-5.6。这个模型在IMO 2026测试中获得了满分成绩，并且解题速度惊人，最快仅需14分58秒就能完成复杂数学问题的求解。GPT-SOL-5.6作为国产数学推理大模型的最新成果，展现了在… · 2026/9/26 21:29:58
基于C3k2模块与HDRAB算法的身份证识别技术突破 1. 项目背景与核心价值在金融、安防、政务等需要实名认证的场景中，身份证识别技术已成为基础能力。传统方案通常要求用户将身份证平铺在纯色背景上拍摄，这种理想化条件在实际业务中往往难以满足——用户可能手持证件、存在反光、倾斜角度或复杂背景干扰。… · 2026/9/21 4:24:25
Python实现Soft PINN求解二维对流传热方程 1. 项目概述在工程热物理领域，平板间对流传热问题一直是经典的研究课题。传统数值解法如有限元法（FEM）和有限体积法（FVM）虽然成熟，但面临着网格生成复杂、计算成本高等问题。最近几年兴起的物理信息神经网络… · 2026/9/19 19:08:12
Windows Server 镜像下载与VMware安装避坑指南 1. 找 Windows Server 镜像，为什么总是一头雾水如果你搜的是“Windows server 镜像下载”，那你多半已经被各种下载站绕晕了。点进去一个“最新版Windows Server 2022镜像”，满页都是“高速下载”“推荐迅雷”“安全下载”，结果下载… · 2026/9/26 21:29:15
Python社交网络分析实战：微博转发关系抓取与networkx可视化 简介：这份资源面向社交网络分析与Python数据挖掘的学习者，围绕新浪微博转发关系展开，帮助读者理解如何从模拟登录、网页解析到网络图与时间图绘制的完整分析链路。包内共16个文件，以6个Python脚本为核心，辅以3个pyc编译… · 2026/9/26 21:29:15
OpenClaw实战：一键部署AI Agent，把飞书Teams变成自动化助理 2026年的开工季来得比往年更早，也来得更吵。飞书上不完的消息、Teams里躺着的未读、邮箱里攒了一周没动手的周报……上班族的工作压力从来不是某一个特别大的难题，而是几十个五分钟就能做完、但又必须亲手做完的琐碎事情叠在一起。我这两年试过各种效率工… · 2026/9/26 21:29:15
从存储引擎到分布式事务：读DDIA掌握数据系统设计关键 简介：DDIA（Designing Data-Intensive Applications）《设计数据密集型应用》中文翻译版，面向后端工程师、架构师、DBA 与技术管理者，系统梳理从底层数据结构到顶层系统架构的数据系统设计思路，围绕数据模型、… · 2026/9/26 21:29:01
轮胎缺陷检测实战：从YOLOv8训练到TensorRT产线部署的Python源码实现 简介：这份资源面向计算机视觉方向的本科毕业生与深度学习入门者，提供一套基于深度学习的轮胎磨损与缺陷检测完整Python实现，可用于毕业设计选题、课程项目或算法练手。压缩包共34个文件，约6.22MB，以25个Python源码为主… · 2026/9/26 21:29:01
基于深度学习的轮胎缺陷检测：YOLOv8算法实现与产线落地避坑指南 简介：这份资源面向计算机视觉方向的本科或研究生毕业设计场景，提供一套基于深度学习实现轮胎磨损与缺陷检测的完整Python源码方案，适合已具备一定深度学习基础、需要完成缺陷检测类课题或工程实践的学习者。压缩包共34个文件，约6.… · 2026/9/26 21:29:01
数据库课后习题答案别硬背：当测试用例集刷，效率翻倍 简介：万常选版《数据库原理与设计》课后习题答案资源，覆盖第2至6章及第9章，适合正在学习关系模型、数据库建模、关系数据理论与模式求精的本科生、自学者作为复习与自测材料。压缩包共7个文件，含3个doc参考答案、2个sql示例脚本、… · 2026/9/26 0:00:21
OpenClaw 替代品？Hermes Agent 踩坑实录：macOS 飞书接入 TaoToken 配置 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 0:00:40
向下兼容与向上兼容：接口设计中的兼容性策略与工程实践 一次版本升级事故，是很多团队绕不过去的坎。线上环境里，服务端明明已经上线了新版接口，老的移动端还在照着旧文档传参数。请求一到网关，校验直接拒绝，用户操作失败，客服群炸了锅，开发群里开始互… · 2026/9/26 0:00:46
