第十节HarmonyOS 常用容器组件3-GridRow

1、描述

栅格容器组件,仅可以和栅格子组件(GridCol)在栅格布局场景中使用。

2、子组件

可以包含GridCol子组件。

3、接口

GridRow(options:{columns: number | GridRowColumnOption, gutter?: Length | GutterOption, Breakpoints?: Breakpoints, direction?: GridRowDirection})

4、参数

参数名

参数类型

必填

描述

columns

number | GridRowColumnOption

设置布局列数。

gutter

Length | GutterOption

栅格布局间距,x代表水平方向,y代表竖直方向。

Breakpoints

Breakpoints

设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。

direction

GridRowDirection

栅格布局排列方向。

5、GridRowColumnOption枚举说明:

栅格在不同宽度设备类型下,栅格列数。

参数名

参数类型

参数描述

xs

number

最小宽度类型设备。

sm

number

小宽度类型设备。

md

number

中等宽度类型设备。

lg

number

大宽度类型设备。

xl

number

特大宽度类型设备。

xxl

number

超大宽度类型设备。

6、GutterOption说明:

参数名

参数类型

参数描述

x

Length | GridRowSizeOption

水平gutter option。

y

Length | GridRowSizeOption

竖直gutter option。

7、GridRowSizeOption说明:

栅格在不同宽度设备类型下,gutter的大小。

参数名

参数类型

参数描述

xs

number

最小宽度类型设备。

sm

number

小宽度类型设备。

md

number

中等宽度类型设备。

lg

number

大宽度类型设备。

xl

number

特大宽度类型设备。

xxl

number

超大宽度类型设备。

8、BreakPoints说明:

参数名

参数类型

参数描述

value

Array<string>

设置段带你位置的单调递增数组。默认值:[“320vp”, “520vp”, “840vp”]。

reference

BreakpointsReference

断点切换参照物。

  // 启用xs、sm、md共3个断点

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

  // 启用xs、sm、md、lg共4个断点,断点范围值必须单调递增

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

  // 启用xs、sm、md、lg、xl共5个断点,断点范围数量不可超过断点可取值数量-1

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

9、BreakpointsReference枚举类型:

枚举名

描述

WindowSize

以窗口为参照。

ComponentSize

以容器为参照。

10、GridRowDirection枚举类型:

枚举名

描述

row

栅格元素按照行为方向排列。

rowReverse

栅格元素按照逆序行为方法排列。

栅格最多支持xs、sm、md、lg、xl、xxl六个断点,且名称不可修改。假设传入的数组是[n0, n1, n2, n3, n4],各个断点取值如下:

断点

取值范围

xs

[0, n0)

sm

[n0, n1)

md

[n2, n2)

lg

[n3, n3)

xl

[n4, n4)

xxl

[n5, INF)

说明:

栅格元素仅支持Row/RowReverse排列,不支持column/ColumnReverse方向排列。

栅格子组件仅能通过span、offset计算子组件位置与大小。多个子组件span超过规定列数时自动换行。

单个元素span大小超过最大列数时后台默认span为最大column数。

新一行的Offset加上子组件的span超过总列数时,将下一个子组件在新的一行放置。

例:Item1: GridCol({ span: 6}), Item2: GridCol({ span: 8, offset:11})

11、事件

名称:onBreakpointChange(callback: (breakpoints: string) => void)

功能说明:断点发生变化时触发回调。

参数:breakpoints - string - 取值为"xs"、"sm"、"md"、"lg"、"xl"、"xxl"。

12、示例

import router from '@ohos.router'@Entry
@Component
struct GridRowPage {@State message: string = '栅格容器组件,仅可以和栅格子组件(GridCol)在栅格布局场景中使用。'@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];build() {Row() {Scroll() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width("96%")GridRow({columns: 5,gutter: { x: 5, y: 10 },breakpoints: { value: ["400vp", "600vp", "800vp"], reference: BreakpointsReference.WindowSize }}) {ForEach(this.bgColors, (color) => {GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {Row().width("100%").height("20vp")}.borderColor(color).borderWidth(2)})}.width("100%").height("100%").margin({ top: 12 }).onBreakpointChange((breakpoint) => {console.log("currentBp = " + breakpoint)})GridRow({columns: 6,gutter: { x: 12, y: 20 },breakpoints: { value: ["400vp", "600vp", "800vp"], reference: BreakpointsReference.WindowSize }}) {ForEach(this.bgColors, (color) => {GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {Row().width("100%").height("20vp")}.borderColor(color).borderWidth(2)})}.width("100%").height("100%").margin({ top: 12 })Blank(12)Button("GridRow文本文档").fontSize(20).backgroundColor('#007DFF').width('96%').onClick(() => {// 处理点击事件逻辑router.pushUrl({url: "pages/containerComponents/gridRow/GridRowDesc",})})}.width('100%')}}.padding({ top: 12, bottom: 12 })}
}

13、效果图

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

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

相关文章

把 Taro 项目作为一个完整分包,Taro项目里分包的样式丢失

现象&#xff1a; 当我们把 Taro 项目作为原生微信小程序一个完整分包时&#xff0c;Taro项目里分包的样式丢失&#xff0c;示意图如下&#xff1a; 原因&#xff1a; 在node_modules/tarojs/plugin-indie/dist/index.js文件里&#xff0c;限制了只有pages目录下会被引入app.w…

Springboot实现qq邮件的发送

一、打开必要的邮件设置 首先登录qq邮箱官网登录之后&#xff0c;在设置中将传输协议给打开&#xff0c;我们需要用这个秘钥作为发件人的邮箱授权。 这里开启之后&#xff0c;记住这个秘钥。 二、代码编写 首先我们将作为发送邮件的账户信息写入配置文件。 spring:mail:hos…

windows server 下的mysql 8.0.28修改数据库目录

1. 查看当前数据库存储位置 show global variables like %datadir%; 默认是&#xff1a;C:\ProgramData\MySQL\MySQL Server 8.0\Data 2. 修改 C:\ProgramData\MySQL\MySQL Server 8.0\my.ini配置文件。如下&#xff1a; datadirD:/ProgramData/MySQL/MySQL Server 8.0/Dat…

小兴教你做平衡小车-JGB37-520电机介绍

文章目录 1 前言2 分析电机安装板3 介绍电机驱动板3.1 电机驱动板原理图3.2 电机驱动板PCB图3.2 电机驱动板3D效果图 1 前言 为了更好的对JGB37-520这款电机有个了解&#xff0c;这里直接上图应该会清晰些。这款电机带有霍尔编码器&#xff0c;方便对车轮的转速进行采集。咱们…

vulnhub-----pWnOS1.0靶机

文章目录 1.信息收集2.漏洞测试3.爆破hash4.提权 首先拿到一台靶机&#xff0c;就需要知道靶机的各种信息&#xff08;IP地址&#xff0c;开放端口&#xff0c;有哪些目录&#xff0c;什么框架&#xff0c;cms是什么&#xff0c;网页有什么常见的漏洞&#xff0c;如sql注入&…

第2讲-Memory(3)主存

主存储器 多模块存储器

数据库系统概论-第16章 数据仓库与联机分析处理技术

概念性的介绍&#xff0c;一略而过&#xff0c;不重要。 16.1 数据仓库技术 16.2 联机分析处理技术 16.3 数据挖掘技术 16.4 大数据时代的新型数据仓库 16.5 小结

3d画线生成模型之后最大化找不到---模大狮模型网

当你在3D建模软件中画线生成模型后&#xff0c;如果最大化找不到该模型&#xff0c;可能是因为以下几种情况导致&#xff1a; 模型位置偏移&#xff1a; 可能你在绘制线条时&#xff0c;将模型画在了视图界面之外&#xff0c;导致最大化时无法看到。尝试平移或旋转模型&#x…

vue3中如何实现多个侦听器(watch)

<body> <div id"app"><input type"button" value"更改名字" click"change"> </div> <script src"vue.js"></script> <script>new Vue({el: #app,data: {food: {id: 1,name: 冰激…

透视未来工厂:山海鲸可视化打造数字孪生新篇章

在信息化浪潮的推动下&#xff0c;数字孪生工厂项目正成为工业制造领域的新宠。作为一名山海鲸可视化的资深用户&#xff0c;我深感其强大的数据可视化能力和数字孪生技术在工厂管理中的应用价值&#xff0c;同时我们公司之前也和山海鲸可视化合作制作了一个智慧工厂项目&#…

Matlab与高光谱遥感:环境监测的新时代

光谱和图像是人们观察世界的两种方式&#xff0c;高光谱遥感通过“图谱合一”的技术创新将两者结合起来&#xff0c;大大提高了人们对客观世界的认知能力&#xff0c;本来在宽波段遥感中不可探测的物质&#xff0c;在高光谱遥感中能被探测。以高光谱遥感为核心&#xff0c;构建…

三星工厂突发大火···  | 百能云芯

据韩媒报道&#xff0c;三星SDI位于韩国京畿道龙仁市基兴区的器兴工厂发生火灾。火灾发生在当地时间周四下午15:37左右&#xff0c;持续约20分钟后被扑灭。 幸运的是&#xff0c;此次火灾并未造成人员伤亡&#xff0c;但火场附近的一些帐篷已经被烧毁。消防部门目前正在调查火灾…

Windows 11 安装 WSL2

一、 概述 之前公司的服务器版本一直是ubuntu 16.04&#xff0c;然后再拉取新项目代码时编译报错找不到GLIBCXX_3.4.22 查看版本&#xff1a;strings /usr/lib/x86_64-linux-gnu/libstdc.so.6 | grep GLIBC ubuntu 16.04版本太低&#xff0c;更换20.04版本&#xff0c;所以就…

【JDBC编程】Java连接MySQL的五个步骤

目录 JDBC编程 1.JDBC的使用 2.数据库连接Connection 3.Statement对象 4.ResultSet对象 JDBC编程 JDBC编程运用了MySQL提供的 Java 的驱动包 mysql-connector-java &#xff0c;需要基于 Java 操作 MySQL 即需要该驱动包。同样的&#xff0c; 要基于 Java 操作 Oracle 数据库…

demo版多人聊天系统

目录 ​编辑 一&#xff0c;引入 二&#xff0c;在Server端修改的代码 1&#xff0c;保存用户信息功能实现 2&#xff0c;拼接消息 3&#xff0c;广播消息 三&#xff0c; Client端要修改的代码 四&#xff0c;效果演示 一&#xff0c;引入 在上一篇文章udp网络服务器中&a…

MySQL索引优化

示例 CREATE TABLE employees (id int(11) NOT NULL AUTO_INCREMENT,name varchar(24) NOT NULL DEFAULT COMMENT 姓名,age int(11) NOT NULL DEFAULT 0 COMMENT 年龄,position varchar(20) NOT NULL DEFAULT COMMENT 职位,hire_time timestamp NOT NULL DEFAULT CURRENT_TI…

PyTorch深度学习:如何提升遥感影像的地物分类精度?

我国高分辨率对地观测系统重大专项已全面启动&#xff0c;高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成&#xff0c;将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB&#xff0c;遥感大数据时…

【算法杂货铺】分治

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 快速排序 &#x1f4c2;75. 颜色分类 - 力扣&#xff08;LeetCode&#xff09; &#x1f4c2; 912. 排序数组 - 力扣&#xff08;LeetCode&#xff09; &#x1f4c2; 215. 数组中的第K个最大元素 - 力扣&#xff08;Lee…

突然发现!原来微信批量自动加好友这么简单!

你知道如何更好地管理和利用微信资源&#xff0c;实现客户拓展和沟通吗&#xff1f;下面就教大家一招&#xff0c;帮助大家实现统一管理多个微信号以及批量自动加好友。 想要统一管理多个微信号&#xff0c;不妨试试微信管理系统&#xff0c;不仅可以多个微信号同时登录&#…

数据分析概述、Conda环境搭建及JupyterLab的搭建

1. 数据分析职责概述 当今世界对信息技术的依赖程度在不断加深&#xff0c;每天都会有大量的数据产生&#xff0c;我们经常会感到数据越来越多&#xff0c;但是要从中发现有价值的信息却越来越难。这里所说的信息&#xff0c;可以理解为对数据集处理之后的结果&#xff0c;是从…