鸿蒙API13开发【滚动与滑动GridItem】ArkTS组件

于 2025-01-08 20:39:45 发布
阅读量678 收藏 22
点赞数 30
分类专栏： 鸿蒙开发 文章标签： harmonyos 华为 鸿蒙 鸿蒙系统 组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70748845/article/details/145016703
版权

网格容器中单项内容容器。

说明

  • 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  • 仅支持作为[Grid]组件的子组件使用。
  • 当GridItem配合LazyForEach使用时，GridItem子组件在GridItem创建时创建。配合if/else、ForEach使用时，或父组件为Grid时，GridItem子组件在GridItem布局时创建。

子组件

可以包含单个子组件。

接口

GridItem(value?: GridItemOptions)

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value11+[GridItemOptions]否为GridItem提供可选参数, 该对象内含有[GridItemStyle]枚举类型的style参数。

属性

rowStart

rowStart(value: number)

设置当前元素起始行号。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是当前元素起始行号。需要指定GridItem起始行列号和所占行列数的场景推荐使用[Grid的layoutOptions参数]

rowEnd

rowEnd(value: number)

设置当前元素终点行号。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是当前元素终点行号。需要指定GridItem起始行列号和所占行列数的场景推荐使用[Grid的layoutOptions参数]

columnStart

columnStart(value: number)

设置当前元素起始列号。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是当前元素起始列号。需要指定GridItem起始行列号和所占行列数的场景推荐使用[Grid的layoutOptions参数]

columnEnd

columnEnd(value: number)

设置当前元素终点列号。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是当前元素终点列号。需要指定GridItem起始行列号和所占行列数的场景推荐使用[Grid的layoutOptions参数]

起始行号、终点行号、起始列号、终点列号生效规则如下：

rowStart/rowEnd合理取值范围为0总行数-1，columnStart/columnEnd合理取值范围为0总列数-1。

如果设置了rowStart/rowEnd/columnStart/columnEnd，GridItem会占据指定的行数(rowEnd-rowStart+1)或列数(columnEnd-columnStart+1)。

只有在设置columnTemplate和rowTemplate的Grid中，设置合理的rowStart/rowEnd/columnStart/columnEnd四个属性的GridItem才能按照指定的行列号布局。

在设置columnTemplate和rowTemplate的Grid中，单独设置行号rowStart/rowEnd或列号columnStart/columnEnd的GridItem会按照一行一列进行布局。

在只设置columnTemplate的Grid中设置列号columnStart/columnEnd的GridItem按照列数布局。在该区域位置存在GridItem布局，则直接换行进行放置。

在只设置rowTemplate的Grid中设置行号rowStart/rowEnd的GridItem按照行数布局。在该区域位置存在GridItem布局，则直接换列进行放置。

在只设置columnTemplate的Grid中，在GridItem上设置了不合理的值，GridItem按照一行一列进行布局。

columnTemplate和rowTemplate都不设置的Grid中GridItem的行列号属性无效。

forceRebuild(deprecated)

forceRebuild(value: boolean)

设置在触发组件build时是否重新创建此节点。GridItem会根据自身属性和子组件变化自行决定是否需要重新创建，无需设置。

从API version9开始废弃。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是在触发组件build时是否重新创建此节点。默认值：false

selectable8+

selectable(value: boolean)

设置当前GridItem元素是否可以被鼠标框选。外层Grid容器的鼠标框选开启时，GridItem的框选才生效。

该属性需要在设置[选中态样式]前使用才能生效选中态样式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是当前GridItem元素是否可以被鼠标框选。默认值：true

selected10+

selected(value: boolean)

设置当前GridItem选中状态。该属性支持[$$]双向绑定变量。

该属性需要在设置[选中态样式]前使用才能生效选中态样式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是当前GridItem选中状态。默认值：false

GridItemOptions11+对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
style[GridItemStyle]否设置GridItem样式。默认值: GridItemStyle.NONE设置为GridItemStyle.NONE时无样式。设置为GridItemStyle.PLAIN时，显示Hover、Press态样式。

GridItemStyle11+枚举说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称值说明
NONE0无样式。
PLAIN1显示Hover、Press态样式。

说明

GridItem焦点态样式设置：Grid组件需要设置4vp规格以上的内边距，用于显示GridItem的焦点框。

事件

onSelect8+

onSelect(event: (isSelected: boolean) => void)

GridItem元素被鼠标框选的状态改变时触发回调。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
isSelectedboolean是进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。

示例

示例1

// xxx.ets
@Entry
@Component
struct GridItemExample {
  @State numbers: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]

  build() {
    Column() {
      Grid() {
        GridItem() {
          Text('4')
            .fontSize(16)
            .backgroundColor(0xFAEEE0)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }.rowStart(1).rowEnd(2).columnStart(1).columnEnd(2) // 同时设置合理的行列号

        ForEach(this.numbers, (item: string) => {
          GridItem() {
            Text(item)
              .fontSize(16)
              .backgroundColor(0xF9CF93)
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
        }, (item: string) => item)

        GridItem() {
          Text('5')
            .fontSize(16)
            .backgroundColor(0xDBD0C0)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }.columnStart(1).columnEnd(4) // 只设置列号，不会从第1列开始布局
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
      .width('90%').height(300)
    }.width('100%').margin({ top: 5 })
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

示例2

使用GridItemOptions

// xxx.ets
@Entry
@Component
struct GridItemExample {
  @State numbers: String[] = ['0', '1', '2']

  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.numbers, (day: string) => {
          ForEach(this.numbers, (day: string) => {
            GridItem({style:GridItemStyle.NONE}) {
              Text(day)
                .fontSize(16)
                .width('100%')
                .height('100%')
                .textAlign(TextAlign.Center)
                .focusable(true)
            }
            .backgroundColor(0xF9CF93)
          }, (day: string) => day)
        }, (day: string) => day)
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .columnsGap(4)
      .rowsGap(4)
      .width('60%')
      .backgroundColor(0xFAEEE0)
      .height(150)
      .padding('4vp')

      Grid() {
        ForEach(this.numbers, (day: string) => {
          ForEach(this.numbers, (day: string) => {
            GridItem({style:GridItemStyle.PLAIN}) {
              Text(day)
                .fontSize(16)
                .width('100%')
                .height('100%')
                .textAlign(TextAlign.Center)
                .focusable(true)
            }
            .backgroundColor(0xF9CF93)
          }, (day: string) => day)
        }, (day: string) => day)
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .columnsGap(4)
      .rowsGap(4)
      .width('60%')
      .backgroundColor(0xFAEEE0)
      .height(150)
      .padding('4vp')
    }.width('100%').margin({ top: 5 })
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

在这里插入图片描述

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，帮助大家在技术的道路上更进一步。

  • 《鸿蒙 (OpenHarmony)开发学习视频》
  • 《鸿蒙生态应用开发V2.0白皮书》
  • 《鸿蒙 (OpenHarmony)开发基础到实战手册》
  • OpenHarmony北向、南向开发环境搭建
  • 《鸿蒙开发基础》
  • 《鸿蒙开发进阶》
  • 《鸿蒙开发实战》

在这里插入图片描述

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！ 自↓↓↓拿
1

鸿蒙ArkTS容器组件：【GridItem】
2401_82772199的博客
07-08 1188
网格容器中单项内容容器。点击或者复制转到。
鸿蒙5.0版开发：ArkTS容器组件（Badge）
m0_69424697的博客
09-23 826
可以附加在单个组件上用于信息标记的容器组件。
鸿蒙ArkTS中的布局容器组件（Scroll、List、Tabs）
最新发布
dawn0718的专栏
11-05 2291
记录学习鸿蒙ArkTS开发中的布局组件Scroll、List、Tabs。
写给初学者的 HarmonyOS 教程 -- ArkTS 容器组件（List）
Fucking Android & Compose & Harmony & Spring Boot ...
11-27 6706
使用列表可以轻松高效地显示结构化、可滚动的信息。通过在 List 组件中按垂直或者水平方向线性排列子组件 ListItemGroup 或 ListItem，为列表中的行或列提供单个视图，或使用ForEach 迭代一组行或列，或混合任意数量的单个视图和 ForEach 结构，构建一个列表。
OpenHarmony实战开发-创建网格 (Grid/GridItem)
m0_70749039的博客
04-26 1011
网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。
鸿蒙ArkTS容器组件：【Grid】
2401_82772199的博客
07-08 1218
网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。点击或者复制转到。该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Grid）
m0_64420071的博客
03-15 2173
ArkTS声明式开发（容器组件：Grid）
鸿蒙5.0版开发：ArkTS组件-Grid
m0_69424697的博客
11-05 936
网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
鸿蒙5.0版开发：ArkTS组件-Scroll
m0_69424697的博客
11-05 880
可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
鸿蒙ArkTS容器组件：【Scroll】
2401_82772199的博客
07-12 1660
可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。点击或者复制转到。
鸿蒙ArkTS容器组件：【TabContent】
2401_82772199的博客
07-15 1782
仅在Tabs中使用，对应一个切换页签的内容视图。该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
OpenHarmony开发实战：常用组件与布局（ArkTS）
shudaoshanQAQ的博客
04-07 2016
在本篇文章中，您将通过一个简单的购物社交应用示例，学习如何使用常用的基础组件和容器组件。
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：ListItem）
m0_64420071的博客
03-15 1763
ArkTS声明式开发（容器组件：ListItem）
鸿蒙开发笔记(十八): 网格 Grid/GridItem,轮播 Swiper
Waruler的博客
01-22 2037
网格 Grid/GridItem,轮播 Swiper
ArkTS的Grid与GridItem（网格容器与网格容器中单项内容容器）
Selma003的博客
12-21 1332
ArkTS的Grid与GridItem（网格容器与网格容器中单项内容容器）
openharmony容器组件之GridItem
lplj717的博客
08-09 510
GridItem：网格容器中单项内容容器
鸿蒙5.0版开发：ArkTS组件-GridItem
m0_69424697的博客
11-05 962
网格容器中单项内容容器。
网上国网App启动鸿蒙原生应用开发，鸿蒙开发前景怎么样？
1
03-26 1395
截至目前，网上国网注册用户数已突破3.2亿，成为央企中用户信赖度高、黏性强、规模大的线上服务平台，以周到、便捷的数字化服务满足用户全场景需求。路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入理解鸿蒙开发原理！
【愚公系列】2023年12月 HarmonyOS教学课程 012-ArkUI组件（Grid/GridItem）
热门推荐
时光隧道
12-04 6万+
网格布局是一种新型的布局方式，它按照网格来划分页面，通过列和行来定义网格，使得页面的布局更加灵活、简洁、易于维护。网格布局能够将页面分成多个单元格，可以在这些单元格中布置各种元素，例如文本、图片、媒体等，从而实现页面的排版。网格布局支持自适应布局，能够轻松地实现响应式设计，支持多终端设备的显示。ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值