harmonyos-best-practices-mcp 0.1.0

package/data/docs/multi-financial-app.md

@@ -0,0 +1,288 @@
+# 多设备银行理财界面
+
+> 来源: https://developer.huawei.com/consumer/cn/doc/best-practices/multi-financial-app
+> 文档标识(fileName): multi-financial-app  
+> 目录(catalogName): best-practices  
+> 语言: cn  
+> 更新时间: 2026-06-23 03:37:57  
+> 导航地址: /hmos/hmos-dp1
+
+---
+#### 概述
+
+本文从当前常见的多设备应用场景中选取银行理财应用作为典型案例，详细阐述“一多”理念在实际开发中的应用。银行理财应用在大屏幕设备上使用时，需保障用户办理金融业务的顺畅性，同时提升屏幕交互效率。多设备银行理财应用围绕首页、账户总览、理财详情和购买流程展开，覆盖了用户从资产入口浏览、产品查看到购买确认的核心链路。
+
+当前应用已适配的设备包括：直板机、双折叠（Mate X系列）、三折叠、阔折叠、平板和电脑。
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9a/v3/qNX8kzUyTxy62yDKMEg-jg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260623T075612Z&HW-CC-Expire=86400&HW-CC-Sign=76AAAC459CD3C8F6E240520997C7D72CDB0FCC845E33ADAE56BAD55AB251EB3A) 
+
+阅读本文前，建议开发者先了解[ArkUI（方舟UI框架）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui)和[一次开发，多端部署概览](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-overview)相关知识。
+
+下文将从UX设计、工程管理、页面开发三个方面，系统介绍银行理财应用在实际开发中的最佳实践，为开发者提供可借鉴的实现思路。
+
+- [UX设计](#section99762271515)：介绍银行理财应用的交互逻辑与通用的设计要点，开发者可直接参考同类设计要点。
+- [工程管理](#section719020851716)：介绍“一多”工程所需配置，并推荐采用结构更清晰的三层架构。
+- [移动端页面](#section202931220101020)和[电脑端页面](#section5748352172710)：遵循实际应用开发流程，以页面为基本单元，依次讲解窗口适配、页面开发的设计思路与实现方法。
+
+#### UX设计
+
+应用的UX设计可参考[金融理财类](https://developer.huawei.com/consumer/cn/doc/design-guides/responsive-design-examples6-0000001793536905)的多设备响应式设计指南，设计参考图如下所示。
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ee/v3/O7pJzMUITvaAt3U9xMox_A/zh-cn_image_0000002619248557.png?HW-CC-KV=V1&HW-CC-Date=20260623T075612Z&HW-CC-Expire=86400&HW-CC-Sign=5518CC09CD759802C68C402FA828AF58682277BC0EB3DE2B0808EED45A5CED01 "点击放大")
+
+#### 工程管理
+
+为确保“一多”工程代码的复用性与可维护性，建议开发者采用分层架构组织代码工程。该架构将项目划分为产品定制层（products）、基础特性层（features）和公共能力层（commons）三个层级，各层级权责明确且功能独立，为开发者提供了清晰、高效且可扩展的设计方案。关于分层架构的具体设计细节，可参考[分层架构设计](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-layered-architecture-design)。
+
+## 创建工程
+
+建议开发者参考[多设备工程部署与发布](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-ide)相关内容，掌握分层架构工程的创建与配置方法后，创建模板项目工程。根据银行理财应用的开发需求进行针对性修改，确保工程架构贴合实际业务需求。
+
+## 工程结构
+
+银行理财应用采用推荐的分层架构，将代码工程按products、features、commons三个层级组织。各层级设计如下：
+
+- products层：银行理财应用需要适配的设备包括直板机、双折叠（Mate X系列）、三折叠、阔折叠、平板和电脑。由于电脑界面布局与其他设备差异较大，因此单独创建名为“pc”的HAP包作为电脑设备的应用入口；直板机、双折叠（Mate X系列）、三折叠、阔折叠及平板设备上的界面布局整体相似，部分差异可以通过“一多”的[自适应布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-adaptive-layout)和[响应式布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout)进行适配，为此创建名为“default”的HAP包作为这些设备的应用入口。
+- features层：包含四个核心业务模块——账户（account）、投资（investment）、理财产品（wealth）和推荐（recommend）。为各模块分别创建对应HAR包，供products层按需引用。各模块相对独立，互不依赖，便于后续维护与迭代。
+- commons层：为实现代码复用并减少冗余，集中存放公共常量、日志工具类及窗口管理工具等基础能力，供其他模块统一调用。
+
+工程结构如下：
+
+```
+├──commons/financialbase                                 
+│  └──src/main
+│     ├──ets
+│     │  ├──constants                         // 公共常量定义
+│     │  └──utils                             // 工具类与窗口能力封装
+│     └──resources                            // 公共资源
+├──features                                   
+│  ├──account                                 // 账户模块
+│  │  └──src/main
+│  │     ├──ets
+│  │     │  ├──components                     // 账户模块页面组件
+│  │     │  ├──constants                      // 账户模块常量
+│  │     │  ├──model                          // 账户模块数据模型
+│  │     │  └──viewmodel                      // 账户模块视图模型
+│  │     └──resources                         // 账户模块资源
+│  ├──investment                              // 投资模块
+│  │  └──src/main
+│  │     ├──ets
+│  │     │  ├──components                     // 购买模块页面组件
+│  │     │  ├──model                          // 购买模块数据模型
+│  │     │  └──viewmodel                      // 投资模块视图模型
+│  │     └──resources                         // 投资模块资源
+│  ├──wealth                                  // 理财产品模块
+│  │  └──src/main
+│  │     ├──ets
+│  │     │  ├──components                     // 产品与卖点展示组件
+│  │     │  ├──model                          // 产品模块数据模型
+│  │     │  └──viewmodel                      // 产品模块视图模型
+│  │     └──resources                         // 产品模块资源
+│  └──recommend                               // 推荐内容特性
+│     └──src/main
+│        ├──ets
+│        │  ├──components                     // 推荐模块组件
+│        │  ├──model                          // 推荐模块数据模型
+│        │  └──viewmodel                      // 推荐模块视图模型
+│        └──resources                         // 推荐模块资源
+└──products                                    
+   ├──default                                 // 手机/平板设备
+   │  └──src/main
+   │     ├──ets
+   │     │  ├──entryability                   // 入口类
+   │     │  ├──model                          // 数据模型
+   │     │  ├──pages                          // 页面
+   │     │  ├──view                           // 组件
+   │     │  └──viewmodel                      // 视图模型
+   │     └──resources                         // 资源文件
+   └──pc                                      // PC设备
+      └──src/main
+         │  ├──model                          // 数据结构
+         │  ├──pages                          // 页面
+         │  ├──pcbackupability                // 数据备份与恢复扩展能力
+         │  ├──view                           // 组件
+         │  └──viewmodel                      // 视图模型
+         └──resources                         // 资源文件
+```
+
+#### 移动端页面
+
+本章介绍如何针对直板机、双折叠（Mate X系列）、三折叠、阔折叠及平板设备上的银行理财应用，利用“一多”布局能力，实现页面层级“一套代码、多端适配”的目标。同时，阐述这些设备上的窗口适配方案。
+
+## 窗口适配
+
+- 窗口模式
+
+  适配设备支持全屏、分屏、悬浮窗和自由窗口模式，具体参见[窗口模式](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-window-mode)。其中，分屏模式与悬浮窗无需特殊设计，可通过系统方式进入。应用内监听窗口尺寸变化，[通过断点刷新UI](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section175001836203617)，即可自动适配全屏、分屏、悬浮窗和自由窗口模式下的布局。
+- 窗口方向
+
+  在[model.json5配置文件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/module-configuration-file)中将orientation字段设置为follow_desktop（跟随桌面的旋转模式），详情可参考[为应用配置旋转策略](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-window-direction#section714419371037)。
+- 窗口沉浸式
+
+  根据UX设计，需实现不同窗口模式（全屏、分屏、悬浮窗、自由窗口）下的沉浸式效果，可参考[窗口沉浸式](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-window-immersive)。推荐开发者使用[实现沉浸式效果](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-window-immersive#section180431120426)中的组件级沉浸方案（组件设置页面沉浸），同时进行动态安全区避让，确保沉浸式显示效果。自由窗口模式下，使用[window.setWindowDecorVisible(false)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#setwindowdecorvisible11)隐藏标题栏，仅保留右上角三键，使应用页面延伸至标题栏区域，实现沉浸式显示效果。
+
+## 首页
+
+银行理财应用首页主要承担业务入口、消息公告、卡片内容和财富推荐的聚合展示。根据功能设计，应用首页相关内容划分为6个区域，效果图如下：
+
+| 横向断点 | sm | md | lg、xl |
+| --- | --- | --- | --- |
+| 首页 |  |  |  |
+
+**界面开发**
+
+具体介绍及实现方案如下表所示：
+
+| 区域编号 | 简介 | 实现方案 |
+| --- | --- | --- |
+| 1 | 底部Tabs | 使用[HdsTabs](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdstabs)实现，通过[barfloatingstyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdstabs#barfloatingstyle)属性为页签设置悬浮样式，确保移动端底部触达优先。 |
+| 2 | 顶部栏 | 展示城市、搜索和常用操作。结合组件的[layoutWeight](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-size#layoutweight)属性，实现左侧城市在不同断点下的自适应拉伸效果。小屏下搜索功能收敛为搜索图标，中大屏展开为搜索框；左右内边距随断点变化。 |
+| 3 | 主业务快捷区 | 使用[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)横向布局，通过监听不同断点的变化，动态调整左右内边距。sm、md断点下，图标和文字纵向排布，lg、xl断点下切换为横向排布。 |
+| 4 | 业务宫格区 | 使用网格容器[Grid](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid)实现。通过[columnsTemplate](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid#columnstemplate)属性，动态调整不同断点下的显示列数。 |
+| 5 | 消息卡片、银行卡信息、个人养老金 | 使用响应式布局的栅格系统（[GridRow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridrow)、[GridCol](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridcol)）实现。通过监听断点变化，实现响应式排列。横向sm断点下，三个卡片纵向堆叠；md断点下，消息卡片独占一行，银行卡信息和养老金卡片并排；lg断点以上，三个卡片同行均分排列。 |
+| 6 | 财富精选 | 使用响应式布局的栅格系统（[GridRow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridrow)、[GridCol](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridcol)）实现，断点变化时同步调整列表数量和右侧扩展内容，确保不同设备上的信息密度平衡。 |
+
+## 账户总览页
+
+账户总览页用于展示用户总资产、昨日收益概览，以及活期、投资、负债等资产模块的分区信息。根据功能设计，应用账户总览页相关内容划分为6个区域，效果图如下：
+
+| 横向断点 | sm | md | lg、xl |
+| --- | --- | --- | --- |
+| 账户总览页 |  |  |  |
+
+**界面开发**
+
+具体介绍及实现方案如下表所示：
+
+| 区域编号 | 简介 | 实现方案 |
+| --- | --- | --- |
+| 1 | 标题栏 | 通过[HdsNavDestination](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdsnavdestination)组件的[titleBar](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdsnavdestination#titlebar)属性，为标题栏设置沉浸样式与动态模糊样式。 |
+| 2 | 总览面板 | 整体采用挪移布局，使用响应式栅格系统（[GridRow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridrow)、[GridCol](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridcol)）实现两栏布局。通过columns属性定义不同断点下的栅格列数（可参考[GridRowOptions对象说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridrow#gridrowoptions对象说明)），并使用[span](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridcol#span)属性控制各区域在不同断点下的占比。 |
+| 3 | 产品推荐（个人养老金） | 使用[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)横向布局，通过监听不同断点的变化，动态调整左右内边距。 |
+| 4 | 活期存款 | - sm断点：使用[Column](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column)纵向堆叠显示。 - md断点：使用[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)横向排列，中间添加垂直分割线。 - lg及以上断点：使用[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)横向排列三个卡片，每个卡片使用[layoutWeight](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-size#layoutweight)属性均分宽度。 |
+| 5 | 投资（理财卡片、基金卡片） | 使用响应式布局的栅格系统（[GridRow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridrow)、[GridCol](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridcol)）实现。通过监听断点变化，实现响应式排列。  - sm断点：每个卡片占满整行。 - md及以上断点：两个卡片并排显示。 |
+| 6 | 负债 | - sm断点：纵向堆叠显示，包含剩余应还、未出账单、可用额度三个部分。 - md断点：使用[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)横向布局，剩余应还和未出账单作为一组，可用额度作为另一组，中间添加垂直分割线。 - lg及以上断点：使用[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)横向布局，可用额度和剩余应还信息并排显示，中间添加垂直分割线，布局更加丰富。 |
+
+## 理财详情页
+
+理财详情页用于展示理财产品的关键信息、交易时间线及产品亮点，并提供“关注/买入”的底部操作入口。根据功能设计，将应用首页相关内容划分为5个区域，效果图如下：
+
+| 横向断点 | sm | md | lg、xl |
+| --- | --- | --- | --- |
+| 理财详情页 |  |  |  |
+
+**界面开发**
+
+具体介绍及实现方案如下表所示：
+
+| 区域编号 | 简介 | 实现方案 |
+| --- | --- | --- |
+| 1 | 标题栏 | 在父组件[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)中分别实现返回按钮及标题文字。通过[Stack](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-stack)组件控制理财详情页组件的层级，确保标题栏始终显示在理财详情页的最上层。 |
+| 2 | 产品信息卡片 | 使用[Flex](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flex)布局和条件渲染。通过监听断点变化，动态调整内边距。   - sm断点：纵向排列产品元信息（产品代码、销售类型、公司名称）。 - md及以上断点：横向排列，中间添加分隔符。 |
+| 3 | 时间轴卡片 | 使用网格容器[Grid](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid)定义4列网格，比例固定，通过监听断点变化，动态调整内边距。通过[constraintSize](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-securitycomponent-attributes#constraintsize11)属性约束卡片最大宽度，避免在大屏上过度拉伸。 |
+| 4 | 产品亮点 | 使用响应式布局的栅格系统（[GridRow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridrow)、[GridCol](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridcol)）实现。通过监听断点变化，实现响应式排列。   - sm断点：每个卡片占满整行。 - md及以上断点：两个卡片并排显示。 |
+| 5 | 底部操作栏 | 在父组件[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)中分别实现关注按钮及购买按钮。使用[layoutWeight](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-size#layoutweight)属性控制不同断点下的布局权重。通过[Stack](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-stack)组件控制理财详情页组件的层级，确保底部操作栏始终显示在理财详情页的最下层。 |
+
+## 购买页
+
+购买页用于完成理财产品的申购确认，用户在此确认金额、选择付款方式并核对产品信息。根据功能设计，将应用首页相关内容划分为6个区域，效果图如下：
+
+| 横向断点 | sm | md | lg、xl |
+| --- | --- | --- | --- |
+| 购买页 |  |  |  |
+
+**界面开发**
+
+在sm断点下，使用[bindsheet](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sheet-transition#bindsheet)为组件绑定半模态页面，md及以上断点，使用[Navigation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation)实现双栏。具体实现方案如下表所示：
+
+| 区域编号 | 简介 | 实现方案 |
+| --- | --- | --- |
+| 1 | 标题栏 | 在父组件[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)中分别实现标题文字和关闭按钮，通过[justifycontent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row#justifycontent8)属性设置在水平方向均匀分配弹性元素。通过[Stack](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-stack)组件控制购买页组件的层级，确保标题栏始终显示在购买页的最上层。 |
+| 2 | 产品名称 | 使用[Text](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text)组件实现。 |
+| 3 | 购买金额卡片 | 使用[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)布局，左侧显示"购买金额"，右侧显示"交易规则"。  输入区域：使用[TextInput](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput)组件实现，通过[type](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#type)属性限制输入类型。  快捷金额按钮：使用[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)组件水平排列。 |
+| 4 | 支付方式卡片 | 使用[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)水平布局，左侧显示"支付方式"，右侧显示银行卡信息和下拉箭头。 |
+| 5 | 产品摘要信息 | 使用[Column](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column)组件垂直排列7个摘要项，使用space属性控制垂直边距。 |
+| 6 | 底部确认按钮 | 通过[Stack](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-stack)组件控制购买页组件的层级，确保底部确认按钮始终显示在购买页的最下层。 |
+
+#### 电脑端页面
+
+本章介绍如何基于现有移动端界面开发方案，实现代码逻辑与布局复用，高效完成电脑设备上银行理财应用的界面开发。
+
+## 首页
+
+银行理财应用首页主要承担业务入口、消息公告、卡片内容和财富推荐的聚合展示。根据功能设计，应用首页相关内容划分为6个区域，效果图如下：
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7/v3/CXRr9X3MRkGf8yVVp-Ufew/zh-cn_image_0000002610026103.png?HW-CC-KV=V1&HW-CC-Date=20260623T075612Z&HW-CC-Expire=86400&HW-CC-Sign=A992C7FBB7FCEABEC43C296C73E81778815228D44D6359624E93BFED7CAE4157 "点击放大")
+
+**界面开发**
+
+具体介绍及实现方案如下表所示：
+
+| 区域编号 | 简介 | 实现方案 |
+| --- | --- | --- |
+| 1 | 侧边栏 | 使用侧边栏容器[SideBarContainer](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-sidebarcontainer)实现。 |
+| 2 | 顶部栏 | 展示城市、搜索和常用操作。结合组件的[layoutWeight](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-size#layoutweight)属性，实现左侧城市在不同断点下的自适应拉伸效果。 |
+| 3 | 主业务快捷区 | 使用[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)横向布局，通过监听不同断点的变化，动态调整左右内边距。sm、md断点下，图标和文字纵向排布，lg、xl断点下切换为横向排布。 |
+| 4 | 业务宫格区 | 使用网格容器[Grid](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid)实现。通过[columnsTemplate](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid#columnstemplate)属性，动态调整不同断点下的显示列数。 |
+| 5 | 消息卡片、银行卡信息、个人养老金 | 使用响应式布局的栅格系统（[GridRow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridrow)、[GridCol](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridcol)）实现。消息卡片独占一行，银行卡信息和养老金卡片并排。 |
+| 6 | 财富精选 | 复用移动端设备布局方案，同移动端[首页](#section16469195751520)区域6的布局实现方案。 |
+
+## 账户总览页
+
+账户总览页用于展示用户总资产、昨日收益概览，及活期、投资、负债等资产模块的分区信息。根据功能设计，应用账户总览页相关内容划分为6个区域，效果图如下：
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c0/v3/DHTWM6UVT4mrRS5RpY0ZXQ/zh-cn_image_0000002579426308.png?HW-CC-KV=V1&HW-CC-Date=20260623T075612Z&HW-CC-Expire=86400&HW-CC-Sign=5890F753B0E3FC448CC6272CF847FFA4570F281CF71AFFF812EF6CF17EB407C6 "点击放大")
+
+**界面开发**
+
+具体介绍及实现方案如下表所示：
+
+| 区域编号 | 简介 | 实现方案 |
+| --- | --- | --- |
+| 1 | 标题栏 | 在父组件[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)中分别实现返回按钮及标题文字。通过[Stack](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-stack)组件控账户总览页组件的层级，确保标题栏始终显示在账户总览页的最上层。 |
+| 2 | 总览面板 | 复用移动端设备布局方案，同移动端[账户总览页](#section167145014310)对应区域的布局实现方案。 |
+| 3 | 产品推荐 |
+| 4 | 活期存款 |
+| 5 | 投资（理财卡片、基金卡片） |
+| 6 | 负债信息 |
+
+## 理财详情页页
+
+理财详情页用于展示单个理财产品的关键信息、交易时间线及产品亮点，并提供“关注/买入”的底部操作入口。根据功能设计，将应用首页相关内容划分为5个区域，效果图如下：
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1e/v3/LR4-DJHkTXKImk1vYWDCSg/zh-cn_image_0000002609946203.png?HW-CC-KV=V1&HW-CC-Date=20260623T075612Z&HW-CC-Expire=86400&HW-CC-Sign=FFEEFC2948A8C61E204372916D7EDFD4DA1F961ED6B76A5565AAABE367226C14 "点击放大")
+
+**界面开发**
+
+具体介绍及实现方案如下表所示：
+
+| 区域编号 | 简介 | 实现方案 |
+| --- | --- | --- |
+| 1 | 标题栏 | 在父组件[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)中分别实现返回按钮及标题文字。 |
+| 2 | 产品信息卡片 | 复用移动端设备布局方案，同移动端[理财详情页](#section5658124155610)对应区域的布局实现方案。 |
+| 3 | 时间轴卡片 |
+| 4 | 产品亮点 |
+| 5 | 底部操作栏 | 在父组件[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)中分别实现关注按钮及购买按钮。购买按钮使用固定宽度，通过[justifycontent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row#justifycontent8)属性设置在水平方向尾部对齐。 |
+
+## 购买页
+
+购买页用于完成理财产品的申购确认，用户在此确认金额、选择付款方式并核对产品信息。根据功能设计，将应用首页相关内容划分为6个区域，效果图如下：
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d6/v3/QKf41QiZRB6jL2X4fZWByQ/zh-cn_image_0000002579586218.png?HW-CC-KV=V1&HW-CC-Date=20260623T075612Z&HW-CC-Expire=86400&HW-CC-Sign=52295A90866D00EA9816A7DF0B58BA5D4BCF461814056D039333497E6D9112B2 "点击放大")
+
+**界面开发**
+
+具体介绍及实现方案如下表所示：
+
+| 区域编号 | 简介 | 实现方案 |
+| --- | --- | --- |
+| 1 | 标题栏 | 复用移动端设备布局方案，同移动端[购买页](#section4568142153710)对应区域的布局实现方案。 |
+| 2 | 产品名称 |
+| 3 | 购买金额卡片 |
+| 4 | 支付方式卡片 |
+| 5 | 产品摘要信息 |
+| 6 | 底部确认按钮 |
+
+#### 示例代码
+
+[多设备银行理财界面](https://gitcode.com/HarmonyOS_Samples/MultiFinancialManagement)

package/data/docs/multi-news-read.md

@@ -0,0 +1,286 @@
+# 多设备新闻阅读界面
+
+> 来源: https://developer.huawei.com/consumer/cn/doc/best-practices/multi-news-read
+> 文档标识(fileName): multi-news-read  
+> 目录(catalogName): best-practices  
+> 语言: cn  
+> 更新时间: 2026-06-23 03:38:04  
+> 导航地址: /hmos/hmos-dp1
+
+---
+#### 概述
+
+本文以新闻阅读应用作为典型案例详细介绍“一多”在实际开发中的应用。新闻阅读应用在大屏幕设备的使用过程中，不仅要保障用户在界面浏览中的正常使用，也要尽可能提升屏幕的交互效率。该示例主要界面包含首页推荐、热门新闻、新闻详情、刷新闻、精选发现等。
+
+新闻阅读一多开发过程中涉及的相关能力包括：
+
+- 挪移布局
+- 延伸布局
+- 重复布局
+- 列表变瀑布流
+- 列表变宫格
+- 全屏新闻变瀑布流
+- 边看边评
+- 沉浸浏览
+- 文字大小调节
+
+下面的章节将分别从[UX设计](#section1719610101057)、[架构设计](#section119741723356)、[页面开发](#section1180220717819)三个角度给出推荐的参考样例，介绍“一多”新闻阅读应用在开发过程中的最佳实践。
+
+![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/23/v3/T7wBTsiyRsm6MapakNo3AQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260623T075613Z&HW-CC-Expire=86400&HW-CC-Sign=AB9F8625504E32E5EEED022A22C5CC75E599EE9941AC4743243796B7EFEC366D) 
+
+阅读本文前，开发者需熟悉[ArkUI（方舟UI框架）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui)和页面开发的“一多”能力（参考[一次开发，多端部署概览](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-overview)）。下文将详细介绍它们在“一多”开发实践中如何使用。
+
+#### UX设计
+
+新闻阅读类的多设备响应式设计指南，[点击访问](https://developer.huawei.com/consumer/cn/doc/design-guides/responsive-design-examples4-0000001746657290)。
+
+#### 架构设计
+
+HarmonyOS的分层架构包括产品定制层、基础特性层和公共能力层，为开发者提供了一个清晰、高效、可扩展的设计架构。更多详细信息，请参考[分层架构设计](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-layered-architecture-design)的逻辑设计。
+
+#### 页面开发
+
+本章介绍新闻阅读应用中如何使用“一多”布局能力，完成页面层级的多端适配。下文将从不同页面介绍具体布局能力，帮助开发者从零开始开发新闻阅读应用。
+
+## 首页推荐
+
+新闻阅读应用首页主要推荐精选新闻，解决用户看新闻的需求。首页内容围绕这一功能设计。观察首页在多设备上的UX设计图，可以进行如下设计：
+
+- 将首页划分为9个部分，效果图如下：
+
+|  | sm | md | lg |
+| --- | --- | --- | --- |
+| 效果图 |  |  |  |
+
+实现方案如下表：
+
+| 区域编号 | 简介 | 实现方案 |
+| --- | --- | --- |
+| 1 | 底部/侧边页签 | 借助[栅格布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1061332817545)监听断点变化改变位置。 |
+| 2 | 顶部页签及搜索框 | 使用[栅格布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1061332817545)监听断点变化实现折行显示，[List](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list)实现延伸布局，layoutWeight实现拉伸能力。 |
+| 3 | [顶部文字要闻](#li42441859453) | 使用[List](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list)的lanes属性，在不同断点下呈1、2、3列显示。 |
+| 4 | [新闻大图卡片](#li1441844512434) | 使用[Swiper](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-swiper)，指定displayCount属性实现延伸布局，设置aspectRatio属性实现缩放能力。 |
+| 5 | [上文下图](#li894391114417) | 采用[重复布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1653271133613)，在手机、折叠屏上保持原有布局，在PC/2in1及更宽的设备上重复布局。 |
+| 6 | [左文右图](#li431911954516) | 采用[重复布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1653271133613)，手机上的单列信息，在折叠屏和PC/2in1上重复布局。 |
+| 7 | [竖向视频卡片](#li651243310458) | 采用[重复布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1653271133613)，手机上的左图右文卡片，在折叠屏和PC/2in1上显示更多列该卡片内容。 |
+| 8 | [大视频类新闻](#li917373419216) | 采用[重复布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1653271133613)，手机上单列展示，在折叠屏和PC/2in1上重复布局。 |
+| 9 | [横向滑动小视频](#li1924317507257) | 采用[延伸能力](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-adaptive-layout#延伸能力)，使得设备尺寸变宽时，更多的小视频卡片被展示到界面。 |
+
+- 顶部文字要闻
+
+使用List组件，设置不同断点下的lanes属性来实现。在sm断点下设置为1，在md断点下设置为2，在lg断点下设置为3。实现不同屏幕尺寸显示更多列数。
+
+| 示意图 | sm | md | lg |
+| --- | --- | --- | --- |
+| 效果图 |  |  |  |
+
+- 新闻大图卡片
+
+使用Swiper组件，设置在不同断点下的displayCount属性来实现自适应布局延伸布局，新闻大图卡片在sm断点下设置为1，在md断点下设置为2，在lg断点下设置为3。实现在不同屏幕尺寸显示更多内容。
+
+| 示意图 | sm | md | l |
+| --- | --- | --- | --- |
+| 效果图 |  |  |  |
+
+- 上文下图
+
+使用重复布局配合栅格布局控制不同设备上的内容列数。在sm和md断点下，设置GridCol的span属性为12；在lg断点下，设置GridCol的span属性为6。同时，使用onBreakpointChange函数控制不同设备尺寸上的显示数据数量。在sm和md断点下，渲染数据源包含一条数据；在lg断点下，渲染数据源包含两条数据。
+
+| 示意图 | sm | md | lg |
+| --- | --- | --- | --- |
+| 设计能力点 |  | | |
+| 效果图 |  |  |  |
+
+```
+// src/main/ets/pages/MediaNews.ets
+build() {
+  Column() {
+    Header()
+    GridRow({
+      gutter: $r("app.float.grid_gutter_bigger")
+    }) {
+      ForEach(this.newsList, (news: News) => {
+        GridCol({
+          span: {
+            sm: Constants.GRID_COL_SPAN[5],
+            lg: Constants.GRID_COL_SPAN[4]
+          }
+        }) {
+          NewsWithThreeImages({ news })
+        }
+      }, (news: News) => news.getNewsID())
+    }
+    .onBreakpointChange((breakPoints: string) => {
+      // Return the number of rendered data records based on the breakpoint situation
+      this.newsList = this.multiImageViewModel.getNewsListByBreakpoint(breakPoints);
+    })
+    .width(Constants.CONTENT_WIDTH)
+  }
+  .width(Constants.FULL_WIDTH)
+  .justifyContent(FlexAlign.Center)
+}
+```
+
+- 左文右图
+
+使用栅格布局，配合断点控制列数：在sm尺寸下设置GridCol的span属性为12，在md及以上尺寸设置为6。同时，使用Text组件的visibility属性配合断点控制摘要部分的显隐：在sm和md断点下设置摘要部分Text组件的visibility为Visibility.Hidden，在lg及以上断点设置为Visibility.Visible。
+
+示意图如下：
+
+| 示意图 | sm | md | lg |
+| --- | --- | --- | --- |
+| 设计能力点 |  | | |
+| 效果图 |  |  |  |
+
+```
+build() {
+  Column() {
+    Header()
+    GridRow({
+      columns: 12,
+      gutter: {
+        x: { md: Constants.GRID_HORIZONTAL_GUTTER[0], lg: Constants.GRID_HORIZONTAL_GUTTER[1] },
+        y: { sm: Constants.GRID_VERTICAL_GUTTER[0], md: Constants.GRID_VERTICAL_GUTTER[1] }
+      }
+    }) {
+      ForEach(this.newsList, (news: News) => {
+        GridCol({
+          span: {
+            sm: Constants.GRID_COL_SPAN[5],
+            md: Constants.GRID_COL_SPAN[4]
+          }
+        }) {
+          LeftTextRightImageBgWhite({ news })
+        }
+      }, (news: News) => news.getNewsID())
+    }
+    .onBreakpointChange((breakPoints: string) => {
+      this.newsList = this.imageAndTextViewModel.getNewsListByBreakpoint(breakPoints);
+    })
+    .width(Constants.CONTENT_WIDTH)
+  }
+  .width(Constants.FULL_WIDTH)
+  .justifyContent(FlexAlign.Center)
+}
+```
+
+- 竖向视频卡片
+
+采用重复布局，在sm断点下设置GridCol内容占用span为12。在md断点下设置GridCol内容占用span为6。在lg断点下设置GridCol内容占用span为4。同时使用GridRow的onBreakpointChange回调函数控制渲染的数据条数，使其在sm、md、lg断点下分别渲染1、2、3条数据。
+
+| 示意图 | sm | md | lg |
+| --- | --- | --- | --- |
+| 设计能力点 |  | | |
+| 效果图 |  |  |  |
+
+- 大视频类新闻
+
+使用栅格布局配合断点控制显示列数与数据源数量。在sm断点下设置GridCol的span属性为12，返回渲染数据源个数为1个，在md断点下设置span为6，渲染数据源为2个，在lg断点下设置span为4，渲染数据源为3个。
+
+| 示意图 | sm | md | lg |
+| --- | --- | --- | --- |
+| 设计能力点 |  | | |
+| 效果图 |  |  |  |
+
+- 横向滑动小视频
+
+使用Scroll与Row组件实现延伸布局，随着屏幕尺寸的增加，展示更多的小视频数量，延伸布局可参考：[延伸能力](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-adaptive-layout#延伸能力)。
+
+| 示意图 | sm | md | lg |
+| --- | --- | --- | --- |
+| 效果图 |  |  |  |
+
+## 热门新闻
+
+热门页提供不同设备的浏览体验。观察UX设计图，进行如下设计：
+
+- 将热门新闻页划分为3个部分，如图所示：
+
+| 示意图 | sm | md | lg |
+| --- | --- | --- | --- |
+| 效果图 |  |  |  |
+
+实现方案如下表：
+
+| 区域编号 | 简介 | 实现方案 |
+| --- | --- | --- |
+| 1 | 底部/侧边页签 | 借助[栅格布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1061332817545)监听断点变化改变位置。 |
+| 2 | 顶部页签及搜索框 | [栅格布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1061332817545)监听断点变化实现折行显示，[List](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list)实现延伸布局，layoutWeight实现拉伸能力。 |
+| 3 | [新闻列表](#li814217391355) | 借助断点监听改变不同断点下的布局方式，在sm断点及sm以下使用[List](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list)，在sm断点以上使用[栅格布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1061332817545)。 |
+
+- 新闻列表
+
+为了实现列表与宫格的灵活切换，可以使用List组件在sm及以下断点时展示内容，而使用栅格布局在sm断点以上展示。在md断点下设置GridRow的columns属性为2，在lg断点下设置columns属性为4。对于需要更大空间的组件内容，设置GridCol的span属性以占用更多份数。
+
+```
+Column() {
+  if (this.curBp === 'sm') {
+    List({
+      space: Constants.LIST_GUTTER
+    }) {
+      // ...
+    }
+    .width(Constants.CONTENT_WIDTH)
+  } else {
+    GridRow({
+      columns: {
+        md: Constants.GRID_ROW_COLUMNS[1],
+        lg: Constants.GRID_ROW_COLUMNS[2]
+      },
+      gutter: $r("app.float.news_list_common_space")
+    }) {
+      // ...
+    }
+    // ...
+  }
+}
+```
+
+## 新闻详情
+
+新闻详情页提供详细新闻信息。观察不同设备上的UX设计图，进行如下设计：
+
+- 提供边看边评功能
+
+| 示意图 | sm | md | lg |
+| --- | --- | --- | --- |
+| 设计能力点 |  | | |
+| 效果图 |  |  |  |
+
+如下表所示，实现方案：
+
+| 区域编号 | 简介 | 实现方案 |
+| --- | --- | --- |
+| 1 | 顶部栏 | 使用自适应布局中的[拉伸能力](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-adaptive-layout#拉伸能力)，可使用Blank组件实现屏幕宽度变化时，中间空白内容随设备尺寸变化。 |
+| 2 | 新闻标题及发布信息 | 使用[占比能力](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-adaptive-layout#占比能力)保证多设备尺寸下的界面一致。 |
+| 3 | 新闻内容 | 使用[占比能力](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-adaptive-layout#占比能力)保证多设备尺寸下的界面一致。 |
+| 4 | 评论区 | 采用[挪移布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1153210192360)，当设备尺寸变宽时将新闻内容区域和评论区左右布局。 |
+| 5 | 底部工具栏 | 使用[自适应布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-adaptive-layout)中的均分能力，实现设备尺寸变化时图标尺寸不变，图标间距及左右边缘间距均等改变。 |
+
+边看边评实现上可以利用[栅格布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1061332817545)实现[挪移布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1153210192360)，在sm断点下设置GridCol对应内容span为12，而在sm以上断点设置对应内容占用span为6，自动实现从新闻内容和评论区的上下布局切换到左右布局。
+
+## 刷新闻
+
+刷新闻界面向用户提供新闻流列表。观察不同设备上的UX设计图，进行如下设计：
+
+- 全屏新闻变瀑布流
+
+  | 示意图 | sm | md | lg |
+  | --- | --- | --- | --- |
+  | 效果图 |  |  |  |
+
+在刷新闻界面中，开发者可以使用[WaterFlow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-waterflow)容器，实现一列到多列的切换。在sm断点下依赖断点控制设置WaterFlow的columnsTemplate属性为1，在md断点下设置columnsTemplate为2，在lg断点下设置columnsTemplate为3。
+
+## 精选发现
+
+- 瀑布流一列变多列
+
+| 示意图 | sm | md | lg |
+| --- | --- | --- | --- |
+| 效果图 |  |  |  |
+
+精选发现界面使用瀑布流一列变多列，主要使用[WaterFlow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-waterflow)容器实现不同设备的差异化显示。在sm断点下一列显示，在md断点下依赖断点控制设置WaterFlow的columnsTemplate为两列，在lg断点下设置columnsTemplate为三列。
+
+#### 示例代码
+
+- [多设备新闻阅读界面](https://gitcode.com/harmonyos_samples/multi-news-read)