HarmonyOS 鸿蒙Next Grid布局实现

发布于 1周前 作者 h691938207 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Grid布局实现 目前有个需求：

grid高度（1行）宽度固定、横向排列，当item数量小于5时item宽度按照数量均分，当item数量大于5时使用指定宽度横向滚动。麻烦帮忙看一下怎么实现？谢谢！

Harmonyos Next教程
2 回复

参考代码：

import { display } from '@kit.ArkUI'

@Entry
@Component
struct Page {
  @State screenWidth:number = 0
  @State arr:Array<number> = [0,1]

  aboutToAppear(): void {
    this.screenWidth = px2vp(display.getDefaultDisplaySync().width)
  }

  getItemWidth():number {
    if (this.arr.length > 5) {
      return 100
    } else{
      return (this.screenWidth - (this.arr.length - 1)*10)/this.arr.length
    }
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.arr,(num:number)=>{
          GridItem(){
            Column(){
              Text(`${num}`)
            }
          }
          .backgroundColor(Color.Red)
          .width(this.getItemWidth())
          .height(100)
        })
      }
      .rowsTemplate('1fr')
      .height(100)
      .columnsGap(10)
      .width('100%')
      .backgroundColor('#fafafa')
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next Grid布局实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中实现Next Grid布局，可以通过使用ArkUI框架中的JS或ETS（Enhanced TypeScript）语言进行UI组件开发。Next Grid布局主要用于在界面中按照网格形式排列子组件。

具体实现步骤如下：

  1. 引入必要的模块：在ETS文件中，确保引入了UI组件和布局相关的模块。

  2. 定义Grid容器：使用<Grid>组件作为容器，该组件允许你指定列数和行高（如果需要）。例如，<Grid columns="3">表示网格将有三列。

  3. 添加子组件：在<Grid>容器内部，添加需要展示的子组件，如<Text>、<Image>等。这些子组件将自动按照网格布局进行排列。

  4. 设置子组件样式：可以通过样式（Style）设置子组件的大小、边距等属性，以确保它们在网格中正确显示。

  5. 响应式布局：利用ArkUI提供的响应式布局特性，可以根据屏幕尺寸和方向自动调整网格布局。

示例代码（ETS）：

@Entry
@Component
struct GridDemo {
  build() {
    Grid({ columns: 3 }) {
      ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], item => {
        Text(`${item}`)
          .fontSize(16)
          .textAlign(TextAlign.Center)
          .padding(10)
          .backgroundColor(Color.Blue)
          .width('100%')  // 占据整列宽度
      })
    }
  }
}

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部