一、Grid/GridItem

1.概述

网格布局是一种新型的布局方式,它按照网格来划分页面,通过列和行来定义网格,使得页面的布局更加灵活、简洁、易于维护。网格布局能够将页面分成多个单元格,可以在这些单元格中布置各种元素,例如文本、图片、媒体等,从而实现页面的排版。网格布局支持自适应布局,能够轻松地实现响应式设计,支持多终端设备的显示。

ArkUI提供了Grid容器组件和子组件GridItem,用于构建网格布局。Grid用于设置网格布局相关参数,GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。

2.布局与约束

1、Grid与GridItem组件关系

Grid的子组件必须是GridItem组件

2、网格布局

Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列,同时提供了垂直和水平布局能力

3.设置排列方式

3.1 设置行列数量与占比

通过设置行列数量与尺寸占比,可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性,用于设置网格布局的行列数量与尺寸占比。 rowsTemplate和columnsTemplate属性值是一个由多个空格和’数字+fr’间隔拼接的字符串,其中fr的个数即为网格布局的行或列数。数字表示该行或列在网格布局宽度上的占比,最终决定该行或列的宽度。

Grid() {
...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')

3.2 设置子组件所占行列数

1、0的设置

GridItem() {
Text(key)
...
}
.columnStart(1)
.columnEnd(2)

2、=号的设置

GridItem() {
Text(key)
...
}
.rowStart(5)
.rowEnd(6)

3.3 设置主轴方向

Grid() {
...
}
.maxCount(3)
.layoutDirection(GridDirection.Row)

4.案例

4.1 在网格布局中显示数据

@Entry
@Component
struct Index {
build() {
Grid() {
GridItem() {
Text('会议')
} GridItem() {
Text('签到')
} GridItem() {
Text('投票')
} GridItem() {
Text('打印')
}
}
.rowsTemplate('1fr 1fr')
.columnsTemplate('1fr 1fr')
}
}

4.2 设置行列间距

Grid() {
...
}
.columnsGap(10)
.rowsGap(15)

4.3 构建可滚动的网格布局(官方)

@Component
struct Shopping {
@State services: Array<string> = ['直播', '进口', ...]
... build() {
Column({ space: 5 }) {
Grid() {
ForEach(this.services, (service: string, index) => {
GridItem() {
...
}
.width('25%')
}, service => service)
}
.rowsTemplate('1fr 1fr') // 只设置rowsTemplate属性,当内容超出Grid区域时,可水平滚动。
.rowsGap(15)
...
}
...
}
}

滑动后

4.4 在网格布局中显示数据(官方)

private scroller: Scroller = new Scroller()
Column({ space: 5 }) {
Grid(this.scroller) {
...
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
... Row({space: 20}) {
Button('上一页')
.onClick(() => {
this.scroller.scrollPage({
next: false
})
}) Button('下一页')
.onClick(() => {
this.scroller.scrollPage({
next: true
})
})
}
}
...

4.5 长网格处理

和长列表类似就不做多说了

Grid() {
LazyForEach(this.dataSource, item => {
GridItem() {
...
}
})
}
.cachedCount(3)

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing,不定期分享原创知识。
  • 更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY

鸿蒙HarmonyOS实战-ArkUI组件(Grid/GridItem)的更多相关文章

  1. 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用

    注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...

  2. Ext JS 6学习文档-第5章-表格组件(grid)

    Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 ...

  3. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  4. 手把手带你体验鸿蒙 harmonyOS

    wNlRGd.png 前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 GIthub 博客 学习导图 image.png 一.为什么要尝鲜 harmonyos? wNlfx ...

  5. 最全华为鸿蒙 HarmonyOS 开发资料汇总

    开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA.常用和自定义组件.用户交互.JS 动画的实现,通过本示例可以基本了解和学习到 JavaS ...

  6. 鸿蒙HarmonyOS应用开发落地实践,Harmony Go 技术沙龙落地北京

    12月26日,华为消费者BG软件部开源中心与51CTO Harmony OS技术社区携手,共同主办了主题为"Harmony OS 应用开发落地实践"的 Harmony Go 技术沙 ...

  7. 鸿蒙开源第三方件组件——轮播组件Banner

    目录: 1.功能展示 2.Sample解析 3.Library解析 4.<鸿蒙开源第三方组件>系列文章合集 前言 基于安卓平台的轮播组件Banner(https://github.com/ ...

  8. 14-Flutter移动电商实战-ADBanner组件的编写

    拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...

  9. 13-Flutter移动电商实战-ADBanner组件的编写

    1.AdBanner组件的编写 我们还是把这部分单独出来,需要说明的是,这个Class你也是可以完全独立成一个dart文件的.代码如下: 广告图片class AdBanner extends Stat ...

  10. iview实战 : 树形组件自定义

    Tree树形组件是 iview 中相对复杂的一个组件. 自定义节点内容 使用强大的 Render 函数可以自定义节点显示内容和交互,比如添加图标,按钮等. ——官方文档 但官方的 example 只有 ...

随机推荐

  1. Doris Fe在Mac上搭建开发环境踩坑记录

    1. 拉取代码到本地 git clone https://github.com/apache/doris.git 2. 参考Doris的文档,但别全信(信了你就上当了) 参考第一篇 https://d ...

  2. 【Android逆向】IDA动态调试JNI_OnLoad 和 .init_array

    由于 JNI_OnLoad 和 .init_array 执行时间很早,so一加载到内存中就执行了,所以动态调试步骤会稍微要麻烦一些 1. 进入手机, 执行./android_server (如果是64 ...

  3. python中如何使两个序列相加不改变内存地址的几种方式

    # 方式1 a = [1,2,3] print(a) # 4551311680 a.extend([4,5]) print(a) # 4551311680 # 方式2 b = [1,2,3] prin ...

  4. django之manage.py migrate无效的问题

    问题 已有的model,迁移之后,想重新设置字段,于是将migrations文件夹中除__init__.py之外其他文件都删掉,并且把数据库中的表删除,再次执行以下步骤python manage.py ...

  5. 钉钉机器人自动关联 GitHub 发送 approval prs

    摘要:用技术来解决 PM 枯燥的 approval pr 工作,本文将阐述如何自动化获取 GitHub Organization 下各个 repo 待 merge 的 pull requests 并通 ...

  6. MongoDB下载和可视化工具NoSQL Manager for MongoDB 软件的下载,连接数据库

    在官网下载MongoDB的版本为4.0.28,之前试了好几个高版本和低版本,都不行,最后,4.0.28版本好了.下载网页:https://www.mongodb.com/try/download/co ...

  7. 关于STM32Fx部分引脚不可以正常输出高低电平的解决办法(不可以正常使用)

    一.概述 在一次电路版测试中,发现stm32的部分引脚不可以正常的输出高低电平,刚开始以为是板子没有焊接好所以导致的经过多次的测试,发现电路版没问题.当时就想不清楚了,后面就问学长,还有实验室的学长一 ...

  8. C++ //排序案列 //描述:将person自定义数据类型进行排序,Person中有属性 姓名,年龄,身高 //排序规则: 按照年龄进行的升序,如果年龄相同按照身高进行降序

    1 //排序案列 2 //描述:将person自定义数据类型进行排序,Person中有属性 姓名,年龄,身高 3 //排序规则: 按照年龄进行的升序,如果年龄相同按照身高进行降序 4 5 #inclu ...

  9. Mutillidae品台上使用sqlmap注入测试

    Mutillidae是一个开放源码的提供安全渗透测试的Web应用程序, Mutillidae可以安装在Linux.windows xp.windows 7等平台上.下载及安装说明文档详见:mutill ...

  10. 摆脱鼠标系列 - vscode - 跳转到下一个文件 Ctrl(右边) + PageDown 这个很常用

    为什么 摆脱鼠标系列 - vscode - 跳转到下一个文件 Ctrl(右边) + PageDown 这个很常用 右边Ctrl 就可以单手操控了 这个频率很高