HarmonyOS项目开发一多简介

目录

一、布局能力概述

二、自适应布局

三、响应式布局

四、典型布局场景

---

一、布局能力概述

1. 布局决定页面元素排布及显示：在页面设计及开发中，布局能力至关重要，主要通过组件结构来确定使用何种布局。

2. 自适应布局与响应式布局：

   • 自适应布局：当外部容器大小变化时，元素根据相对关系自动变化以适应容器变化，有七种自适应布局能力，常与特定容器类组件搭配使用，多用于解决页面各区域内的布局差异。

   • 响应式布局：当外部容器大小变化时，元素根据断点、栅格或特定特征自动变化以适应容器变化，有三种响应式布局能力，常与特定组件搭配使用，多用于解决页面各区域间的布局差异。

二、自适应布局

1. 七种自适应布局能力：

   • 自适应拉伸：通过 Flex 布局的 flexGrow 和 flexShrink 属性实现，将多余或不足的空间分配给特定区域。

   • 均分能力：通过将 Row、Column 或 Flex 组件的 justifyContent 属性设置为 FlexAlign.SpaceEvenly，实现空间均匀分配给容器内所有空白区域。

   • 自适应缩放：有两种实现方式，一是将子组件的宽高设置为父组件宽高的百分比，二是通过 layoutWeight 属性配置互为兄弟关系的组件在父容器主轴方向的布局权重，但该属性存在使用限制。

   • 缩放能力：通过使用百分比布局配合固定宽高比（aspectRatio 属性）实现，当容器尺寸变化时，内容自适应调整且宽高比不变。

   • 自适应延伸：有两种实现方式，通过 List 组件或 Scroll 组件配合 Row/Column 组件实现，根据显示区域尺寸显示不同数量的元素。

   • 隐藏能力：通过设置布局优先级（displayPriority 属性）控制显隐，当布局主轴方向剩余尺寸不足以满足全部元素时，按照优先级从小到大依次隐藏。

   • 自适应折行：通过将 Flex 组件的 wrap 属性设置为 FlexWrap.Wrap 实现，当布局方向尺寸不足以显示完整内容时自动换行。

三、响应式布局

1. 简介：当窗口尺寸变化较大时，仅靠自适应布局可能出现问题，此时需要响应式布局调整页面结构。响应式布局根据特定特征（如窗口宽度）自动变化以适应外部容器变化，主要通过断点、媒体查询和栅格布局实现。

2. 断点：

   • 定义：将窗口宽度划分为不同范围（断点），在不同断点下可实现不同的页面布局效果。

   • 监听方法：通过获取窗口对象并监听窗口尺寸变化、通过媒体查询监听应用窗口尺寸变化、借助栅格组件能力监听不同断点的变化等方法来判断当前所处断点。

3. 媒体查询：可以监听应用显示区域变化、横竖屏、深浅色、设备类型等多种媒体特征，与断点结合可监听断点变化。

4. 栅格布局：

   • 简介：栅格是多设备场景下的辅助定位工具，通过将空间分割为有规律的栅格，降低适配成本，保证多设备上应用显示的协调性和一致性。

   • 栅格组件的断点：提供丰富的断点定制能力，可修改断点取值范围，支持以窗口宽度或栅格组件本身宽度为参照物响应断点变化，且断点发生变化时会通过 onBreakPointChange 事件通知开发者。

   • 栅格组件的 columns、gutter 和 margin：columns 默认为 12 列，gutter 默认为 0，可定义不同断点下的 columns 数量、gutter 长度以及水平和垂直方向的 gutter。margin 和 padding 可控制栅格组件与父容器左右边缘的距离，但二者计算区域不同。

   • 栅格组件的 span、offset 和 order：GridCol 组件支持配置这三个参数，取值具有向后方向的继承性，可控制元素在栅格中的布局。

   • 栅格组件的嵌套使用：满足复杂场景的需要。

四、典型布局场景

1. 页签栏：结合响应式布局，设置不同断点下 Tab 组件的属性和 tabBar 的 CustomBuilder 布局方向，实现页签在不同位置和尺寸的效果。

2. 运营横幅（Banner）：使用 Swiper 组件结合响应式布局，配置不同断点下的 displayCount 属性，实现不同数量内容项的展示。

3. 网格：通过 Grid 组件调整 columnsTemplate 属性或 List 组件调整 lanes 属性，结合响应式布局实现不同断点下图片的不同排布。

4. 侧边栏：使用 SideBarContainer 组件结合响应式布局，配置不同断点下的属性，实现侧边栏的不同显示效果。

5. 单 / 双栏：使用 Navigation 组件实现单 / 双栏场景，可根据窗口宽度自动切换显示。

6. 三分栏：组合使用 SideBarContainer 组件与 Navigation 组件，结合响应式布局，设置不同断点下的属性，实现不同窗口宽度下的不同栏显示效果。

7. 自定义弹窗：通过 CustomDialogController 实现，有两种方式，一是通过 gridCount 属性配置弹窗宽度，二是将 customStyle 设置为 true 自定义弹窗样式配合栅格组件实现。

8. 大图浏览：将 Image 组件的 objectFit 属性设置为 ImageFit.Contain，解决图片被截断问题。

9. 操作入口：使用 Scroll 和 Row 组件结合，实现不同断点下的操作入口布局效果。

10. 顶部：使用栅格行组件 GridRow 和栅格列组件 GridCol 布局，实现不同断点下标题和搜索框的显示效果。

11. 缩进布局：借助栅格组件控制内容在不同断点下占据不同列数，实现缩进效果。

12. 挪移布局：通过配置栅格子元素在不同断点下占据的列数，实现 “上下布局” 与 “左右布局” 的切换效果。

13. 重复布局：配置栅格子组件在不同断点下占据不同列数，实现 “小屏单列显示、大屏双列显示” 的效果，还可通过 onBreakpointChange 事件调整显示的元素数量。