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系统和Emby Media Server,接下来就是怎样对下载好的电影/电视剧集等内容进行刮削来展示电影海报墙获得更好的效果了。实际上,Emby Server本身就内置了强大的元数据抓取功能,能够自动从互联网上抓取电影、电视剧的元数据和海报等信…

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

上面这一排鼠标一经过就会弹出来(不是点才弹出来),然后挡住你的各种操作, 弹出来时你就必须等它消失,卡一下才能操作。 在用户顺畅地操作内容时,经常就卡一下、卡一下、卡一下…… 1、比如鼠标从下到上&am…

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

摘要:基于YOLOv7算法和Widerface数据集的高精度实时人脸检测系统可用于日常生活中检测与定位人脸目标,此系统可完成对输入图片、视频、文件夹以及摄像头方式的目标检测与识别,同时本系统还支持检测结果可视化与导出。本系统采用YOLOv7目标检测…

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

Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统框架,提供了丰富的组件和功能,可以帮助开发者快速搭建现代化的后台管理系统。 一、基本知识 (一)Vue-element-admin 的主要文件和目录 vue-element-admin/ |…

如何确定分库还是 分表?

分库分表 分库分表使用的场景不一样: 分表因为数据量比较大,导致事务执行缓慢;分库是因为单库的性能无法满足要求。 分片策略 1、垂直拆分 水平拆分 3 范围分片(range) 垂直水平拆分 4 如何解决数据查询问题&a…

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

文章目录 Jprofiler简介1.安装及IDEA集成Jprofiler2.如何监控并解决死锁3.如何监控及解决内存泄露(重点)4.总结5.后话 Jprofiler简介 Jprofilers是针对Java开发的性能分析工具(免费试用10天), 可以对Java程序的内存,CPU,线程,GC,锁等进行监控和分析, 1.安装及IDEA集成Jprofil…

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

车载软件架构 —— Adaptive AUTOSAR软件架构中时间同步、网络管理和软件更新策略 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成…

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

我使用的unraid系统使用ddns(DDNSGO)绑定域名(阿里域名)与主机的ipv6地址进行远程访问,unraid是6.12.8。 遇到的问题是,配置当时是没问题的,但是过几天就会失效,无法通过域名访问we…

Maven高级(一)

文章目录 Maven高级(一)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 介…

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

功能介绍 在二维码上添加 底部协作面板 功能后 ,扫码后不仅可以阅读设备信息、产品资料等基本信息,还可以在二维码底部输入内容评论并他人快速协作,支持添加图文、语言、手写签名等操作。 底部协作面板是提供给组织内部成员快速协作的功能&…

《汇编语言》- 读书笔记 - 第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) 定义 在数据库系统中针对不同的使用对象和应用目的,采用不同的数据模型。根据模型的应用的不同目的,可以将这些模型划分为两类: (2) 分类 A:概念数据模型 它也称信息模型它是按用户的观点(观念世界&…

JVM(2)实战篇

1 内存调优 1.1 内存溢出和内存泄漏 内存泄漏(memory leak):在Java中如果不再使用一个对象,但是该对象依然在GC ROOT的引用链上,这个对象就不会被垃圾回收器回收,这种情况就称之为内存泄漏。 内存泄漏绝…

单调队列和优先队列

本篇记录下一下关于单调队列和优先队列(堆)的方法以及解题思路. 文章目录 一. 单调队列1. 绝对差不超过限制得最长连续子数组2. 跳跃游戏 VI3. 设计自助结算系统4. 和至少为k的最短子数组5. 满足不等式的最大值 二. 优先队列1. 最后一块石头的重量2. 数据…

十二:枚举与注解

文章目录 01、枚举类的使用1.1、枚举类的理解1.2、自定义枚举类1.3、使用enum关键字定义枚举类1.4、Enum类中的常用方法1.5、使用enum关键字定义的枚举类实现接口 02、注解的使用2.1、注解的理解2.3、如何自定义注解2.4、jdk中4个基本的元注解的使用12.5、jdk中4个基本的元注解…

uniapp 适配鸿蒙next调研

1.官方的一些回答 DCloud有资源第一时间得到鸿蒙无apk手机的上市计划。我们和华为保持着紧密沟通,会把握好节奏,不用担心。大家可以观察一个信号,等微信的鸿蒙next版敲定了,鸿蒙无apk手机就可以明确上市计划了。鸿蒙的开发语言是a…

数据结构:动态内存分配+内存分区+宏+结构体

一、作业 1.定义一个学生结构体&#xff0c;包含结构体成员&#xff1a;身高&#xff0c;姓名&#xff0c;成绩&#xff1b;定义一个结构体数组有7个成员&#xff0c;要求终端输入结构体成员的值&#xff0c;根据学生成绩&#xff0c;进行冒泡排序。 #include <stdio.h>…

UE蓝图 Cast节点和源码

系列文章目录 UE蓝图 Cast节点和源码 文章目录 系列文章目录Cast节点功能一、Cast节点用法二、Cast节点使用场景三、Cast节点实现步骤四、Cast节点源码 Cast节点功能 在Unreal Engine&#xff08;UE&#xff09;中&#xff0c;Cast节点是一种蓝图系统中的节点&#xff0c;用于…

【性能测试入门必看】性能测试理论知识

一、性能测试理论知识 1、常用的七种性能测试方法 (1) 后端性能测试&#xff1a;其实&#xff0c;你平时听到的性能测试&#xff0c;大多数情况下指的是后端性能测试&#xff0c;也就是服务器端性能测试。后端性能测试&#xff0c;是通过性能测试工具模拟大量的并发用户请求&…

linux系统Grafana关联zabbix显示

Grafana关联zabbix 服务器下载浏览器配置开启zabbix插件配置zabbix数据源可视化Zabbix数据 服务器下载 grafana-cli plugins list-remote grafana-cli plugins list-remote|grep -i zabbix grafana-cli plugins install alexanderzobnin-zabbix-appsystemctl restart grafana-…