摘要
本文分析“转盘决定吧”的阅读小站实现。它不是简单堆 Text，而是包含文章模型、内容服务、手机单列布局、平板双列布局、字号行高联动和长文滚动。
1. 文章模型设计
阅读文章使用结构化模型：
|
interface ReadingArticle { id: string; title: string; summary: string; tag: string; minutes: number; paragraphs: string[]; } |
为什么正文用 paragraphs 数组？
|
渲染时段落间距可控 朗读时可以拼接全文 后续可做阅读进度 长文不会挤成一整块 |
2. 内容服务 ReadingLibrary
这样页面只负责展示，内容来源由 service 管理。
3. 断点判断
阅读页通过全局断点状态适配设备：
|
@StorageProp('currentBreakpoint') currentBp: string = 'sm'; private isWide(): boolean { return this.currentBp !== 'sm'; } |
手机：
|
正文在上 文章列表在下 整体可滚动 |
平板和 2 合 1：
|
左侧文章列表 右侧正文阅读区 |
4. 最大内容宽度
大屏不能无限拉伸：
|
private maxContentWidth(): string { if (this.currentBp === 'lg') { return '1120vp'; } if (this.currentBp === 'md') { return '840vp'; } return '100%'; } |
阅读体验里，行长过长会明显降低可读性。
5. 字号和行高联动
字号状态：
|
@State fontStep: number = 0; |
计算正文大小：
|
private bodyFontSize(): number { return 16 + this.fontStep; } private bodyLineHeight(): number { return 27 + this.fontStep * 2; } |
字号增大时行高也要增大，否则文字会显得拥挤。
6. 长文滚动区域
正文必须放在 Scroll 中：
|
Scroll() { Column() { ForEach(this.selectedArticle().paragraphs, (paragraph: string) => { Text(paragraph) .fontSize(this.bodyFontSize()) .lineHeight(this.bodyLineHeight()) .margin({ bottom: 16 }); }) } } .layoutWeight(1) |
这是小屏、横屏和窗口缩放下保持内容可达的关键。
7. 技术结论
阅读页的技术重点是内容结构化和布局自适应。把文章模型、内容服务、字号控制、滚动区域和断点布局拆开，后面接 SpeechKit 朗读时会非常自然。再帮帮孩子吧，我这个应用用代码一个一个敲出来的，帮忙到应用市场下载一个评论一下体验一哈，谢谢支持，转盘决定吧
