#鸿蒙通关秘籍#如何实现图片在不同个数下的布局效果？

使用Flex组件实现图片在不同个数情况下的布局效果，可以通过以下步骤：

1. 导入相关的HarmonyOS开发框架。

2. 在自定义组件的回调函数中，根据传入的图片数量来确定布局方式。如果传入的列数col <= 0，则使用默认布局策略；如果传入的列数col > 0，则使用自定义布局策略。

   aboutToAppear(){
     this.arraySize = this.imageSource.length
     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.imageAspectRatio = IMAGE_ASPECT_RATIO_0
         this.imageFit = ImageFit.Contain
         this.imageWidth = '60%'
       }
       else if (this.arraySize === IMAGE_SET_SIZE_4) {
         this.col = COLUMNS_2
         this.flexWidth = '50%'
         this.imageWidth = `calc((100% - ${this.imageSpacing}vp ) / 2)`
       }
       else {
         this.col = COLUMNS_3
         this.imageWidth = `calc((100% - ${this.imageSpacing * COLUMNS_2}vp ) / 3)`
       }
     }
     else {
       this.row = Math.ceil(this.arraySize / this.col)
       this.imageWidth = `calc((100% - ${this.imageSpacing * (this.col - 1)}vp ) / ${this.col})`
     }
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.
   22.
   23.
   24.
   25.
   26.

   复制

3. 利用Flex布局组件的自适应能力，结合不同数量图片时的参数设置，来实现多种布局效果。

   build(){
     Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Start }){
       ForEach(this.imageSource.slice(0, this.arraySize), (item: string | Resource, idx: number) => {
         Image(item)
           .attributeModifier(this.modifier)
           .autoResize(true)
           .objectFit(this.imageFit)
           .aspectRatio(this.imageAspectRatio)
           .width(this.imageWidth)
           .margin(
             {
               bottom: (idx + 1) > ((this.row - 1) * this.col) ? 0 : this.imageSpacing,
               right: (idx + 1) % this.col === 0 ? 0 : this.imageSpacing
             }
           )
       })
     }
     .width(this.flexWidth)
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.

   复制