往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）
应用市场首页
本文将以应用市场首页为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。
页面设计
一个典型的应用市场首页的UX设计如下所示。
| sm | md | lg |
|---|---|---|
|
|
|
|
观察应用市场首页的页面设计，不同断点下的页面设计有较多相似的地方。
据此，我们可以将页面分拆为多个组成部分。
-
底部/侧边导航栏
-
标题栏与搜索栏
-
运营横幅
-
快捷入口
-
精品应用
| sm | md | lg |
|---|---|---|
|
|
|
|
接下来我们逐一分析各部分的实现。
底部/侧边导航栏
在sm和md断点下，导航栏在底部；在lg断点下，导航栏在左侧。可以通过Tab组件的barPosition和vertical属性控制TabBar的位置，同时还可以通过barWidth和barHeight属性控制TabBar的尺寸。
另外在sm及lg断点下，TabBar中各个Item的图标和文字是按照垂直方向排布的，在md断点下，TabBar中各个Item的图标和文字是按照水平方向排布的。
标题栏与搜索栏
标题栏和搜索栏，在sm和md断点下分两行显示，在lg断点下单行显示，可以通过栅格实现。在sm和md断点下，标题栏和搜索栏占满12列，此时会自动换行显示。在lg断点下，标题栏占8列而搜索栏占4列，此时标题栏和搜索栏在同一行中显示。
| sm/md | lg | |
|---|---|---|
| 效果图 |
|
|
| 栅格布局图 |
|
|
运营横幅
不同断点下的运营横幅，sm断点下显示一张图片，md断点下显示两张图片，lg断点下显示三张图片。
快捷入口
在不同的断点下，快捷入口的5个图标始终均匀排布，这是典型的均分能力使用场景。图标资源文件获取。
精品应用
随着可用显示区域的增加，精品应用中显示的图标数量也不断增加，这是典型的延伸能力使用场景。精品游戏的实现与精品应用类似，不再展开分析。
运行效果
将上述各页面主要部分组合在一起后，即可完成整体页面开发。
本页面的实际运行效果如下图所示。
| sm | md | lg |
|---|---|---|
|
|
|
|
原文作者：懂你的大海；如有侵权，请联系管理员删除。
最新文章
- 鸿蒙 Flutter 开发：分布式协同与跨设备数据互通实战
- Vastbase数据库：企业级分布式数据管理实战解析
- 【HarmonyOS 7开发者前瞻】12 HarmonyOS 7 API 26 验证问题记录指南：环境、日志与回归清单
- Flutter在OpenHarmony上实现幸运大转盘交互功能
- SpringBoot 超详细全解（入门 + 实战 + 原理 + 面试）
- （Harmony南向开发） LiteOS-M 内核裁剪
- 【HarmonyOS】鸿蒙使用仓颉编程入门
- OpenHarmony源码分析之分布式软总线：trans_service模块(4)/TCP会话管理
- 鸿蒙开发5.0案例分析：一多开发实例（音乐）
- HarmonyOS Next 自定义计时器组件详解
