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

原创

xq9527 2023-12-15 10:19:14 ©著作权

文章标签 harmonyos ui 华为 GAP flutter 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者xq9527的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

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

效果图：

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

鸿蒙 Ark Ui 零基础教程第三集 grid 组件的使用_华为_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%';


}