【鸿蒙实战开发】一多开发实例（股票类）

往期推文全新看点

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
• 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
• 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
• 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
• 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
• 记录一场鸿蒙开发岗位面试经历~
• 持续更新中……

概述

本文从目前流行的垂类市场中，选择股票类应用作为典型案例，详细介绍 “一多 在实际开发中的应用。主要包含首页、资讯、自选股、个股详情、行情等9个典型页面。

• 核心功能：

分栏布局：分栏布局通过 Navigation 实现，在断点为lg时设置mode属性为NavigationMode.Stack，实现单栏效果，在其他断点下设置mode属性为NavigationMode.Split，实现分栏效果。

宫格卡片 的多股同列：用网格布局 Grid组件 ，在不同断点下将父组件分为不同列数，来实现自适应布局的占比能力。

• 关键场景：

首页-股票页签：借助 栅格布局 监听断点变化，同时设置layoutWeight属性为1，实现居中对齐自适应拉伸。

股票PK详情-核心指标：使用 Blank组件 及设置固定宽度可实现数据各列的空白空间自适应拉伸，同时对不同列设置不同的alignItems，支持不同列设置不同对齐方式。

行情-股票双页签：借助 栅格布局 监听断点变化，改变 List组件 下子组件的间隔宽度，同时给List组件设置固定宽度，当List组件下的tab内容超过设定宽度时隐藏部分tab，延伸显示更多。

下面的章节将分别从、 架构设计 、 页面开发 三个角度给出推荐的参考样例，介绍“一多”股票类应用在开发过程中的最佳实践。

架构设计

HarmonyOS的分层架构主要包括三个层次：产品定制层、基础特性层和公共能力层，为开发者构建了一个清晰、高效、可扩展的设计架构。

页面开发

本章介绍股票类应用中如何使用”一多”的布局能力，完成页面层级的一套页面、多端适配。下文将从不同页面展开，介绍每个页面区域使用到具体的布局能力，帮助开发者从零到一进行股票类应用的开发。

首页

• 将首页划分为7个部分，效果图如下：

示意图	sm	md	lg
效果图

• 对其中的各个区域分析使用的一多能力，实现方案如下表：

区域编号	简介	实现方案
1	底部/侧边页签	借助 栅格布局 监听断点变化改变位置，设置在不同断点下Tabs组件的vertical属性，实现显示在页面的不同位置。
2	标题	List组件 实现延伸能力，layoutWeight实现拉伸能力。
3	快捷入口	List组件 实现延伸能力
4	Banner	使用 Swiper组件，设置在不同断点下的displayCount属性来实现自适应布局的延伸能力。
5	中间tab	借助 栅格布局 监听断点变化，同时设置layoutWeight属性为1，实现居中对齐自适应拉伸，示例代码为：股票页签。
6	指数	使用 Swiper组件 自适应增加个数，代码可参考 一多开发实例（长视频）。
7	热门	通过 Swiper组件的displayCount属性并结合断点，控制在不同断点下显示不同的列数