# hmsgriddemo

**Repository Path**: qiuyu123/hmsgriddemo

## Basic Information

- **Project Name**: hmsgriddemo
- **Description**: 鸿蒙 grid组件使用
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-22
- **Last Updated**: 2023-12-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 前言
各位同学有段时间没有见面 因为一直很忙所以就没有去更新博客。最近有在学习这个鸿蒙的ark ui开发 因为鸿蒙不是发布了一个鸿蒙next的测试版本 明年会启动纯血鸿蒙应用 所以我就想提前给大家写一些博客文章
## 效果图：
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7deb7954a1444ddc8deb616395c7aaac~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=366&h=643&s=419476&e=png&b=fdf9f9)

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6071cd126b534cb6a3aa0fd9a36a9e69~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=348&h=617&s=348546&e=png&b=fdfafa)
## 具体实现
我们在鸿蒙的ark ui 里面列表使用我们的list组件来实现 类似flutter 里面的gridview和安卓里面的gridview 和recyclerview
## 代码实现：
## 准备数据源：
```

import { PictureItem } from '../bean/PictureItem';
/**
 * pictures of newest.
 */
export const PICTURE_LATEST: PictureItem[] = [
{ 'id': '1', 'name': '湖南卫视', 'description': '天天向上', 'image': $r('app.media.tiantianxiangshang') },
{ 'id': '2', 'name': '湖南卫视', 'description': '快乐大本营', 'image': $r('app.media.kuailedabenyin') },
{ 'id': '3', 'name': '江苏卫视', 'description': '非诚勿扰', 'image': $r('app.media.fiechenwurao') },
{ 'id': '4', 'name': '优酷', 'description': '超级演说家', 'image': $r('app.media.chaojiyanshuojia') },
{ 'id': '5', 'name': '天津卫视', 'description': '爱情保卫战', 'image': $r('app.media.aiqingbaoweizhan') },
{ 'id': '6', 'name': '湖南卫视', 'description': '超级女生', 'image': $r('app.media.chaojinvsheng') },
{ 'id': '7', 'name': '湖南卫视', 'description': '快乐男生', 'image': $r('app.media.kuaileinansheng') },
{ 'id': '8', 'name': '浙江卫视', 'description': '王牌对王盘', 'image': $r('app.media.wangpaiduiwangpai') },
{ 'id': '9', 'name': '浙江卫视', 'description': '最强大脑', 'image': $r('app.media.zuiqiangdanao') }

];


/**
 * type of pictures.
 */
export enum PictureType {
  LATEST = 'latest',
}
```
## 定义bean类数据模型

```

/**
 * Picture entity class.
 */
export class PictureItem {
  id: string;
  name: string;
  description: string;
  image: Resource;

  constructor(id: string, name: string, description: string, image: Resource) {
    this.id = id;
    this.name = name;
    this.description = description;
    this.image = image;
  }
}
```
## viewmodel 层处理数据
```

import { PictureItem } from '../bean/PictureItem';
import {  PICTURE_LATEST} from '../constants/PictureConstants';
import { PictureType } from '../constants/PictureConstants';

export function initializePictures(initType: string): Array<PictureItem> {
  let imageDataArray: Array<PictureItem> = [];
  switch (initType) {
    case PictureType.LATEST:
      PICTURE_LATEST.forEach((item) => {
        imageDataArray.push(new PictureItem(item.id, item.name, item.description, item.image));
      })
      break;
    default:
      break;
  }
  return imageDataArray;
}
```

## view 层实现
```

import { PictureItem } from '../bean/PictureItem';
import { CommonConstants } from '../constants/CommonConstant';

/**
 * Picture component.
 */
@Component
export struct PictureView {
  private photos: PictureItem;
  build() {
    Column() {
      Image(this.photos.image).borderRadius(CommonConstants.BORDER_RADIUS)
        .height(CommonConstants.WIDTH_PICTURE)
        .onClick(() => {
        })
      Text(this.photos.name).width(CommonConstants.PAGE_WIDTH)
        .fontSize(CommonConstants.FONT_SIZE_PHOTO_NAME)
        .fontWeight(CommonConstants.FONT_WEIGHT_NORMAL)
        .margin({ top: CommonConstants.TOP_NAME }).align(Alignment.Center)
    }.onClick(()=>{
      console.log("点击事件")
    })
    .height(CommonConstants.FULL_HEIGHT)
  }
}
```
这边使用grid 组件来实现效果   columnsTemplate属性来设置纵向显示几行

```
.columnsTemplate(CommonConstants.THREE_COLUMNS)
```
rowsTemplate 横向显示几列
```
.rowsTemplate(CommonConstants.THREE_ROWS)
```
columnsGap 纵向间隔
```
.columnsGap(CommonConstants.GAP_COLUMNS)
```
.rowsGap 横向间隔
```
.rowsGap(CommonConstants.GAP_COLUMNS)
```
## item 布局实现
```

import { PictureItem } from '../bean/PictureItem';
import { CommonConstants } from '../constants/CommonConstant';

/**
 * Picture component.
 */
@Component
export struct PictureView {
  private photos: PictureItem;
  build() {
    Column() {
      Image(this.photos.image).borderRadius(CommonConstants.BORDER_RADIUS)
        .height(CommonConstants.WIDTH_PICTURE)
        .onClick(() => {
        })
      Text(this.photos.name).width(CommonConstants.PAGE_WIDTH)
        .fontSize(CommonConstants.FONT_SIZE_PHOTO_NAME)
        .fontWeight(CommonConstants.FONT_WEIGHT_NORMAL)
        .margin({ top: CommonConstants.TOP_NAME }).align(Alignment.Center)
    }.onClick(()=>{
      console.log("点击事件")
    })
    .height(CommonConstants.FULL_HEIGHT)
  }
}
```
item里面我们使用 Column 组件来实现上面显示image 下面显示text来实现item的布局
## 宽高常量配置类
```

/**
 * Common constants for all features.
 */
export class CommonConstants {


  /**
   * font size of photo name.
   */
  static readonly FONT_SIZE_PHOTO_NAME = 14;

  /**
   * normal font.
   */
  static readonly FONT_WEIGHT_NORMAL = 500;
  /**
   * border angle.
   */
  static readonly BORDER_RADIUS = 12;



  /**
   * top margin of picture name.
   */
  static readonly TOP_NAME = 8;

  /**
   * maximum height.
   */
  static readonly FULL_HEIGHT = '100%';

  /**
   * width of tab page.
   */
  static readonly PAGE_WIDTH = '94.4%';
  /**
   * sort content width of movie.
   */
  static readonly WIDTH_MOVIE_SORT = '90%';

  /**
   * width of picture.
   */
  static readonly WIDTH_PICTURE = '72%';

  /**
   * bottom margin of grid.
   */
  static readonly MARGIN_BOTTOM_GRID = '4.2%';



  /**
   * number of columns.
   */
  static readonly THREE_COLUMNS = '1fr 1fr 1fr';

  /**
   * number of rows.
   */
  static readonly THREE_ROWS = '1fr 1fr 1fr';

  /**
   * gap of columns.
   */
  static readonly GAP_COLUMNS = '2.2%';


}
```
最后总结 ：
arkui 里面gird 组件和flutter里面的gridview 很像我们主要要注意横向和纵向 设置显示数量即可。我们可以自己去查看效果图1 和效果图2 去对比查看那就明白了 这里就不展开讲了 最后呢 希望我都文章能帮助到各位同学工作和学习 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 谢谢