HarmonyOS项目开发一多简介
目录
一、布局能力概述
二、自适应布局
三、响应式布局
四、典型布局场景
一、布局能力概述
-
布局决定页面元素排布及显示:在页面设计及开发中,布局能力至关重要,主要通过组件结构来确定使用何种布局。
-
自适应布局与响应式布局:
-
自适应布局:当外部容器大小变化时,元素根据相对关系自动变化以适应容器变化,有七种自适应布局能力,常与特定容器类组件搭配使用,多用于解决页面各区域内的布局差异。
-
响应式布局:当外部容器大小变化时,元素根据断点、栅格或特定特征自动变化以适应容器变化,有三种响应式布局能力,常与特定组件搭配使用,多用于解决页面各区域间的布局差异。
-
二、自适应布局
-
七种自适应布局能力:
-
自适应拉伸:通过 Flex 布局的 flexGrow 和 flexShrink 属性实现,将多余或不足的空间分配给特定区域。
-
均分能力:通过将 Row、Column 或 Flex 组件的 justifyContent 属性设置为 FlexAlign.SpaceEvenly,实现空间均匀分配给容器内所有空白区域。
-
自适应缩放:有两种实现方式,一是将子组件的宽高设置为父组件宽高的百分比,二是通过 layoutWeight 属性配置互为兄弟关系的组件在父容器主轴方向的布局权重,但该属性存在使用限制。
-
缩放能力:通过使用百分比布局配合固定宽高比(aspectRatio 属性)实现,当容器尺寸变化时,内容自适应调整且宽高比不变。
-
自适应延伸:有两种实现方式,通过 List 组件或 Scroll 组件配合 Row/Column 组件实现,根据显示区域尺寸显示不同数量的元素。
-
隐藏能力:通过设置布局优先级(displayPriority 属性)控制显隐,当布局主轴方向剩余尺寸不足以满足全部元素时,按照优先级从小到大依次隐藏。
-
自适应折行:通过将 Flex 组件的 wrap 属性设置为 FlexWrap.Wrap 实现,当布局方向尺寸不足以显示完整内容时自动换行。
-
三、响应式布局
-
简介:当窗口尺寸变化较大时,仅靠自适应布局可能出现问题,此时需要响应式布局调整页面结构。响应式布局根据特定特征(如窗口宽度)自动变化以适应外部容器变化,主要通过断点、媒体查询和栅格布局实现。
-
断点:
-
定义:将窗口宽度划分为不同范围(断点),在不同断点下可实现不同的页面布局效果。
-
监听方法:通过获取窗口对象并监听窗口尺寸变化、通过媒体查询监听应用窗口尺寸变化、借助栅格组件能力监听不同断点的变化等方法来判断当前所处断点。
-
-
媒体查询:可以监听应用显示区域变化、横竖屏、深浅色、设备类型等多种媒体特征,与断点结合可监听断点变化。
-
栅格布局:
-
简介:栅格是多设备场景下的辅助定位工具,通过将空间分割为有规律的栅格,降低适配成本,保证多设备上应用显示的协调性和一致性。
-
栅格组件的断点:提供丰富的断点定制能力,可修改断点取值范围,支持以窗口宽度或栅格组件本身宽度为参照物响应断点变化,且断点发生变化时会通过 onBreakPointChange 事件通知开发者。
-
栅格组件的 columns、gutter 和 margin:columns 默认为 12 列,gutter 默认为 0,可定义不同断点下的 columns 数量、gutter 长度以及水平和垂直方向的 gutter。margin 和 padding 可控制栅格组件与父容器左右边缘的距离,但二者计算区域不同。
-
栅格组件的 span、offset 和 order:GridCol 组件支持配置这三个参数,取值具有向后方向的继承性,可控制元素在栅格中的布局。
-
栅格组件的嵌套使用:满足复杂场景的需要。
-
四、典型布局场景
-
页签栏:结合响应式布局,设置不同断点下 Tab 组件的属性和 tabBar 的 CustomBuilder 布局方向,实现页签在不同位置和尺寸的效果。
-
运营横幅(Banner):使用 Swiper 组件结合响应式布局,配置不同断点下的 displayCount 属性,实现不同数量内容项的展示。
-
网格:通过 Grid 组件调整 columnsTemplate 属性或 List 组件调整 lanes 属性,结合响应式布局实现不同断点下图片的不同排布。
-
侧边栏:使用 SideBarContainer 组件结合响应式布局,配置不同断点下的属性,实现侧边栏的不同显示效果。
-
单 / 双栏:使用 Navigation 组件实现单 / 双栏场景,可根据窗口宽度自动切换显示。
-
三分栏:组合使用 SideBarContainer 组件与 Navigation 组件,结合响应式布局,设置不同断点下的属性,实现不同窗口宽度下的不同栏显示效果。
-
自定义弹窗:通过 CustomDialogController 实现,有两种方式,一是通过 gridCount 属性配置弹窗宽度,二是将 customStyle 设置为 true 自定义弹窗样式配合栅格组件实现。
-
大图浏览:将 Image 组件的 objectFit 属性设置为 ImageFit.Contain,解决图片被截断问题。
-
操作入口:使用 Scroll 和 Row 组件结合,实现不同断点下的操作入口布局效果。
-
顶部:使用栅格行组件 GridRow 和栅格列组件 GridCol 布局,实现不同断点下标题和搜索框的显示效果。
-
缩进布局:借助栅格组件控制内容在不同断点下占据不同列数,实现缩进效果。
-
挪移布局:通过配置栅格子元素在不同断点下占据的列数,实现 “上下布局” 与 “左右布局” 的切换效果。
-
重复布局:配置栅格子组件在不同断点下占据不同列数,实现 “小屏单列显示、大屏双列显示” 的效果,还可通过 onBreakpointChange 事件调整显示的元素数量。