鸿蒙 Ark Ui 零基础教程第三集 grid 组件的使用-摩杜云开发者社区

前言

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

效果图：

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

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

具体实现

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

项目地址：

码云：https://gitee.com/qiuyu123/hmsgriddemo

前言