Pre Merge pull request !436 from zgf/master

Signed-off-by: zgf <zenggaofeng2@h-partners.com>

CHANGELOG.md

@@ -2,7 +2,6 @@
 - Enhance: ImageFit.Auto support adaptive height after component width change
 - Fix bug: call onLoadStart 2 times(import from 3.2.0-rc.0)
 - Change the initial value of the PixelMap component of ImageKnife to ImageContent EMPTY
-- Fix bug: Multiple images failed to load simultaneously, error image not displayed(import from 3.2.0-rc.4)
 
 ## 3.2.0-rc.4
 - Support ICO format images

entry/src/main/ets/pages/MultipleImageCallBack.ets

@@ -12,24 +12,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ImageKnifeComponent } from '@ohos/libraryimageknife';
+import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife';
 import { CommonDataSource } from './model/CommonDataSource'
 
 @Entry
 @Component
 struct MultipleImageCallBack {
   @State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
+  @State componentIndex: number = 0
   @State startIndex: number = 0
   @State successIndex: number = 0
   @State failIndex: number = 0
-  @State cancelIndex: number = 0
+  @State cancelJobIndex: number = 0
+  @State cancelLoadIndex: number = 0
   @State memoryIndex: number = 0
   @State fileCacheIndex: number = 0
   @State netIndex: number = 0
+  @State checkText: string = ''
   private data: Array<string> = []
 
   aboutToAppear(): void {
-    for (let index = 0; index < 30; index++) {
+    for (let index = 0; index < 100; index++) {
       this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
     }
     this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
@@ -37,22 +40,48 @@ struct MultipleImageCallBack {
 
   build() {
     Column() {
-      Column(){
+      Row() {
-        Text('开始回调：' + this.startIndex)
+        Column() {
-        Text('成功回调：' + this.successIndex)
+          Text('图片总数：' + this.componentIndex)
-        Text('失败回调：' + this.failIndex)
+          Text('开始回调：' + this.startIndex)
-        Text('取消回调：' + this.cancelIndex)
+          Text('成功回调：' + this.successIndex)
-        Text('内存数量：' + this.memoryIndex)
+          Text('失败回调：' + this.failIndex)
-        Text('文件数量：' + this.fileCacheIndex)
+          Text('队列取消回调：' + this.cancelJobIndex)
-        Text('网络数量：' + this.netIndex)
+          Text('加载取消回调：' + this.cancelLoadIndex)
-      }
+          Text('内存数量：' + this.memoryIndex)
+          Text('文件数量：' + this.fileCacheIndex)
+          Text('网络数量：' + this.netIndex)
+        }.width('50%')
+        Column() {
+          Button('check')
+            .onClick(()=>{
+              this.checkText = ''
+              if (this.componentIndex !== this.startIndex + this.cancelJobIndex) {
+                this.checkText = this.checkText + '图片总数！=开始+队列取消，'
+              }
+              if(this.startIndex !== this.successIndex + this.failIndex + this.cancelLoadIndex) {
+                this.checkText = this.checkText + '开始回调！=成功+失败+加载取消，'
+              }
+              if(this.successIndex !== this.memoryIndex + this.fileCacheIndex + this.netIndex) {
+                this.checkText = this.checkText + '成功回调！=内存+文件+网络，'
+              }
+              if(this.componentIndex !== this.successIndex + this.failIndex + this.cancelJobIndex + this.cancelLoadIndex) {
+                this.checkText = this.checkText + '图片总数！=成功+失败+加载取消+队列取消，'
+              }
+              if(this.checkText == '') {
+                this.checkText = 'check正确'
+              }
+            })
+          Text(this.checkText)
+        }.width('50%')
+      }.width('100%')
       Column() {
         WaterFlow() {
           LazyForEach(this.hotCommendList, (item: string,index: number) => {
             FlowItem() {
               Column() {
                 Text(index + '')
-                ImageKnifeComponent({
+                ImageComponent({
                   imageKnifeOption: {
                     loadSrc: item,
                     placeholderSrc: $r('app.media.loading'),
@@ -78,18 +107,24 @@ struct MultipleImageCallBack {
                         this.failIndex++
                         console.log('image load multiple loadFail:' + this.failIndex)
                       },
-                      onLoadCancel:()=>{
+                      onLoadCancel:(message,request)=>{
-                        this.cancelIndex++
+                        let flag = request?.imageKnifeData?.type ? true : false
-                        console.log('image load multiple loadCancel:' + this.cancelIndex)
+                        if (flag) {
+                          this.cancelLoadIndex++
+                        } else {
+                          this.cancelJobIndex++
+                        }
+                        console.log('image load multiple cancelJobIndex:' + this.cancelJobIndex,'cancelLoadIndex' + this.cancelLoadIndex)
                       }
                     }
-                  }
+                  },index:this.componentIndex
                 }).width('50%').height(160)
               }
             }.height(200)
             .backgroundColor('#95efd2')
           }, (item: string) => item)
         }
+        .cachedCount(0)
         .columnsTemplate('1fr 1fr')
         .columnsGap(10)
         .rowsGap(5)
@@ -100,4 +135,17 @@ struct MultipleImageCallBack {
     }.width('100%')
     .height('100%')
   }
+}
+@Component
+struct ImageComponent {
+  @State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
+  @Link index: number
+  aboutToAppear(): void {
+    this.index++
+  }
+  build() {
+    ImageKnifeComponent({
+      imageKnifeOption: this.imageKnifeOption
+    })
+  }
 }

entry/src/main/ets/pages/SingleImageCallBack.ets

@@ -12,34 +12,62 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ImageKnifeComponent } from '@ohos/libraryimageknife';
+import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife';
 import { CommonDataSource } from './model/CommonDataSource'
 
 @Entry
 @Component
 struct SingleImageCallBack {
   @State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
+  @State componentIndex: number = 0
   @State startIndex: number = 0
   @State successIndex: number = 0
   @State failIndex: number = 0
-  @State cancelIndex: number = 0
+  @State cancelJobIndex: number = 0
+  @State cancelLoadIndex: number = 0
   @State memoryIndex: number = 0
   @State fileCacheIndex: number = 0
   @State netIndex: number = 0
-
+  @State checkText: string = ''
   build() {
     Column() {
+      Row() {
+        Column() {
+          Text('图片总数：' + this.componentIndex)
+          Text('开始回调：' + this.startIndex)
+          Text('成功回调：' + this.successIndex)
+          Text('失败回调：' + this.failIndex)
+          Text('队列取消回调：' + this.cancelJobIndex)
+          Text('加载取消回调：' + this.cancelLoadIndex)
+          Text('内存数量：' + this.memoryIndex)
+          Text('文件数量：' + this.fileCacheIndex)
+          Text('网络数量：' + this.netIndex)
+        }.width('50%')
+        Column() {
+          Button('check')
+            .onClick(()=>{
+              this.checkText = ''
+              if (this.componentIndex !== this.startIndex + this.cancelJobIndex) {
+                this.checkText = this.checkText + '图片总数！=开始+队列取消，'
+              }
+              if(this.startIndex !== this.successIndex + this.failIndex + this.cancelLoadIndex) {
+                this.checkText = this.checkText + '开始回调！=成功+失败+加载取消，'
+              }
+              if(this.successIndex !== this.memoryIndex + this.fileCacheIndex + this.netIndex) {
+                this.checkText = this.checkText + '成功回调！=内存+文件+网络，'
+              }
+              if(this.componentIndex !== this.successIndex + this.failIndex + this.cancelJobIndex + this.cancelLoadIndex) {
+                this.checkText = this.checkText + '图片总数！=成功+失败+加载取消+队列取消，'
+              }
+              if(this.checkText == '') {
+                this.checkText = 'check正确'
+              }
+            })
+          Text(this.checkText)
+        }.width('50%')
+      }.width('100%')
       Column() {
-        Text('开始回调：' + this.startIndex)
+        ImageComponent({
-        Text('成功回调：' + this.successIndex)
-        Text('失败回调：' + this.failIndex)
-        Text('取消回调：' + this.cancelIndex)
-        Text('内存数量：' + this.memoryIndex)
-        Text('文件数量：' + this.fileCacheIndex)
-        Text('网络数量：' + this.netIndex)
-      }
-      Column() {
-        ImageKnifeComponent({
           imageKnifeOption: {
             loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
             placeholderSrc: $r('app.media.loading'),
@@ -65,16 +93,34 @@ struct SingleImageCallBack {
                 this.failIndex++
                 console.log('image load multiple loadFail:' + this.failIndex)
               },
-              onLoadCancel: () => {
+              onLoadCancel: (message,request) => {
-                this.cancelIndex++
+                let flag = request?.imageKnifeData?.type ? true : false
-                console.log('image load multiple loadCancel:' + this.cancelIndex)
+                if (flag) {
+                  this.cancelLoadIndex++
+                } else {
+                  this.cancelJobIndex++
+                }
+                console.log('image load multiple cancelJobIndex:' + this.cancelJobIndex,'cancelLoadIndex' + this.cancelLoadIndex)
               }
             }
-          }
+          },index:this.componentIndex
         }).width(300).height(300)
       }
       .height('80%')
     }.width('100%')
     .height('100%')
   }
+}
+@Component
+struct ImageComponent {
+  @State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
+  @Link index: number
+  aboutToAppear(): void {
+    this.index++
+  }
+  build() {
+    ImageKnifeComponent({
+      imageKnifeOption: this.imageKnifeOption
+    })
+  }
 }

library/src/main/ets/components/ImageKnifeComponent.ets

@@ -150,6 +150,8 @@ export struct ImageKnifeComponent {
             return //针对reuse场景，不显示历史图片
           }
           this.pixelMap = pixelMap
+          LogUtil.debug('image load showPixelMap:' + this.request?.imageKnifeOption.loadSrc + ', componentId = ' +
+          this.getUniqueId() + ',size:' + JSON.stringify(size))
           if (typeof this.pixelMap !== 'string') {
             if (this.imageKnifeOption.objectFit === ImageFit.Auto && this.isImageFitAutoResize == false) {
               this.adaptiveHeight = this.currentWidth * size.height / size.width