【鸿蒙实战开发】HarmonyOS基础布局之栅格布局

前言

栅格是多设备场景下通用的辅助定位工具，通过将空间分割为有规律的栅格。
GridRow为栅格容器组件，需与栅格子组件GridCol在栅格布局场景中联合使用。

栅格布局主要优势包括：

1.提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。

2.统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。

3.的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。通过调整列与列之间和行与行之间的间距，可以控制整个页面的排版效果。

4.自动换行和自适应：栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时，他们会自动换到下一行或下一列，并且在不同的设备上自适应排版，使得页面

布局更加灵活和适应性强。

GridRow

GridRow(option?: GridRowOptions)

GridRowOptions对象

1.columns：布局列数
2.gutter：布局间隙

●GutterOption

x：栅格子组件水平方向间距
y：栅格子组件垂直方向间距

3.breakpoints：断点设置

●value：设置断点位置的单调递增数组

●reference：断点切换参照物

○BreakpointReference枚举

◆WindowSize 以窗口为参照物
◆ComponentSize 以容器为参照物

4.diretion：布局排列方向

●Row 栅格元素按照行方向排列
●RowReverse 栅格元素按照逆序行方向排列

onBreakpointChange

onBreakpointChange(callback: (breakpoints: string) => void)
断点反生改变时触发回调

GridCol

GridCol(option?: GridColOptions)

GridColOptions对象说明

1.span：栅格子组件占用栅格容器组件的列数。span为0表示该元素不参与布局计算
2.offset：栅格子组件相对于原本位置偏移的列数
3.order：元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序

栅格组件的使用

方式一

GridRow({
    gutter: { x: 10, y: 20 },
    columns:12, // 设置一共多少份，默认12份
    breakpoints:{
      value:['320vp','600vp','840vp'],
      reference:BreakpointsReference.WindowSize
    }
}){
    ForEach(this.items, (item: MovieItem) => {
          GridCol({
              span: {
                sm: 6,  // sm尺寸下，一个GridCol占6份，一行2个元素
                md: 3,  // md尺寸下，一个GridCol占3份，一行4个元素
                lg: 2,  // lg尺寸下，一个GridCol占2份，一行6个元素
              }
        }){...}
    })
}

方式二

GridRow({
    gutter: { x: 10, y: 20 },
    columns:{
        sm:2,
        md:4,
        lg:6
    }, // 设置不同尺寸下所占的份数
    breakpoints:{
      value:['320vp','600vp','840vp'],
      reference:BreakpointsReference.WindowSize
    }
}){
    ForEach(this.items, (item: MovieItem) => {
          GridCol(){...}
    })
}

方式三

GridRow({
    columns:{
      xs:4,
      sm:4,
      md:8,
      lg:12
    }
}){
    ForEach(this.items, (item: MovieItem) => {
          GridCol({
              span:{
                xs:4,
                sm:4,
                md:6,
                lg:8
              },
              offset:{
                xs:0,
                sm:0,
                md:1,
                lg:2
              }  // 不同尺寸下，GridCol的偏移份数
        }){...}
    })
}

总结

在进行响应式开发时，我们需要根据实际的开发需求和技术复杂度开发项目。当涉及一块组件的改变时，用栅格布局；当涉及到某个组件的属性改变或js动态改变时，用断点系统；以组件的自适应布局进行布局思路开发

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V3.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……

获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料