鸿蒙(HarmonyOS)应用开发实战——图片九宫格封装案例

本文链接：https://blog.youkuaiyun.com/CTrup/article/details/142601773

往期知识点整理

介绍

本示例介绍使用( Flex )
组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。该场景多用于社交类应用。

效果图预览

使用说明

默认布局情况下，传入图片资源imageSource（类型为Resource[]），图片会按照个数进行相应的布局。
自定义布局情况下，传入图片资源imageSource（类型为Resource[]）和自定义列数col（类型为number）。
通过指定flexWidth（类型为string）参数，可调整整个图片布局的宽度。
通过指定modifier（类型需继承AttributeModifier ）参数，可以指定image的相关参数，modifier具体使用参考动态属性设置。

默认布局策略：

1张图片时，图片显示效果的长宽比保持不变。
2-3，5-9张图片时，图片按九宫格的形式布局，图片裁切为正方形，且图片大小一致.
4张图片时，图片按四宫格布局（两行两列），图片大小同九宫格。

实现思路

1.在自定义组件创建的回调里根据传入的col值决定布局方式，若参数col<=0为默认布局，若参数col>0为自定义布局（图片布局的列数=col），
此部分逻辑会根据传入参数的不同走不同的逻辑。

aboutToAppear(){
   
  this.arraySize = this.imageSource.length
  // 未传入col值时所走的逻辑，此时图片按默认方式布局
  if (this.col <= COLUMNS_0) {
   
    this.arraySize = Math.min(this.imageSource.length, IMAGE_SET_SIZE_9)
    this.row = Math.ceil(this.arraySize / COLUMNS_3)

    // 不同数量的图片对应不同的参数、布局
    if (this.arraySize === IMAGE_SET_SIZE_1) {
   
      this.col = COLUMNS_1
      this.image