HarmonyOS4.0系统性深入开发34栅格布局（GridRow/GridCol）

2024-02-20 03:52
文章标签 布局 开发 深入 34 栅格 系统性 harmonyos4.0 gridrow gridcol

本文主要是介绍HarmonyOS4.0系统性深入开发34栅格布局（GridRow/GridCol），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

栅格布局（GridRow/GridCol）

概述

栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括：

  1. 提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。
  2. 统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。
  3. 灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。通过调整列与列之间和行与行之间的间距，可以控制整个页面的排版效果。
  4. 自动换行和自适应：栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时，他们会自动换到下一行或下一列，并且在不同的设备上自适应排版，使得页面布局更加灵活和适应性强。

GridRow为栅格容器组件，需与栅格子组件GridCol在栅格布局场景中联合使用。

栅格容器GridRow

栅格系统断点

栅格系统以设备的水平宽度（屏幕密度像素值，单位vp）作为断点依据，定义设备的宽度类型，形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果。

栅格系统默认断点将设备宽度分为xs、sm、md、lg四类，尺寸范围如下：

断点名称取值范围（vp）设备描述
xs[0, 320）最小宽度类型设备。
sm[320, 520)小宽度类型设备。
md[520, 840)中等宽度类型设备。
lg[840, +∞)大宽度类型设备。

在GridRow栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl，xxl两个断点，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的布局设置。

断点名称设备描述
xs最小宽度类型设备。
sm小宽度类型设备。
md中等宽度类型设备。
lg大宽度类型设备。
xl特大宽度类型设备。
xxl超大宽度类型设备。

  • 针对断点位置，开发者根据实际使用场景，通过一个单调递增数组设置。由于breakpoints最多支持六个断点，单调递增数组长度最大为5。

    breakpoints: {value: ['100vp', '200vp']}

    表示启用xs、sm、md共3个断点，小于100vp为xs，100vp-200vp为sm，大于200vp为md。

    breakpoints: {value: ['320vp', '520vp', '840vp', '1080vp']}

    表示启用xs、sm、md、lg、xl共5个断点，小于320vp为xs，320vp-520vp为sm，520vp-840vp为md，840vp-1080vp为lg，大于1080vp为xl。

  • 栅格系统通过监听窗口或容器的尺寸变化进行断点，通过reference设置断点切换参考物。 考虑到应用可能以非全屏窗口的形式显示，以应用窗口宽度为参照物更为通用。

例如，使用栅格的默认列数12列，通过断点设置将应用宽度分成六个区间，在各区间中，每个栅格子元素占用的列数均不同。

@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow({breakpoints: {value: ['200vp', '300vp', '400vp', '500vp', '600vp'],reference: BreakpointsReference.WindowSize}
}) {ForEach(this.bgColors, (color, index) => {GridCol({span: {xs: 2, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。sm: 3, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。md: 4, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。lg: 6, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。xl: 8, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。}}) {Row() {Text(`${index}`)}.width("100%").height('50vp')}.backgroundColor(color)})
}

点击放大

布局的总列数

GridRow中通过columns设置栅格布局的总列数。

  • columns默认值为12，即在未设置columns时，任何断点下，栅格布局被分成12列。

    @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown,Color.Red, Color.Orange, Color.Yellow, Color.Green];
...
GridRow() {ForEach(this.bgColors, (item, index) => {GridCol() {Row() {Text(`${index + 1}`)}.width('100%').height('50')}.backgroundColor(item)})
}

    img

  • 当columns为自定义值，栅格布局在任何尺寸设备下都被分为columns列。下面分别设置栅格布局列数为4和8，子元素默认占一列，效果如下：

    @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
@State currentBp: string = 'unknown';
...
Row() {GridRow({ columns: 4 }) {ForEach(this.bgColors, (item, index) => {GridCol() {Row() {Text(`${index + 1}`)}.width('100%').height('50')}.backgroundColor(item)})}.width('100%').height('100%').onBreakpointChange((breakpoint) => {this.currentBp = breakpoint})
}
.height(160)
.border({ color: Color.Blue, width: 2 })
.width('90%')Row() {GridRow({ columns: 8 }) {ForEach(this.bgColors, (item, index) => {GridCol() {Row() {Text(`${index + 1}`)}.width('100%').height('50')}.backgroundColor(item)})}.width('100%').height('100%').onBreakpointChange((breakpoint) => {this.currentBp = breakpoint})
}
.height(160)
.border({ color: Color.Blue, width: 2 })
.width('90%')

    img

  • 当columns类型为GridRowColumnOption时，支持下面六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。

    @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
GridRow({ columns: { sm: 4, md: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } }) {ForEach(this.bgColors, (item, index) => {GridCol() {Row() {Text(`${index + 1}`)}.width('100%').height('50')}.backgroundColor(item)})
}

    点击放大

    若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里只设置sm:4, md:8，则较小尺寸的xs:12，较大尺寸的参照md的设置，lg:8, xl:8, xxl:8。

排列方向

栅格布局中，可以通过设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向。该属性可以设置为GridRowDirection.Row（从左往右排列）或GridRowDirection.RowReverse（从右往左排列），以满足不同的布局需求。通过合理的direction属性设置，可以使得页面布局更加灵活和符合设计要求。

  • 子组件默认从左往右排列。

    GridRow({ direction: GridRowDirection.Row }){}

    img

  • 子组件从右往左排列。

    GridRow({ direction: GridRowDirection.RowReverse }){}

    img

子组件间距

GridRow中通过gutter属性设置子元素在水平和垂直方向的间距。

  • 当gutter类型为number时，同时设置栅格子组件间水平和垂直方向边距且相等。下例中，设置子组件水平与垂直方向距离相邻元素的间距为10。

     GridRow({ gutter: 10 }){}

    img

  • 当gutter类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。

    GridRow({ gutter: { x: 20, y: 50 } }){}

    img

子组件GridCol

GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设置属性两种方式，设置span（占用列数），offset（偏移列数），order（元素序号）的值。

  • 设置span。

    GridCol({ span: 2 }){}
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.span(2)
GridCol(){}.span({ xs: 1, sm: 2, md: 3, lg: 4 })

  • 设置offset。

    GridCol({ offset: 2 }){}
GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){}
GridCol(){}.offset(2)
GridCol(){}.offset({ xs: 1, sm: 2, md: 3, lg: 4 })

  • 设置order。

    GridCol({ order: 2 }){}
GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.order(2)
GridCol(){}.order({ xs: 1, sm: 2, md: 3, lg: 4 })

span

子组件占栅格布局的列数，决定了子组件的宽度，默认为1。

  • 当类型为number时，子组件在所有尺寸设备下占用的列数相同。

    @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow({ columns: 8 }) {ForEach(this.bgColors, (color, index) => {GridCol({ span: 2 }) {      Row() {Text(`${index}`)}.width('100%').height('50vp')          }.backgroundColor(color)})
}

    img

  • 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。

    @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow({ columns: 8 }) {ForEach(this.bgColors, (color, index) => {GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {      Row() {Text(`${index}`)}.width('100%').height('50vp')          }.backgroundColor(color)})
}

    点击放大

offset

栅格子组件相对于前一个子组件的偏移列数，默认为0。

  • 当类型为number时，子组件偏移相同列数。

    @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow() {ForEach(this.bgColors, (color, index) => {GridCol({ offset: 2 }) {      Row() {Text('' + index)}.width('100%').height('50vp')          }.backgroundColor(color)})
}

    img

    栅格默认分成12列，每一个子组件默认占1列，偏移2列，每个子组件及间距共占3列，一行放四个子组件。

  • 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。

    @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...GridRow() {ForEach(this.bgColors, (color, index) => {GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } }) {      Row() {Text('' + index)}.width('100%').height('50vp')          }.backgroundColor(color)})
}

    点击放大

order

栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较小的组件在前，较大的在后。

当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从小到大排列。

  • 当类型为number时，子组件在任何尺寸下排序次序一致。

    GridRow() {GridCol({ order: 4 }) {Row() {Text('1')}.width('100%').height('50vp')}.backgroundColor(Color.Red)GridCol({ order: 3 }) {Row() {Text('2')}.width('100%').height('50vp')}.backgroundColor(Color.Orange)GridCol({ order: 2 }) {Row() {Text('3')}.width('100%').height('50vp')}.backgroundColor(Color.Yellow)GridCol({ order: 1 }) {Row() {Text('4')}.width('100%').height('50vp')}.backgroundColor(Color.Green)
}

    img

  • 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件排序次序设置。在xs设备中，子组件排列顺序为1234；sm为2341，md为3412，lg为2431。

    GridRow() {GridCol({ order: { xs:1, sm:5, md:3, lg:7}}) {Row() {Text('1')}.width('100%').height('50vp')}.backgroundColor(Color.Red)GridCol({ order: { xs:2, sm:2, md:6, lg:1} }) {Row() {Text('2')}.width('100%').height('50vp')}.backgroundColor(Color.Orange)GridCol({ order: { xs:3, sm:3, md:1, lg:6} }) {Row() {Text('3')}.width('100%').height('50vp')}.backgroundColor(Color.Yellow)GridCol({ order: { xs:4, sm:4, md:2, lg:5} }) {Row() {Text('4')}.width('100%').height('50vp')}.backgroundColor(Color.Green)
}

    点击放大

栅格组件的嵌套使用

栅格组件也可以嵌套使用，完成一些复杂的布局。

以下示例中，栅格把整个空间分为12份。第一层GridRow嵌套GridCol，分为中间大区域以及“footer”区域。第二层GridRow嵌套GridCol，分为“left”和“right”区域。子组件空间按照上一层父组件的空间划分，粉色的区域是屏幕空间的12列，绿色和蓝色的区域是父组件GridCol的12列，依次进行空间的划分。

@Entry
@Component
struct GridRowExample {build() {GridRow() {GridCol({ span: { sm: 12 } }) {GridRow() {GridCol({ span: { sm: 2 } }) {Row() {Text('left').fontSize(24)}.justifyContent(FlexAlign.Center).height('90%')}.backgroundColor('#ff41dbaa')GridCol({ span: { sm: 10 } }) {Row() {Text('right').fontSize(24)}.justifyContent(FlexAlign.Center).height('90%')}.backgroundColor('#ff4168db')}.backgroundColor('#19000000').height('100%')}GridCol({ span: { sm: 12 } }) {Row() {Text('footer').width('100%').textAlign(TextAlign.Center)}.width('100%').height('10%').backgroundColor(Color.Pink)}}.width('100%').height(300)}
}

img

综上所述，栅格组件提供了丰富的自定义能力，功能异常灵活和强大。只需要明确栅格在不同断点下的Columns、Margin、Gutter及span等参数，即可确定最终布局，无需关心具体的设备类型及设备状态（如横竖屏）等。

这篇关于HarmonyOS4.0系统性深入开发34栅格布局（GridRow/GridCol）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/726954。

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
Java并发编程必备之Synchronized关键字深入解析

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...
利用Python开发Markdown表格结构转换为Excel工具

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark
阅读更多...
利用Go语言开发文件操作工具轻松处理所有文件

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具？核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件
阅读更多...
一文带你深入了解Python中的GeneratorExit异常处理

一文带你深入了解Python中的GeneratorExit异常处理

《一文带你深入了解Python中的GeneratorExit异常处理》GeneratorExit是Python内置的异常,当生成器或协程被强制关闭时,Python解释器会向其发送这个异常,下面我们来看... 目录GeneratorExit：协程世界的死亡通知书什么是GeneratorExit实际中的问题案例
阅读更多...
基于Python开发批量提取Excel图片的小工具

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求，就是批量读取当前目录下所有文件夹里的Excel文件，去获取出Excel文件中的图片，并
阅读更多...
基于Python开发PDF转PNG的可视化工具

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图
阅读更多...
基于Python开发PDF转Doc格式小程序

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序，采用T
阅读更多...
使用Python开发一个图像标注与OCR识别工具

使用Python开发一个图像标注与OCR识别工具

《使用Python开发一个图像标注与OCR识别工具》：本文主要介绍一个使用Python开发的工具,允许用户在图像上进行矩形标注,使用OCR对标注区域进行文本识别,并将结果保存为Excel文件,感兴... 目录项目简介1. 图像加载与显示2. 矩形标注3. OCR识别4. 标注的保存与加载5. 裁剪与重置图像
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2