图片的多宫格布局，对于这两个APP中发布图片分为两种，一种是发布单张图片，另一种就是发布多张图片

@Component 
struct multiGrid { 
  private dataSource: (string | Resource)[] = [] 
  @State columnSpace: number = 4 
  @State rowSpace: number = 4 
  @State columnsTemplate: string = '1fr 1fr 1fr' 
  @State rowsTemplate: string = '1fr 1fr 1fr' 
 
  build() { 
    Grid() { 
      ForEach(this.dataSource.slice(0, 9), (item: string | Resource, index: number) => { 
        if (index === 8) { 
          GridItem() { 
            Stack() { 
              Image(item) 
                .height(100) 
                .width(100) 
                .objectFit(ImageFit.Contain) 
              if (this.dataSource.length > 9) 
                Text(`+${this.dataSource.length - 9}`) 
                  .fontSize(45) 
                  .fontColor('#ff5b0606') 
            } 
          } 
        } else { 
          GridItem() { 
            Image(item) 
              .height(100) 
              .width(100) 
              .objectFit(ImageFit.Contain) 
          } 
        } 
      }) 
    } 
    .width('100%') 
    //指定当前组件的宽高比，aspectRatio = width/height 
    .aspectRatio(1) 
    .padding({ left: this.columnSpace, right: this.rowSpace }) 
    .columnsGap(this.columnSpace) 
    //设置当前网格布局列的数量或最小列宽值，不设置时默认1列。 
    .columnsTemplate(this.columnsTemplate) 
    //设置当前网格布局行的数量或最小行高值，不设置时默认1行。 
    .rowsTemplate(this.rowsTemplate) 
 
  } 
} 
 
@Entry 
@Component 
struct Page { 
  @State message: string = 'Hello World' 
 
  build() { 
    Scroll() { 
      Column() { 
        multiGrid({ dataSource: new Array(3).fill(1).map(i => $r('app.media.icon')) }) 
        Text('1111') 
        multiGrid({ dataSource: new Array(4).fill(1).map(i => $r('app.media.icon')) }) 
        Text('1111') 
        multiGrid({ dataSource: new Array(5).fill(1).map(i => $r('app.media.icon')) }) 
        Text('1111') 
        multiGrid({ dataSource: new Array(10).fill(1).map(i => $r('app.media.icon')) }) 
      }.alignItems(HorizontalAlign.Start) 
    } 
    .padding(20) 
    .width('100%') 
    .height('100%') 
  } 
}