HarmonyOS ArkUI滚动类组件-Grid、GridItem

最新推荐文章于 2024-07-12 15:03:11 发布

码中之牛

最新推荐文章于 2024-07-12 15:03:11 发布

阅读量724

点赞数 4

分类专栏： OpenHarmony 移动开发 Harmony OS 文章标签： harmonyos 算法鸿蒙开发 OpenHarmony 移动开发前端开发

本文链接：https://blog.csdn.net/weixin_61845324/article/details/138084116

版权

移动开发同时被 3 个专栏收录

432 篇文章 13 订阅

订阅专栏

Harmony OS

314 篇文章 8 订阅

订阅专栏

OpenHarmony

213 篇文章 2 订阅

订阅专栏

Grid 表示网格布局，它可以设置行数和列数，它和 List 类似，子组件只能是 GridItem 。

Grid定义介绍

interface GridInterface {
  (scroller?: Scroller): GridAttribute;
}

scroller：绑定一个滚动控制器，控制 Grid 的滚动。

简单样例如下所示：

Grid() {
  ForEach(this.columns, (item) => { // ForEach语法，循环创建GridItem
    GridItem() {                    // 子组件只能是GirdItem
      Text('Text: ' + item)
        .fontSize(20)
        .backgroundColor('#aabbcc')
        .width('100%')
        .height(70)
    }
  })
}
.columnsTemplate("1fr 1fr 1fr")     // 设置Grid为3列，并且均分
.columnsGap(10)                     // 设置列间距为10vp
.rowsGap(10)                        // 设置行间距为10vp
.width('100%')
.height(170)
.backgroundColor(Color.Pink)

Grid属性介绍

declare class GridAttribute<T> extends CommonMethod<T> {
  columnsTemplate(value: string): T;
  rowsTemplate(value: string): T;
  columnsGap(value: number | string | Resource): T;
  rowsGap(value: number | string | Resource): T;
  cachedCount(value: number): T;
}

columnsTemplate：设置列数，默认值为 1fr ，表示 1 列，参数详解如下：
- 均分列表
  
  1fr 1fr 1fr 1fr 1fr：表示设置 Grid 为 5 列，并把 Grid 宽度均分为 5 份，每列宽度占用 1 份。
- 不均分列表
  
  1fr 2fr 3fr 1fr 1fr：表示设置 Grid 为 8 列，并把 Grid 宽度均分为 8 份，第一列占用 1 份，第二列占用 2 份，第三列占用 3 份，后两列每列占 1 份。
rowsTemplate：设置列数，默认值为 1fr ，表示 1 行，不设置时默认为 1 行，参数说明和 columnsTemplate 一致。
columnsGap：设置列与列的间距。
rowsGap：设置行与行的间距。
cachedCount：设置 Grid 缓存数量。

Grid事件介绍

declare class GridAttribute<T> extends CommonMethod<T> {
  onScrollIndex(event: (first: number) => void): T;
}

onScrollIndex：当前列表显示的起始位置 item 发生变化时触发该回调。

#6.3.3：GridItem定义介绍

interface GridItemInterface {
  (): GridItemAttribute;
}

GridItem 为无参定义

GridItem属性介绍

declare class GridItemAttribute<T> extends CommonMethod<T> {
  rowStart(value: number): T;
  rowEnd(value: number): T;
  columnStart(value: number): T;
  columnEnd(value: number): T;
  forceRebuild(value: boolean): T;
}

rowStart：设置当前 item 起始行号。
rowEnd：设置当前 item 结束行号。
columnStart：设置当前 item 起始列号。
columnEnd：设置当前 item 结束列号。
forceRebuild：用于设置在触发组件 build 时是否重新创建此节点。

简单样例如下所示：

Grid() {
  ForEach(this.columns, (item, index) => {
    GridItem() {
      Text('Text: ' + item)
        .fontSize(20)
        .backgroundColor('#aabbcc')
        .width('100%')
        .height(70)
    }
    .columnStart(index == 0 ? 0 : 0) // 设置第一个Item布局从第一列开始
    .columnEnd(index == 0 ? 2 : 0)   // 设置第一个Item布局从第三列结束，也即是占满整行
  })
}
.columnsTemplate("1fr 1fr 1fr")      // 设置3列，每列均分
.columnsGap(10)                      // 设置列间距
.rowsGap(10)                         // 设置行间距
.width('100%')
.height(170)
.backgroundColor(Color.Pink)

样例中设置了 Grid 为 3 列，并且设置了第 1 个 GridItem 的列从 0 开始到 2 结束，所以 GridItem 就占满整行布局。

完整样例演示

@Entry @Component struct ComponentTest {

  private screenWidth: number = px2vp(1080); // 屏幕宽度
  private rowSpace: number = 10;             // 行间距
  private rowCount: number = 5;              // 行数
  private columnSpace: number = 15;          // 列间距
  private columnCount: number = 4;           // 列数
  private itemSize: number = (this.screenWidth - (this.columnSpace * (this.columnCount + 1))) / this.columnCount;														 // Item尺寸

  private items: number[] = [];

  build() {
    Column() {

      Text()
        .width('100%')
        .height('100%')
        .layoutWeight(1)
        .backgroundColor(Color.Pink)

      Grid() {
        ForEach(this.items, (item, index) => { // ForEach语法
          GridItem() {
            Text('Text:' + index)
          }
          .width('100%')
          .height('100%')
          .backgroundColor('#bbccdd')
          .rowStart(index == 15 ? 3 : 0)       // 第16个GridItem占用2行
          .rowEnd(index == 15 ? 4 : 0)         // 第16个GridItem占用2行
          .columnStart(index == 16 ? 0 : 0)    // 第17个GridItem占用2列
          .columnEnd((index == 16 ? 1 : 0))    // 第17个GridItem占用2列
        })
      }
      .padding({left: this.columnSpace, right: this.columnSpace})
      .columnsTemplate("1fr 1fr 1fr 1fr")      // Grid宽度均分成4份
      .rowsTemplate("1fr 1fr 1fr 1fr 1fr")     // Grid高度均分成5份
      .rowsGap(this.rowSpace)                  // 设置行间距
      .columnsGap(this.columnSpace)            // 设置列间距
      .width('100%')
      .height(this.itemSize * this.rowCount + this.rowSpace * (this.rowCount - 1))
    }
    .width('100%')
    .height('100%')
  }

  private aboutToAppear() {
    for(var i = 0; i < 18; i++) {
      this.items[i] = i;
    }
  }
}

样例运行结果如下图所示：

码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线。大家可以进行参考学习：https://qr21.cn/FV7h05

①全方位，更合理的学习路径：
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入理解鸿蒙开发原理！

②多层次，更多的鸿蒙原生应用：
路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。

③实战化，更贴合企业需求的技术点：
学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05