一、概述

本篇我们熟悉响应式布局、栅格、断点，来实现页面设计。我们先了解相关概念：

二、响应式布局

响应式布局，可以在不同设备、不同屏幕尺寸上，良好的像是布局内容，也可以根据不同设备和屏幕尺寸灵活调整。我们用官网给出的两个示意图来看一下效果：

下面我们看看响应式布局的四种能力：

• 断点：将窗口宽度划分为不同的范围（即断点），监听窗口尺寸变化，当断点改变时同步调整页面布局。
• 媒体查询：媒体查询支持监听窗口宽度、横竖屏、深浅色、设备类型等多种媒体特征，当媒体特征发生改变时同步调整页面布局。
• 栅格：栅格组件将其所在的区域划分为有规律的多列，通过调整不同断点下的栅格组件的参数以及其子组件占据的列数等，实现不同的布局效果。
• 响应式组件：HarmonyOS提供的一些组件支持响应式布局，例如： Tabs、Swiper、Grid、List、GridRow，通过断点设置可以实现不同的展示效果。

三、断点

响应式布局中最常使用的特征是窗口宽度及窗口高宽比，可以将窗口宽度及窗口高宽比划分为不同的范围，称之为“断点”。

断点的设计原理

• 原则一：两个宽度相近的窗口，页面布局相同，断点归一。
• 原则二：高度相对宽度较小的窗口，呈现横向窗口或类方形窗口时，页面布局进行差异化设计，增加断点。

因此，系统设计了横向和纵向断点分别代表窗口的不同特征，作为判断页面布局和交互体验的条件：

• 横向断点以窗口宽度值区分，代表窗口宽度。
• 纵向断点以窗口高宽比区分，代表窗口相对高度，表示横向、方形或纵向窗口。

断点的定义

断点定义，我们上篇也已经说明，官方给了如下两种断点定义方式。

官方也给我们定义的HarmonyOS常用设备断点区间表：

区间说明：

1. 断点面向窗口而非设备类型，相同断点区间的窗口展示相同的页面布局。同一设备上的不同窗口形态（例如全屏显示、分屏显示、自由窗口等）可能落入不同的断点区间，展示不同布局。
2. 部分手机、小折叠屏机型横屏时横向断点会落入lg，包括Pura70 Pro和Pocket2。
3. 开发者可以根据实际使用场景决定适配哪些断点。如xs断点对应的一般是智能穿戴类设备，如果确定某页面不会在智能穿戴设备上显示，则可以不适配xs断点。
4. 可以根据实际业务场景需要在lg断点后面新增xl、xxl等断点。

通过断点刷新UI

1. 获取当前串口横向断点，这里我们根据屏幕宽度，判断断点名称，并存储在AppStorage以同步刷新UI布局。
   

2. 通过“windowSizeChange”，实时检测窗口尺寸大小变化。
   
   3.获取本地保存的断点。

通过断点，实现一个导航栏的案例

需求
1、sm/md：导航栏再底部
2、lg:导航栏在左侧

根据需求，我们整理一个“BreakPointType”工具类：

导航栏实现

效果如下：

四、栅格

断点介绍完了，我们学习一下响应式布局的另一个能力，栅格，官网中对栅格的定义是：一种用于页面布局的二位网格结构，是多场景下通用的腐竹定位工具。它将页面水平划分为等宽的列，通过设置内容与占据的列数，来实现灵活布局。

栅格的设计和特性

HarmonyOS的栅格系统采用了12列设计，因为12可以被2、3、4、6整除，提供了更灵活的布局可能性。栅格布局主要优势包括：

• 提供可循的规律：提供规律的结构，解决多尺寸设备动态布局问题。等宽的列数和行数，可以方便的对页面元素进行定位和排版。
• 统一的定位标注：统一的定位标注，保证不同设备上，各模块的布局一致性。可减少设计和开发复杂性，提高工作效率。
• 灵活的间距调整方法：灵活调整间距，满足布局调整需求，通过调节列与列行与行之间的距离，控制页面排版效果。
• 自动换行和自适应：当页面超出一行或者一列的容量时，可以自动换到下一行或下一列，且在不同设备自适应排版，更灵活和适应性强。
  栅格图示如下：

栅格的属性和相关计算

栅格样式由Margin、Gutter、Columns三个属性决定

• Margin是相对应窗口、父容器的左右边缘的距离，据定了内容可展示的整体宽度。
• Gutter是相邻的两个Column之间的距离，决定了内容之间的紧密关系。
• Columns是栅格中的列数，其数值决定内容的布局复杂度。

注： 单个Column的宽度，是结合Margin、Gutter和Columns自动计算的，不需要开发者手动配置。

以竖屏手机的栅格宽度计算为例：
屏幕宽度：360vp
Margin： 24vp
Gutter： 24vp
栅格数： 4个（含3个Gutter）
计算公式如下：
1个栅格的宽度 = (屏幕宽度 - Margin x 2 - Gutter x 3)/4 = (360 - 24 x 2 - 24 x 3)/4 = 60(vp)
2个栅格的宽度 = 1个栅格的宽度 + Gutter + 1个栅格的宽度 = 60 + 24 + 60 = 144(vp)
3个栅格的宽度 = 2个栅格的宽度 + Gutter + 1个栅格的宽度 = 144 + 24 + 60 = 228(vp)
4个栅格的宽度 = 3个栅格的宽度 + Gutter + 1个栅格的宽度 = 228 + 24 + 60 = 312(vp)

综合权衡各类设备的屏幕特征，基于 8vp 为网格的基本单位可以对界面上元素的大小、位置、对齐方式进行更好的规划，构建更有层次感、秩序感，以及多设备上一致的布局效果。一些更小的控件（例如图标）大小也可以对齐 4vp 的网格大小。栅格化布局中的Margin和Gutter的值参考8vp/4vp网格系统设置。如，手机设备上的栅格化设计，基础栅格Margin为24vp，等于3个8vp的宽度；卡片栅格Margin为12vp，等于一个8vp加上一个4vp的宽度。
各类设备的栅格数、Margin、Gutter的参数，如下表所示：

栅格布局、栅格组件

栅格布局就是栅格结合了断点，实现栅格布局能力的组件叫栅格组件。在实际使用场景中，可以根据需要配置不同断点下栅格组件中元素占据的列数，同时也可以调整Margin、Gutter、Columns的取值，从而实现不同的布局效果。

说明
ArkUI在API 9对栅格组件做了重构，推出了新的栅格组件GridRow和GridCol，同时原有的GridContainer组件及栅格设置已经废弃。
本文中提到的栅格组件，如无特别说明，都是指GridRow和GridCol组件。

本篇我们学习了响应式布局下的断点、栅格，下篇我们用栅格结合断点，做一个简单的登录页面。

特别声明：内容总结来源华为开发者联盟官网，仅记录总结学习，如有侵权或不对之处，还请告知，定当删除或改正！！！