arkUI：网格布局（Grid）

arkUI：网格布局（Grid）

  • 1 主要内容说明
  • 2 网格布局的相关内容
    • 2.1 基本使用
      • 2.1.1 源码1 （Grid网格布局）
      • 2.1.2 源码1运行效果
    • 2.2 设置排列方式
      • 2.2.1 核心布局参数
      • 2.2.2 网格单元格参数（GridItem）
      • 2.2.3 源码2（设置排列方式）
      • 2.2.4 源码2运行效果
    • 2.3 方向及项数的设置（layoutDirection、maxCount）
      • 2.3.1 layoutDirection的内容
      • 2.3.2 maxCount的内容
      • 2.3.3 源码3（方向及项数的设置）
      • 2.3.2 源码3运行效果
    • 2.4 滚动效果
      • 2.4.1 源码4（滚动效果）
      • 2.4.2 源码6运行效果
  • 3 结语
  • 4 定位日期

1 主要内容说明

网格布局（Grid）是一种将子组件按行列排列的布局方式，适合用来展示规则化、对齐的内容分布。它允许通过行列模板、方向控制等参数，灵活调整子组件的排列方式和显示样式。网格布局是一种强大且灵活的布局工具，特别适合规则性强的内容展示。通过调整模板、方向和显示限制等参数，可以轻松实现不同的排列需求，同时保持布局的美观和一致性。

2 网格布局的相关内容

2.1 基本使用

  • Grid组件为网格容器，其中容器内每一个条目对应一个GridItem组件，Grid的子组件必须是GridItem组件。

2.1.1 源码1 （Grid网格布局）

@Entry
@Component
struct PageGrid1 {build() {// 主容器为 Column 布局，整体占满屏幕Column() {// 第一组 Grid 布局Grid() {// 第一格：文字 "枣"GridItem() {Text("枣") // 显示文字“枣”}.backgroundColor("#ffc") // 浅黄色背景.margin(10) // 设置外边距 10px// 第二格：文字 "天龙"GridItem() {Text("天龙") // 显示文字“天龙”}.backgroundColor("#ffc").margin(10)// 第三格：文字 "白芷"GridItem() {Text("白芷") // 显示文字“白芷”}.backgroundColor("#ffc").margin(10)// 第四格：包含多段文字的 Column 布局GridItem() {Column() { // 垂直布局Text("起") // 显示“起”Text("阳") // 显示“阳”Text("草") // 显示“草”}}.backgroundColor("#ffc").margin(10)}// 分割线Divider().color("red") // 红色分割线.height(20) // 高度为 20px// 第二组 Grid 布局Grid() {GridItem() {Text("大枣") // 显示文字“大枣”}.backgroundColor("#ffc").margin(10)GridItem() {Text("天龙") // 显示文字“天龙”}.backgroundColor("#ffc").margin(10)GridItem() {Text("白芷") // 显示文字“白芷”}.backgroundColor("#ffc").margin(10)// 使用 Flex 容器展示文字GridItem() {Flex({ justifyContent: FlexAlign.SpaceBetween }) {Text("起") // 显示“起”Text("阳") // 显示“阳”Text("草") // 显示“草”}}.backgroundColor("#ffc").margin(10)}// 分割线Divider().color("red").height(20)// 第三组 Grid 布局Grid() {GridItem() {Text("大红枣") // 显示文字“大红枣”}.backgroundColor("#ffc").margin(10)GridItem() {Text("天龙") // 显示文字“天龙”}.backgroundColor("#ffc").margin(10)GridItem() {Text("白芷") // 显示文字“白芷”}.backgroundColor("#ffc").margin(10)// 使用 Row 容器展示文字GridItem() {Row({ space: 5 }) { // 横向布局，文字之间间隔 5pxText("起") // 显示“起”Text("阳") // 显示“阳”Text("草") // 显示“草”}}.backgroundColor("#ffc").margin(10)}}.width("100%") // 宽度为屏幕的 100%.height("100%") // 高度为屏幕的 100%}
}

2.1.2 源码1运行效果

在这里插入图片描述

2.2 设置排列方式

2.2.1 核心布局参数

参数类型说明示例
rowsTemplatestring设置每行的高度分布，支持比例值 (fr)、固定值（如 100vp）、自动 (auto) 等。“1fr 2fr 1fr”
columnsTemplatestring设置每列的宽度分布，支持同样的单位。“1fr 1fr 2fr”
rowsGapnumber定义网格行之间的间距（单位：vp）。5
columnsGapnumber定义网格列之间的间距（单位：vp）。10
  • fr：表示比例单位，1fr 代表可用空间的 1 份。
  • 固定值：可以使用固定值（如 100vp）。
  • auto：根据内容大小自动调整高度或宽度。

2.2.2 网格单元格参数（GridItem）

参数类型说明示例
rowStartnumber单元格从第几行开始，索引从 0 开始。0
rowEndnumber单元格在第几行结束（不包括该行）。2
columnStartnumber单元格从第几列开始，索引从 0 开始。1
columnEndnumber单元格在第几列结束（不包括该列）。3

2.2.3 源码2（设置排列方式）

@Entry
@Component
struct PageGrid2 {// 数据数组arr: string[] = ["枣1", "天龙2", "白芷3", "起阳草4", "和事草5", "黄金石6", "丹砂7", "柏8", "丁香9"]build() {// 主容器为 Column 布局Column({ space: 10 }) {// 第一个网格布局Grid() {// 动态生成网格项ForEach(this.arr, (item: string) => {GridItem() {Text(item).backgroundColor("#fcc") // 浅红色背景.width("100%").height("100%").textAlign(TextAlign.Center) // 文字居中}})}.rowsTemplate("1fr 1fr 1fr 1fr") // 四行等高.columnsTemplate("1fr 1fr 1fr") // 三列等宽.width("100%").height(300) // 固定高度.backgroundColor("#ff24f3d4") // 背景色.rowsGap(5) // 行间距.columnsGap(5) // 列间距// 第二个网格布局Grid() {// 动态生成网格项，条件布局ForEach(this.arr, (item: string) => {if (item == "天龙2") {// 特殊处理 "天龙2"GridItem() {Text(item).backgroundColor("#ff29ea52").width("100%").height("100%").textAlign(TextAlign.Center)}.rowStart(0) // 起始行.rowEnd(3) // 结束行} else if (item == "枣1") {// 特殊处理 "枣1"GridItem() {Text(item).backgroundColor("#ff29ea52").width("100%").height("100%").textAlign(TextAlign.Center)}.columnStart(0) // 起始列.columnEnd(1) // 结束列} else {// 默认处理其他项GridItem() {Text(item).backgroundColor("#ff29ea52").width("100%").height("100%").textAlign(TextAlign.Center)}}})}.rowsTemplate("2fr 1fr 1fr 1fr") // 第一行高度加倍.columnsTemplate("1fr 2fr 1fr") // 第二列宽度加倍.width("100%").height(300) // 固定高度.backgroundColor("#ff2659e3") // 背景色.rowsGap(5) // 行间距.columnsGap(5) // 列间距}.height("100%") // 占满父容器高度.width("100%") // 占满父容器宽度}
}

2.2.4 源码2运行效果

在这里插入图片描述

2.3 方向及项数的设置（layoutDirection、maxCount）

  • layoutDirection 控制排列方向（按行或列优先，顺序或逆序）。

  • maxCount 限制显示的项数。 通过合理搭配这两个参数，可以灵活实现复杂的网格布局需求。

  • layoutDirection 与 maxCount 的配合：
    -------- layoutDirection 决定显示顺序，maxCount 决定显示数量。
    -------- 两者结合使用时，layoutDirection 会影响显示的内容范围。

  • 结合 rowsTemplate 和 columnsTemplate 使用：
    -------- 网格的行列分布会受到模板的定义影响，因此在设置 maxCount 时需要确保模板能容纳足够的项。

  • 动态数据场景：
    -------- 使用 maxCount 时，数据源的长度可能超过 maxCount，未显示的部分不会影响网格布局的其他配置。

2.3.1 layoutDirection的内容

  • 作用：设置网格项的排列方向（从哪个方向开始填充，以及填充的优先级）。
  • 类型：GridDirection 枚举。
枚举值说明
GridDirection.Row按行优先排列（默认值）。先填满一行，再填下一行，从左到右。
GridDirection.RowReverse按行优先逆序排列。从右到左，先填满一行再填下一行。
GridDirection.Column按列优先排列。先填满一列，再填下一列，从上到下。
GridDirection.ColumnReverse按列优先逆序排列。从下到上，先填满一列再填下一列。

2.3.2 maxCount的内容

  • 作用：限制网格中最多显示的网格项数量，超过该数量的项将被隐藏。
  • 类型：number。
参数名类型默认值说明
maxCountnumber无指定网格中最多可显示的项数，超出部分隐藏。

2.3.3 源码3（方向及项数的设置）

@Entry
@Component
struct PageGridDirection {// 数据数组arr: string[] = ["枣1", "天龙2", "白芷3", "起阳草4", "和事草5", "黄金石6", "丹砂7", "柏8", "丁香9"]build() {// 主容器：Column 布局，子组件垂直排列Column({ space: 10 }) {// 网格布局Grid() {// 动态生成网格项ForEach(this.arr, (item: string) => {GridItem() {// 每个网格项显示数组中的元素Text(item).backgroundColor("#fcc") // 设置背景色为浅红色.width("20%") // 文本宽度占20%.height("20%") // 文本高度占20%.textAlign(TextAlign.Center) // 文字居中对齐}})}.width("100%") // 网格宽度占满父容器.height(300) // 网格高度固定为 300 vp.backgroundColor("#ff24f3d4") // 网格背景设置为半透明粉色.rowsGap(5) // 网格项之间行间距 5 vp.columnsGap(5) // 网格项之间列间距 5 vp.layoutDirection(GridDirection.RowReverse) // 设置排列方向为“行逆序”.maxCount(3) // 限制最多显示 3 个网格项}.height("100%") // 主容器高度占满父容器.width("100%") // 主容器宽度占满父容器}
}

2.3.2 源码3运行效果

在这里插入图片描述

2.4 滚动效果

单独设置rowsTemplate属性值，或单独设置columnsTemplate属性，当内容超出Grid组件宽度时，Grid滚动进行内容展示。

2.4.1 源码4（滚动效果）

@Entry
@Component
struct PageGridDirection {// 数据数组arr: string[] = ["枣1", "天龙2", "白芷3", "起阳草4", "和事草5", "黄金石6", "丹砂7", "柏8", "丁香9"]build() {// 主容器：Column 布局，子组件垂直排列Column({ space: 10 }) {// 网格布局Grid() {// 动态生成网格项ForEach(this.arr, (item: string) => {GridItem() {// 每个网格项显示数组中的元素Text(item).backgroundColor("#fcc") // 设置背景色为浅红色.width(60) // 文本宽度占20%.height(80) // 文本高度占20%.textAlign(TextAlign.Center) // 文字居中对齐}})}.width("100%") // 网格宽度占满父容器.height(300) // 网格高度固定为 300 vp.backgroundColor("#ff24f3d4") // 网格背景设置为半透明粉色.rowsGap(5) // 网格项之间行间距 5 vp.columnsGap(5) // 网格项之间列间距 5 vp.columnsTemplate("1fr 1fr")}.height("100%") // 主容器高度占满父容器.width("100%") // 主容器宽度占满父容器}
}

2.4.2 源码6运行效果

在这里插入图片描述

3 结语

使用网格布局编写一个计时器的样式，比使用其他布局编写要容易一些。相册的内容显示，也可以根据需要选择使用网格布局。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

4 定位日期

2024-11-18；
21:28；

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

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

相关文章

Cherno OpenGL(28 ~ 33)

Cherno OpenGL(28 ~ 33)

批量渲染-介绍 在这里我们将在一个drawcall打包多个几何体。即 batch geometry。 我们在这里将聚焦于2d渲染，我们如何渲染一堆2d的quads或者说rectangles呢？ 一种情况是比如一个2d游戏有很多个tile组成，要去渲染这些tile；另一种…
阅读更多...
网络安全之国际主流网络安全架构模型

网络安全之国际主流网络安全架构模型

目前，国际主流的网络安全架构模型主要有： ● 信息技术咨询公司Gartner的ASA（Adaptive Security Architecture自适应安全架构） ● 美国政府资助的非营利研究机构MITRE的ATT&CK（Adversarial Tactics Techniques &…
阅读更多...
游戏引擎学习第16天

游戏引擎学习第16天

视频参考:https://www.bilibili.com/video/BV1mEUCY8EiC/ 这些字幕讨论了编译器警告的概念以及如何在编译过程中启用和处理警告。以下是字幕的内容摘要： 警告的定义：警告是编译器用来告诉你某些地方可能存在问题，尽管编译器不强制要求你修复…
阅读更多...
【Nginx从入门到精通】03 、安装部署-让虚拟机可以联网

【Nginx从入门到精通】03 、安装部署-让虚拟机可以联网

文章目录 总结一、配置联网【Minimal 精简版】1.1、查看网络配置1.2、配置ip地址 : 修改配置文件 <font colororange>ifcfg-ens33Stage 1&#xff1a;输入指令Stage 2&#xff1a;修改参数Stage 3&#xff1a;重启网络Stage 4&#xff1a;测试上网 二、配置联网【Everyth…
阅读更多...
【UGUI】背包的交互01（道具信息跟随鼠标+道具信息面板显示）

【UGUI】背包的交互01（道具信息跟随鼠标+道具信息面板显示）

详细程序逻辑过程 初始化物品栏&#xff1a; 在 Awake 方法中&#xff0c;通过标签找到提示框和信息面板。 循环生成10个背包格子&#xff0c;并为每个格子设置图标和名称。 为每个格子添加 UInterMaager232 脚本&#xff0c;以便处理交互事件。 关闭提示框和信息面板&#…
阅读更多...
MySQL45讲 第二十四讲 MySQL是怎么保证主备一致的？——阅读总结

MySQL45讲 第二十四讲 MySQL是怎么保证主备一致的？——阅读总结

文章目录 MySQL45讲 第二十四讲 MySQL是怎么保证主备一致的&#xff1f;——阅读总结一、MySQL 主备基本原理&#xff08;一&#xff09;主备切换流程&#xff08;二&#xff09;主备数据同步流程 二、binlog 格式及相关问题&#xff08;一&#xff09;binlog 的三种格式&#…
阅读更多...
RSA算法原理

RSA算法原理

1、RSA加密算法介绍 2、RSA算法的基本原理 2.1、RSA密钥生成 2.2、RSA加密和解密 1、RSA加密算法介绍 简单介绍一下&#xff0c;RSA算法是现代密码学的基石之一&#xff0c;广泛应用与安全通信、数据加密和身份验证等领域。 RSA加密是一种非对称加密算法&#xff0c;由罗…
阅读更多...
html 图片转svg 并使用svg路径来裁剪html元素

html 图片转svg 并使用svg路径来裁剪html元素

1.png转svg 工具地址: Vectorizer – 免费图像矢量化 打开svg图片,复制其中的path中的d标签的路径 查看生成的svg路径是否正确 在线SVG路径预览工具 - UU在线工具 2.在html中使用svg路径 <svg xmlns"http://www.w3.org/2000/svg" width"318px" height…
阅读更多...
哋它亢SEO技术分析：如何提升网站在搜索引擎中的可见性

哋它亢SEO技术分析：如何提升网站在搜索引擎中的可见性

文章目录 哋它亢SEO技术分析&#xff1a;如何提升网站在搜索引擎中的可见性网站的基本情况SEO优化分析与建议1. 元数据优化2. 关键词优化3. URL结构4. 图像优化5. 移动端优化6. 网站速度7. 结构化数据&#xff08;Schema Markup&#xff09;8. 内链与外链9. 社交分享 哋它亢SEO…
阅读更多...
Liunx-Ubuntu22.04.1系统下配置Anaconda+pycharm+pytorch-gpu环境配置

Liunx-Ubuntu22.04.1系统下配置Anaconda+pycharm+pytorch-gpu环境配置

这里写自定义目录标题 Liunx-Ubuntu22.04.1系统下配置Anacondapycharmpytorch-gpu环境配置一、Anaconda3配置1.Anaconda安装2.Anaconda更新3.Anaconda删除 二、pycharm配置1.pycharm安装 三、pytorch配置 Liunx-Ubuntu22.04.1系统下配置Anacondapycharmpytorch-gpu环境配置 一…
阅读更多...
视觉SLAM--经典视觉SLAM框架

视觉SLAM--经典视觉SLAM框架

整个视觉SLAM流程主要包括以下步骤&#xff1a; 1、传感器信息读取&#xff1a;在视觉SLAM中主要为相机图像信息的读取和预处理。 2、前端视觉里程计&#xff1a;估算相邻图像间相机的运动&#xff0c;以及局部地图的样子。 3、后端&#xff08;非线性&#xff09;优化&#…
阅读更多...
3、C语言基本数据类型关键字

3、C语言基本数据类型关键字

本章学习目标&#xff1a; 1、认识存储单位&#xff1a;位bit和字节Byte 2、根据不同的应用场景选择符合需求的数据类型关键字,了解关键字的表示数据范围 1、内存单位 一、位 内存中的数据无论是文本、图像、音频还是视频&#xff0c;都是以位的形式进行存储的。 位是二进制…
阅读更多...
Mac os 系统上如何开启远程登录的 ssh 22 端口

Mac os 系统上如何开启远程登录的 ssh 22 端口

macOS 允许使用 SSH 连接&#xff0c;但为了安全起见&#xff0c;需要手动启动 SSH 服务&#xff0c;有两种方法可以激活远程登录。 方法一&#xff1a;界面化操作 1. 打开“系统偏好设置”&#xff0c;点击屏幕左上角的 Apple 图标&#xff0c;然后选择 系统偏好设置。 2. …
阅读更多...
利用Python爬虫获取淘宝店铺详情

利用Python爬虫获取淘宝店铺详情

在数字化时代&#xff0c;数据已成为企业最宝贵的资产之一。对于电商平台&#xff0c;尤其是淘宝这样的大型电商平台&#xff0c;店铺详情数据的获取和分析对于商家来说至关重要。它不仅可以帮助商家了解市场趋势&#xff0c;还可以优化营销策略&#xff0c;提升销售业绩。本文…
阅读更多...
RabbitMQ教程：发布/订阅模式（Publish/Subscribe）（三）

RabbitMQ教程：发布/订阅模式（Publish/Subscribe）（三）

文章目录 RabbitMQ教程&#xff1a;发布/订阅模式&#xff08;Publish/Subscribe&#xff09;&#xff08;三&#xff09;一、引言二、简介三、准备工作3.1 说明3.2 生成项目 四、实战4.1 交换机&#xff08;Exchanges&#xff09;4.2 临时队列&#xff08;Temporary Queues&am…
阅读更多...
对PolyMarket的突袭

对PolyMarket的突袭

一天清晨六点&#xff0c;美国联邦调查局的探员冲进了纽约市的一间公寓。这间公寓的主人是26岁的Shane Copeland&#xff0c;一个有着凌乱头发的年轻人&#xff0c;也是一个加密货币狂热者。他运营着一个名为PolyMarket的网站——一个允许用户YZ全球事件结果的平台&#xff0c;…
阅读更多...
DataStream编程模型之数据源、数据转换、数据输出

DataStream编程模型之数据源、数据转换、数据输出

Flink之DataStream数据源、数据转换、数据输出&#xff08;scala&#xff09; 0.前言–数据源 在进行数据转换之前&#xff0c;需要进行数据读取。 数据读取分为4大部分&#xff1a; &#xff08;1&#xff09;内置数据源&#xff1b; 又分为文件数据源&#xff1b; socket…
阅读更多...
Django5 2024全栈开发指南（三）：数据库模型与ORM操作

Django5 2024全栈开发指南（三）：数据库模型与ORM操作

目录 一、模型的定义二、数据迁移三、数据表关系四、数据表操作4.1 Shell工具4.2 数据新增4.3 数据修改4.4 数据删除4.5 数据查询4.6 多表查询4.7 执行SQL语句4.8 数据库事务 Django 对各种数据库提供了很好的支持&#xff0c;包括 PostgreSQL、MySQL、SQLite 和 Oracle&#x…
阅读更多...
ASP.NET Core Webapi 返回数据的三种方式

ASP.NET Core Webapi 返回数据的三种方式

ASP.NET Core为Web API控制器方法返回类型提供了如下几个选择&#xff1a; Specific type IActionResult ActionResult<T> 1. 返回指定类型&#xff08;Specific type&#xff09; 最简单的API会返回原生的或者复杂的数据类型&#xff08;比如&#xff0c;string 或者…
阅读更多...
网关在能源物联网中扮演了什么角色？

网关在能源物联网中扮演了什么角色？

随着通信、物联网、云平台等技术的飞速发展&#xff0c;越来越多能源用户希望借助先进的管理手段&#xff0c;对能源进行分布式监测、集中管理&#xff0c;构建能源物联网。准确的分布式监测和集中管理有助于制定更科学合理的节能减排计划。企业或能源使用单位可以依据能源物联…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023