HarmonyOS 鸿蒙开辟——响应式布局
响应式布局当基本的自顺应布局无法满足多终端上屏幕的体验要求时，我们必要针对差异终端的屏幕特点，设定容器与栅格的关系到达响应式的布局。通常响应式布局能根据栅格断点变化进行有级变化。
栅格断点系统
根据设备的水平宽度，OpenHarmony提供了断点系统，覆盖超小、小、中、大 四种屏幕范例，并联合栅格系统默认提供了对应 Column 的数量关系。差异的设备根据自身屏幕水平宽度，在差异的断点范围，系统将主动匹配差异数量的栅格。应用也可针对具体界面自定义栅格。
https://img-blog.csdnimg.cn/img_convert/1e922cb14284de89c1ab8c424bc0e9c5.webp?x-oss-process=image/format,png
栅格断点系统与一样平常利用的设备屏幕范例有一定的对应关系，例如：超小对应智能穿戴设备，小对应默认设备，中对应平板，大对应聪明屏与PC。设计师可面向希望运行的设备进行所属屏幕范例的适配。
随着智能设备种类的增长，越来越多产物在四种屏幕范例上具备差异的交互本事，如支持触摸的活动相机（小）、仅支持遥杆的手持云台（小-中）、不可移动的智能台灯（中-大）等，需联合具体设备交互进行对应设计，不可一概而论。
缩进布局
为了在宽屏上内容显示有更好的效果，在差异宽度的设备上进行差异缩进效果。
https://img-blog.csdnimg.cn/direct/60a0d353be3e456cb6133729c440d257.png
缩进适用于，因宽度明显变大，内容拉伸以后导致屏幕空缺内容超过50%，或文本内容过长（每行大于30字），但没有上下级界面可供同时展示或上下级界面不适合同时显示的场景。
OpenHarmony提供的默认实现为，当栅格为8column或12column时可以响应6column和8column的缩进布局。
挪移布局
利用屏幕的宽度优势，将原先的上下布局切换成左右布局。
例如，上下排布的插画和文字，横屏后左右排布。
https://img-blog.csdnimg.cn/direct/2c1adf6a8d544348bf22f478c6d6b3a1.png
挪移布局适用于横竖屏切换，以及类似的宽高比明显变化（大于200%）同时希望包管内容完备的场景。
重复布局
利用屏幕的宽度优势，将相同属性的组件横向并列排布。
https://img-blog.csdnimg.cn/direct/7a8cd3bde3c4418cada386b470622b95.png
重复布局适用于对宽高比敏感的图片和及组合内容，当内容缩放以后导致原图放大超过150%的场景。
OpenHarmony栅格系统提供的分栏实现为，当栅格为8column或12column时可以将默认4栅格的页面整体进行重复布局。
响应式布局对应OpenHarmony系统提供的布局本事中的栅格断点系统和媒体查询，详见本文 “响应式布局”。
最后分享一份鸿蒙（HarmonyOS）开辟学习指南必要的可以扫码免费领取！！！
https://img-blog.csdnimg.cn/img_convert/c39ad8083a93f04c927207d34b4e943c.png 《鸿蒙（HarmonyOS）开辟学习指南》
第一章 快速入门
1、开辟准备
2、构建第一个ArkTS应用（Stage模型）
3、构建第一个ArkTS应用（FA模型）
4、构建第一个JS应用（FA模型）
5、…
https://img-blog.csdnimg.cn/img_convert/de7f75b5927a38379877a1a18f5b57b8.png
第二章 开辟根本知识
1、应用步伐包根本知识
2、应用配置文件（Stage模型）
3、应用配置文件概述（FA模型）
4、…
https://img-blog.csdnimg.cn/img_convert/0b2427b1fa22661e5a433d44b8dd6fa4.png
第三章 资源分类与访问
1、 资源分类与访问
2、 创建资源目次和资源文件
3、 资源访问
4、…
https://img-blog.csdnimg.cn/img_convert/30d0c7f650213330448e7dcfca35e43f.png
第四章 学习ArkTs语言
1、初识ArkTS语言
2、基本语法
3、状态管理
4、其他状态管理
5、渲染控制
6、…
https://img-blog.csdnimg.cn/img_convert/ea69a731eb2124f84230ac191789798c.png
第五章 UI开辟
1.方舟开辟框架（ArkUI）概述
2.基于ArkTS声明式开辟范式
3.兼容JS的类Web开辟范式
4…
https://img-blog.csdnimg.cn/img_convert/272d51d930e34246718c80c0748a8975.png
第六章 Web开辟
1.Web组件概述
2.利用Web组件加载页面
3.设置基本属性和事件
4.在应用中利用前端页面JavaScript
5.ArkTS语言根本类库概述
6.并发
7…
https://img-blog.csdnimg.cn/img_convert/f10e1e2f8969c21cd57e65a8d9ae02fb.png
11.网络与连接
12.电话服务
13.数据管理
14.文件管理
15.配景任务管理
16.设备管理
17…
https://img-blog.csdnimg.cn/img_convert/b5644efdc093c0c10524840a03a3c1fe.png
第七章 应用模型
1.应用模型概述
2.Stage模型开辟指导
3.FA模型开辟指导
4…
https://img-blog.csdnimg.cn/img_convert/e5be07ce9705f10c9a0113ba607c0891.png
扫描下方二维码免费领取，《鸿蒙（HarmonyOS）开辟学习指南》
https://img-blog.csdnimg.cn/img_convert/c39ad8083a93f04c927207d34b4e943c.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]