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

图片的多宫格布局

HarmonyOS
2024-05-26 11:32:42
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
morning_dxm

本文主要介绍关于图片的多宫格布局,在我们日常生活中,经常会刷微博和朋友圈,对于这两个APP中发布图片分为两种,一种是发布单张图片,另一种就是发布多张图片,这时候就需要采用多宫格的布局方式。

使用的核心API

Grid

GridItem

核心代码解释

1.使用Grid的网格布局,将定义好的数组ForEach遍历出来。

2.通过判断条件,判断Index是否恒等于8。

  • 当Index恒等于8时,在GridItem布局中嵌套stack布局,先展示Image组件,当数组长度大于9时在图片上显示+${this.dataSource.length - 9}的Text组件。
  • 当Index不等于8时,那么GridItem的布局中直接展示Image组件。

3.调用定义好的布局multiGrid,新建数组,使用数字1进行填充,后返回一个新的数组。

@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%') 
  } 
}

适配的版本信息

  • IDE:DevEco    Studio 4.0.1.501
  • SDK:HarmoneyOS    4.0.0.8
分享
微博
QQ
微信
回复
2024-05-27 11:42:54
相关问题
使用Promise实现一种串行调用方式
431浏览 • 1回复 待解决
图片都有哪些布局
393浏览 • 1回复 待解决
PolarDB 集群连接地址包括哪两种
1869浏览 • 1回复 待解决
js获取canvas对象两种方式有啥不同?
6240浏览 • 1回复 待解决
鸿蒙 如何实现渐变圆形图片
11111浏览 • 2回复 已解决