HarmonyOS鸿蒙Next沁园春

一、效果展示

1. 手机

1. 折叠屏

1. 平板

1. pc电脑（2in1）

二、工程结构

│ ├─common │ │ ├─caedData/BackgroundImageConfig.ets // 背景选择 │ │ ├─component/BackNavigationBar.ets // 返回组件 │ │ ├─constant/CommonConstants.ets // 公共常量 │ │ ├─constant/TabConstants.ets // 底部导航 │ │ └─utils/CloudData_ObjClassName.ets // 数据库对象 │ │ └─utils/CommentLazyForEachClass.ets // 懒加载类 │ ├─entryability │ ├─entryformability │ ├─pages │ │ └─Index.ets // 首页 │ ├─view │ │ ├─AppreciationAudio.ets // 视频欣赏 │ │ ├─CommentDisplay.ets // 评论显示 │ │ ├─CustomTranslation.ets // 内容翻译/理解 │ │ ├─FloatButtons.ets // 悬浮按钮 │ │ ├─KnowTheAction.ets // 诗词背景理解 │ │ ├─OriginalsView.ets // 首页 │ │ └─RoofStyle.ets // 顶部标题 │ ├─widgetdk │ ├─widgetwk │ ├─widgetxk │ ├─widgetzk │ └─resources └─module.json5 // 模块配置文件

三、页面开发

1. index.ets首页

(1) 创建一个包含顶部标签页和底部浮动按钮的页面布局

(2) 标签页包含四个子页面：原创内容、赏析音频、自定义翻译和了解背景

(3) 底部有浮动操作按钮

(4) 实现了标签页切换时的数据更新逻辑

2. OriginalsView.ets诗词内容页面

(1) 顶部显示诗歌标题、作者和正文

(2) 中间显示朝代和出处信息

(3) 底部显示评论提示和评论区

(4) 整体设置了背景图片和适当的边距

(5) 底部预留了166单位空间，避免内容被浮动按钮遮挡

(6) 关闭了滚动条显示，使界面更简洁

3. AppreciationAudio.ets视频欣赏页面

(1) 视频播放区域：

① 内置视频播放器及自定义控制条

② 支持播放/暂停、进度显示、时间显示等功能

③ 包含完整的视频状态监听

(2) 联系信息区域：

① 显示公司信息和联系方式

② 电话和邮箱支持点击交互(拨打电话/复制邮箱)

③ 采用卡片式设计，包含圆角和背景色

(3) 全局样式：

① 设置背景图片和顶部安全区域

② 采用响应式布局，适配不同屏幕尺寸

4. CustomTranslation.ets诗词翻译

(1) 数据接收：

① 通过@Prop接收父组件传递的当前诗歌索引(poetryDataArray_idx)

② 通过@Prop接收背景图片路径(backgroundImageSwitchPath)

③ 内部维护诗歌数据状态(poetryDataArray)

(2) UI布局：

① 使用Scroll实现可滚动视图

② 显示当前选中诗歌的自定义翻译内容(poetryCustomTranslation)

③ 底部预留166单位空间防止内容被底部操作栏遮挡

(3) 样式特点：

① 文字采用16px半粗体显示

② 背景图片采用覆盖模式(ImageSize.Cover)

③ 隐藏原生滚动条保持界面简洁

(4) 设计考虑：

① 宽度设为92%而不是100%，留出左右边距提升可读性

② 顶部添加12单位内边距避免内容紧贴状态栏

③ 水平居中排版提升视觉舒适度

5. KnowTheAction.ets诗词牌名背景了解

(1) 数据管理：

① 通过@Prop接收父组件传递的当前诗歌索引和背景图片路径

② 使用@State管理本地诗歌数据

(2) UI展示：

① 使用Scroll组件实现可滚动视图

② 展示当前选中诗歌的背景知识内容(poetryAction字段)

③ 文本采用16px半粗体样式

(3) 布局特点：

① 内容区宽度设为92%，留出左右边距

② 底部预留166单位空间避免被底部操作栏遮挡

③ 背景图片采用覆盖模式，保持美观

(4) 优化细节：

① 关闭滚动条保持界面简洁

② 内容水平居中提升阅读体验

③ 顶部添加12单位内边距避免内容紧贴边缘

6. FloatButtons.ets浮点按钮实现

(1) 操作按钮区：

① 上/下篇导航：切换文章内容

② 背景切换：随机更换背景图片

③ 消息按钮：切换评论输入模式

(2) 输入模式：

① 显示文本输入框和发送按钮

② 发送按钮有按下状态效果

(3) 展开/收起功能：

① 通过图标按钮控制操作栏的展开和收起

② 带有平滑的动画过渡效果（使用极端减速曲线）

(4) 样式特点：

① 整体采用圆角设计（50px大圆角）

② 按钮有圆形或圆角矩形样式

③ 使用状态样式实现按钮按下效果

(5) 交互优化：

① 展开/收起时有不同的动画时长（展开1.5秒/收起1秒）

② 输入框自动调整宽度（占62%）

③ 操作栏隐藏时完全不可见（Visibility.Hidden）