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

news2024/10/4 14:56:26

栅格布局（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.coloradmin.cn/o/1456977.html

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

相关文章

【漏洞复现-通达OA】通达OA share存在前台SQL注入漏洞

【漏洞复现-通达OA】通达OA share存在前台SQL注入漏洞

一、漏洞简介 通达OA（Office Anywhere网络智能办公系统）是由北京通达信科科技有限公司自主研发的协同办公自动化软件，是与中国企业管理实践相结合形成的综合管理办公平台。通达OA为各行业不同规模的众多用户提供信息化管理能力，包…
阅读更多...
基于 SEBAL 模型的河套灌区永济灌域蒸散发估算及其变化特征_李彦彬_2023

基于 SEBAL 模型的河套灌区永济灌域蒸散发估算及其变化特征_李彦彬_2023

基于 SEBAL 模型的河套灌区永济灌域蒸散发估算及其变化特征_李彦彬_2023 摘要关键词 1 数据1.1 研究区概况1.2 数据来源 2 研究方法2.1 SEBAL 模型原理2.2 FAO P-M 公式2.3 模型精度评价 3 结果分析3.2 日蒸散反演结果及变化3.3 不同土地利用类型蒸散特征分析 4 结论与讨论 摘要…
阅读更多...
electron Tab加载动画开启和关闭

electron Tab加载动画开启和关闭

记个开发中的bug，以此为鉴。眼懒得时候手勤快点儿，不要想当然！！！ 没有转载的价值，请勿转载搬运呦。 WebContents API： Event: did-finish-load​ 导航完成时触发，即选项卡的旋转…
阅读更多...
Redis 数据类型及其常用命令二（bitmap、geo、hyperloglog、bitfield、stream）

Redis 数据类型及其常用命令二（bitmap、geo、hyperloglog、bitfield、stream）

上文中我们介绍了Redis常使用的5中数据类型，对于一些特殊的场景，我们需要使用特殊的数据类型，本文将详细介绍5种特殊的数据类型。 1、bitmap 类型 用String类型作为底层数据结构实现的一种统计二值状态的数据类型。位图本质是数组&#xff0…
阅读更多...
Netty是如何解决JDK中的Selector的bug的？

Netty是如何解决JDK中的Selector的bug的？

Selector BUG: JDK NIO的BUG, 例如臭名昭著的epoll bug，它会导致Selector空轮询，最终导致CPU 100%, 官方声称在JDK 1.6版本的update18修复了该问题，但是直到JDK1.7版本该问题仍旧存在，只不过该BUG发生 概率降低了一些而已&#x…
阅读更多...
阿里云备案服务器多少钱一年？

阿里云备案服务器多少钱一年？

ICP备案服务器太贵了，有便宜的吗？有啊，支持备案的服务器只要61元一年。备案服务器入口 https://t.aliyun.com/U/bLynLC 链接打开后，如下图： 阿里云轻量2核2G3M服务器61元一年 如上图所示，这台61元服务器可以…
阅读更多...
【动态规划】【组合数学】1866. 恰有 K 根木棍可以看到的排列数目

【动态规划】【组合数学】1866. 恰有 K 根木棍可以看到的排列数目

作者推荐 【深度优先搜索】【树】【有向图】【推荐】685. 冗余连接 II 本文涉及知识点 动态规划汇总 LeetCode1866. 恰有 K 根木棍可以看到的排列数目 有 n 根长度互不相同的木棍，长度为从 1 到 n 的整数。请你将这些木棍排成一排，并满足从左侧 可以…
阅读更多...
Leetcoder Day16｜ 二叉树 part05

Leetcoder Day16｜ 二叉树 part05

语言：Java/C 513.找树左下角的值 给定一个二叉树的 根节点 root，请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1示例 2: 输入: [1,2,3,4,null,5,6,null,null,7] 输出: 7 本题需要满足两…
阅读更多...
多线程系列(一) -线程技术入门知识讲解

多线程系列(一) -线程技术入门知识讲解

一、简介 在很多场景下，我们经常听到采用多线程编程，能显著的提升程序的执行效率。例如执行大批量数据的插入操作，采用单线程编程进行插入可能需要 30 分钟，采用多线程编程进行插入可能只需要 5 分钟就够了。 既然多线程编程技术…
阅读更多...
2024年2月前端技术新动态：迈向现代化的全速前进

2024年2月前端技术新动态：迈向现代化的全速前进

随着技术的不断进步，前端领域每月都有新的变化和挑战。2024年2月，我们见证了几项重大的技术更新，从Deno的性能提升到Turborepo的重大改进，再到jQuery 4.0.0 Beta的发布，这些变化不仅标志着前端开发向着更现代化、更高效…
阅读更多...
Eclipse 设置 tab width 为 4 个空格 (spaces)

Eclipse 设置 tab width 为 4 个空格 (spaces)

Eclipse 设置 tab width 为 4 个空格 [spaces] References Window -> Preferences -> General -> Editors -> Text Editors，选中右侧的 Insert space for tabs. Apply and Close. Window -> Preference -> C -> Code Style -> Formatter&a…
阅读更多...
python使用工厂模式和策略模式实现读文件、分析内容功能

python使用工厂模式和策略模式实现读文件、分析内容功能

当涉及到在 Python 中创建类以及使用设计模式来实现读取文件和分析内容的功能时，我们可以考虑使用工厂模式和策略模式的结合。下面是一个简单的示例，演示如何通过创建类和使用设计模式来实现这一功能： # 工厂模式：根据不同的分析…
阅读更多...
直接选择排序算法

直接选择排序算法

​​​​​​目录 选择排序 SelectSort直接选择排序 整体思路 图解分析 ​ 代码实现 时间复杂度 选择排序 基本思想： 每一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，直到全部待排…
阅读更多...
Stable Diffusion ComfyUI安装详细教程

Stable Diffusion ComfyUI安装详细教程

上一篇文章介绍了sd-webui的安装教程，但学习一下ComfyUI这种节点流程式的对理解AI绘画有较大帮助，而且后期排查错误会更加方便，熟练后用这种方式做AI绘画可玩性会更多。 文章目录 一、安装包说明二、安装文件介绍三、安装步骤四、汉化五、云主…
阅读更多...
Mysql 权限与安全管理

Mysql 权限与安全管理

0 引言 MySQL是一个多用户数据库，具有功能强大的访问控制系统，可以为不同用户指定允许的权限。MySQL用户可以分为普通用户和root用户。root用户是超级管理员，拥有所有权限，包括创建用户、删除用户和修改用户的密码等管理权限&…
阅读更多...
qt-交通路口仿真

qt-交通路口仿真

qt-交通路口仿真 一、演示效果二、核心代码三、程序链接 一、演示效果 二、核心代码 #include "generator.h"Generator::Generator(SimulationScene *scene):m_scene(scene),m_mode(VEHICLEMETHOD::GO_THROUGH),m_running_state(false),m_VisionOn(false),m_IsInter…
阅读更多...
AI时代教师如何修炼内功

AI时代教师如何修炼内功

AI时代教师如何修炼内功 How Teachers Can Cultivate Their Inner Strength in the Age of AI 在AI时代，教师的角色和职责正在经历前所未有的变革。随着人工智能技术的不断进步，教育领域出现了许多新的工具和方法，这些新发展要求教师提升自身…
阅读更多...
MySQL系列之索引入门（下）

MySQL系列之索引入门（下）

前言 通过上文，我想各位盆友已熟悉MySQL的索引分类及其含义，那么如何合理的使用呢？ 请继续围观此文，一探究竟！ 一、创建索引 首先，我们一起学习索引是如何创建的，又有哪些方式。 1. create t…
阅读更多...
IO线程进程

IO线程进程

代码练习 使用fread和fwrite完成两个文件的拷贝 #include<myhead.h>int main(int argc, const char *argv[]) {FILE *fp NULL;//重新以只读的形式打开文件if((fp fopen("./OIP-C.bmp", "r")) NULL){perror("fopen error");return -1;…
阅读更多...
stm32--笔记

stm32--笔记

一、引脚与变量 ​​​​​​​​​​​​​​ 二、STM32时钟 [STM32-时钟系统详解_stm32时钟_KevinFlyn的博客-CSDN博客] 三、定时器中断实验 1、定时器中断实验 ​ stm32关于通用定时器的周期、频率计算公式_stm32tim频率计算_胶囊咖啡的博客-CSDN博客 ​ 【STM32】通用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023