鸿蒙 Ark Ui 零基础教程第三集 gird 组件的使用

前言

各位同学有段时间没有见面 因为一直很忙所以就没有去更新博客。最近有在学习这个鸿蒙的ark ui开发 因为鸿蒙不是发布了一个鸿蒙next的测试版本 明年会启动纯血鸿蒙应用 所以我就想提前给大家写一些博客文章

效果图：

具体实现

我们在鸿蒙的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 去对比查看那就明白了 这里就不展开讲了 最后呢 希望我都文章能帮助到各位同学工作和学习 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 谢谢

项目地址 ：

码云 ：gitee.com/qiuyu123/hm...