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等参数，即可确定最终布局，无需关心具体的设备类型及设备状态（如横竖屏）等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/690623.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

NAS系统折腾记 | TinyMediaManager刮削电影海报

NAS系统折腾记 | TinyMediaManager刮削电影海报

搭建好了NAS系统和Emby Media Server，接下来就是怎样对下载好的电影/电视剧集等内容进行刮削来展示电影海报墙获得更好的效果了。实际上，Emby Server本身就内置了强大的元数据抓取功能，能够自动从互联网上抓取电影、电视剧的元数据和海报等信…
阅读更多...
NestJS入门：不同请求方式前后端写法

NestJS入门：不同请求方式前后端写法

前文参考： NestJS入门1 NestJS入门2：创建模块 //GET http://localhost:3000/userGet()async findAll() {return this.userService.findAll();}// POST http://localhost:3000/user Body加上X-www-form-urlencoded数据 Post()create(Body() createUs…
阅读更多...
论UI的糟糕设计：以百度网盘为例

论UI的糟糕设计：以百度网盘为例

上面这一排鼠标一经过就会弹出来（不是点才弹出来），然后挡住你的各种操作， 弹出来时你就必须等它消失，卡一下才能操作。 在用户顺畅地操作内容时，经常就卡一下、卡一下、卡一下…… 1、比如鼠标从下到上&am…
阅读更多...
基于YOLOv7算法和Widerface数据集的高精度实时人脸检测系统（PyTorch+Pyside6+YOLOv7）

基于YOLOv7算法和Widerface数据集的高精度实时人脸检测系统（PyTorch+Pyside6+YOLOv7）

摘要：基于YOLOv7算法和Widerface数据集的高精度实时人脸检测系统可用于日常生活中检测与定位人脸目标，此系统可完成对输入图片、视频、文件夹以及摄像头方式的目标检测与识别，同时本系统还支持检测结果可视化与导出。本系统采用YOLOv7目标检测…
阅读更多...
【springboot+vue项目（十五）】基于Oauth2的SSO单点登录（二）vue-element-admin框架改造整合Oauth2.0

【springboot+vue项目（十五）】基于Oauth2的SSO单点登录（二）vue-element-admin框架改造整合Oauth2.0

Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统框架，提供了丰富的组件和功能，可以帮助开发者快速搭建现代化的后台管理系统。 一、基本知识 （一）Vue-element-admin 的主要文件和目录 vue-element-admin/ |…
阅读更多...
【社区投稿】给Rust的Struct自动实现trait

【社区投稿】给Rust的Struct自动实现trait

给Rust的Struct自动实现trait 我们通常使用 #[derive(Clone, Debug)] 这样的方式给struct自动实现相应的trait，从而让struct具备某些特性，但是如果我们想让编译器给struct自动实现自己定义的trait要怎么办？ 首先我们需要有一个trait&#xff…
阅读更多...
蓝桥杯刷题--python-9(2023填空题2）

蓝桥杯刷题--python-9(2023填空题2）

001串的熵 - 蓝桥云课 (lanqiao.cn) import mathn 23333333for i in range(1, n >> 1):j n - ia -(i / n) * (math.log2(i / n)) * i - (j / n) * (math.log2(j / n)) * ja round(a, 4)if a 11625907.5798:print(i)break0求和 - 蓝桥云课 (lanqiao.cn) n20230408 pr…
阅读更多...
opencv进行人脸识别

opencv进行人脸识别

目录 一：准备工作 二：人脸图片识别 三：视频人脸识别 一：准备工作 1：github网站下载开源人脸特征数据 haarcascade_frontalface_default.xml 下载链接：
阅读更多...
如何确定分库还是 分表？

如何确定分库还是 分表？

分库分表 分库分表使用的场景不一样： 分表因为数据量比较大，导致事务执行缓慢；分库是因为单库的性能无法满足要求。 分片策略 1、垂直拆分 水平拆分 3 范围分片（range） 垂直水平拆分 4 如何解决数据查询问题&a…
阅读更多...
【Jvm】性能调优（拓展）Jprofiler如何监控和解决死锁、内存泄露问题

【Jvm】性能调优（拓展）Jprofiler如何监控和解决死锁、内存泄露问题

文章目录 Jprofiler简介1.安装及IDEA集成Jprofiler2.如何监控并解决死锁3.如何监控及解决内存泄露(重点)4.总结5.后话 Jprofiler简介 Jprofilers是针对Java开发的性能分析工具(免费试用10天), 可以对Java程序的内存,CPU,线程,GC,锁等进行监控和分析, 1.安装及IDEA集成Jprofil…
阅读更多...
车载软件架构 —— Adaptive AUTOSAR软件架构中时间同步、网络管理和软件更新策略

车载软件架构 —— Adaptive AUTOSAR软件架构中时间同步、网络管理和软件更新策略

车载软件架构 —— Adaptive AUTOSAR软件架构中时间同步、网络管理和软件更新策略 我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师（Wechat：gongkenan2013）。 老规矩，分享一段喜欢的文字，避免自己成…
阅读更多...
解决用IPV6+DDNS访问UNRAID webui周期性失效的问题，smb不能访问的问题

解决用IPV6+DDNS访问UNRAID webui周期性失效的问题，smb不能访问的问题

我使用的unraid系统使用ddns（DDNSGO）绑定域名（阿里域名）与主机的ipv6地址进行远程访问，unraid是6.12.8。 遇到的问题是，配置当时是没问题的，但是过几天就会失效，无法通过域名访问we…
阅读更多...
linux查看磁盘占用命令

linux查看磁盘占用命令

查看系统整体的磁盘占用情况 df -h查看当前文件夹下所有子文件夹的磁盘占用情况 du -ah --max-depth1按照文件大小从大到小排序 du -ah --max-depth1 .|sort -hr查看当前文件夹以及所有子文件夹的磁盘占用汇总 du -sh *按照文件大小从大到小排序 du -sh *|sort -nr
阅读更多...
MongoDB聚合运算符：$arrayElemAt

MongoDB聚合运算符：$arrayElemAt

MongoDB聚合运算符$arrayElemAt用于返回数组中指定位置的元素。 语法 { $arrayElemAt: [ <array>, <idx> ] }<array>可以是任何能被解析为数组的表达式。<idx>可以是任何可以被解析为整数的表达式。 使用 如果<idx>为0或正整数&#xff0c;则…
阅读更多...
【SQL注入】基于extractvalue函数的报错注入原理

【SQL注入】基于extractvalue函数的报错注入原理

一、ExtractValue函数 ExtractValue()函数是MySQL数据库中用于提取XML数据中指定路径的值的函数。它基于XPath语法&#xff0c;允许用户根据特定的路径表达式从XML格式的数据中获取所需信息。以下是关于MySQL中ExtractValue()函数的详细讲解&#xff1a; 1.1语法 EXTRACTVAL…
阅读更多...
【国产MCU】-CH32V307-通用定时器（GPTM）-编码模式与旋转编码器驱动

【国产MCU】-CH32V307-通用定时器（GPTM）-编码模式与旋转编码器驱动

通用定时器（GPTM）-编码模式与旋转编码器驱动 文章目录 通用定时器（GPTM）-编码模式与旋转编码器驱动1、通用定时器编码模式介绍2、旋转编码器介绍3、驱动API介绍4、编码模式使用示例本文将详细介绍如何使用CH32V307通用定时器的编码模式。 1、通用定时器编码模式介绍 编码器…
阅读更多...
Maven高级(一)

Maven高级(一)

文章目录 Maven高级&#xff08;一&#xff09;1. 分模块设计与开发1.1 介绍1.2 实践1.2.1 分析1.2.2 实现 1.3 总结 2. 继承与聚合2.1 继承2.1.1 继承关系2.1.1.1 思路分析2.1.1.2 实现 2.1.2 版本锁定2.1.2.1 场景2.1.2.2 介绍2.1.2.3 实现2.1.2.4 属性配置 2.2 聚合2.2.1 介…
阅读更多...
扫码即可快速协作：草料二维码底部协作面板功能详解

扫码即可快速协作：草料二维码底部协作面板功能详解

功能介绍 在二维码上添加 底部协作面板 功能后 &#xff0c;扫码后不仅可以阅读设备信息、产品资料等基本信息&#xff0c;还可以在二维码底部输入内容评论并他人快速协作&#xff0c;支持添加图文、语言、手写签名等操作。 底部协作面板是提供给组织内部成员快速协作的功能&…
阅读更多...
《汇编语言》- 读书笔记 - 第10章-CALL 和 RET 指令

《汇编语言》- 读书笔记 - 第10章-CALL 和 RET 指令

《汇编语言》- 读书笔记 - 第10章-CALL 和 RET 指令 10.1 ret 和 retf检测点 10.1 10.2 call 指令10.3 依据位移进行转移的 call 指令检测点 10.2 10.4 转移的目的地址在指令中的 call 指令检测点 10.3 10.5 转移地址在寄存器中的 call 指令10.6 转移地址在内存中的 call 指令检…
阅读更多...
数据模型概念

数据模型概念

一、概念 (1) 定义 在数据库系统中针对不同的使用对象和应用目的&#xff0c;采用不同的数据模型。根据模型的应用的不同目的&#xff0c;可以将这些模型划分为两类&#xff1a; (2) 分类 A&#xff1a;概念数据模型 它也称信息模型它是按用户的观点&#xff08;观念世界&…
阅读更多...
最新文章

Copyright @ 2022~2023