Pre Merge pull request !436 from zgf/master

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

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## 3.2.0-rc.5
 - 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/Index.ets

@@ -50,6 +50,16 @@ struct Index {
             uri: 'pages/SetMaxRequestPage',
           });
         })
+        Button($r('app.string.Single_CallBack')).margin({top:10}).onClick(()=>{
+          router.push({
+            uri: 'pages/SingleImageCallBack',
+          });
+        })
+        Button($r('app.string.Multiple_CallBack')).margin({top:10}).onClick(()=>{
+          router.push({
+            uri: 'pages/MultipleImageCallBack',
+          });
+        })
         Button($r('app.string.Test_multiple_images')).margin({top:10}).onClick(()=>{
           router.push({
             uri: 'pages/TestCommonImage',

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

@@ -0,0 +1,103 @@
+/*
+ * Copyright (C) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ImageKnifeComponent } from '@ohos/libraryimageknife';
+import { CommonDataSource } from './model/CommonDataSource'
+
+@Entry
+@Component
+struct MultipleImageCallBack {
+  @State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
+  @State startIndex: number = 0
+  @State successIndex: number = 0
+  @State failIndex: number = 0
+  @State cancelIndex: number = 0
+  @State memoryIndex: number = 0
+  @State fileCacheIndex: number = 0
+  @State netIndex: number = 0
+  private data: Array<string> = []
+
+  aboutToAppear(): void {
+    for (let index = 0; index < 30; index++) {
+      this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
+    }
+    this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
+  }
+
+  build() {
+    Column() {
+      Column(){
+        Text('开始回调：' + this.startIndex)
+        Text('成功回调：' + this.successIndex)
+        Text('失败回调：' + this.failIndex)
+        Text('取消回调：' + this.cancelIndex)
+        Text('内存数量：' + this.memoryIndex)
+        Text('文件数量：' + this.fileCacheIndex)
+        Text('网络数量：' + this.netIndex)
+      }
+      Column() {
+        WaterFlow() {
+          LazyForEach(this.hotCommendList, (item: string,index: number) => {
+            FlowItem() {
+              Column() {
+                Text(index + '')
+                ImageKnifeComponent({
+                  imageKnifeOption: {
+                    loadSrc: item,
+                    placeholderSrc: $r('app.media.loading'),
+                    errorholderSrc: $r('app.media.failed'),
+                    onLoadListener: {
+                      onLoadStart:()=>{
+                        this.startIndex++
+                        console.log('image load multiple loadStart:' + this.startIndex)
+                      },
+                      onLoadSuccess:(pixelmap,imageData,request)=>{
+                        this.successIndex++
+                        let memory = request?.imageKnifeData?.timeInfo?.memoryCheckEndTime ? 1 : 0
+                        let fileCache = request?.imageKnifeData?.timeInfo?.diskCheckEndTime ? 1 : 0
+                        let net = request?.imageKnifeData?.timeInfo?.netRequestEndTime ? 1 : 0
+                        memory = memory - fileCache
+                        fileCache = fileCache - net
+                        this.memoryIndex = this.memoryIndex + memory
+                        this.fileCacheIndex = this.fileCacheIndex + fileCache
+                        this.netIndex = this.netIndex + net
+                        console.log('image load multiple loadSuccess:' + this.successIndex)
+                      },
+                      onLoadFailed:()=>{
+                        this.failIndex++
+                        console.log('image load multiple loadFail:' + this.failIndex)
+                      },
+                      onLoadCancel:()=>{
+                        this.cancelIndex++
+                        console.log('image load multiple loadCancel:' + this.cancelIndex)
+                      }
+                    }
+                  }
+                }).width('50%').height(160)
+              }
+            }.height(200)
+            .backgroundColor('#95efd2')
+          }, (item: string) => item)
+        }
+        .columnsTemplate('1fr 1fr')
+        .columnsGap(10)
+        .rowsGap(5)
+        .backgroundColor(0xFAEEE0)
+        .width('100%')
+      }
+      .height('80%')
+    }.width('100%')
+    .height('100%')
+  }
+}

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

@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ImageKnifeComponent } from '@ohos/libraryimageknife';
+import { CommonDataSource } from './model/CommonDataSource'
+
+@Entry
+@Component
+struct SingleImageCallBack {
+  @State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
+  @State startIndex: number = 0
+  @State successIndex: number = 0
+  @State failIndex: number = 0
+  @State cancelIndex: number = 0
+  @State memoryIndex: number = 0
+  @State fileCacheIndex: number = 0
+  @State netIndex: number = 0
+
+  build() {
+    Column() {
+      Column() {
+        Text('开始回调：' + this.startIndex)
+        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'),
+            errorholderSrc: $r('app.media.failed'),
+            onLoadListener: {
+              onLoadStart: () => {
+                this.startIndex++
+                console.log('image load multiple loadStart:' + this.startIndex)
+              },
+              onLoadSuccess: (pixelmap, imageData, request) => {
+                this.successIndex++
+                let memory = request?.imageKnifeData?.timeInfo?.memoryCheckEndTime ? 1 : 0
+                let fileCache = request?.imageKnifeData?.timeInfo?.diskCheckEndTime ? 1 : 0
+                let net = request?.imageKnifeData?.timeInfo?.netRequestEndTime ? 1 : 0
+                memory = memory - fileCache
+                fileCache = fileCache - net
+                this.memoryIndex = this.memoryIndex + memory
+                this.fileCacheIndex = this.fileCacheIndex + fileCache
+                this.netIndex = this.netIndex + net
+                console.log('image load multiple loadSuccess:' + this.successIndex)
+              },
+              onLoadFailed: () => {
+                this.failIndex++
+                console.log('image load multiple loadFail:' + this.failIndex)
+              },
+              onLoadCancel: () => {
+                this.cancelIndex++
+                console.log('image load multiple loadCancel:' + this.cancelIndex)
+              }
+            }
+          }
+        }).width(300).height(300)
+      }
+      .height('80%')
+    }.width('100%')
+    .height('100%')
+  }
+}

entry/src/main/resources/base/element/string.json

@@ -655,6 +655,14 @@
     {
       "name": "Auto_ImageFit",
       "value": "ImageFit.Auto:Auto ImageFit Height"
+    },
+    {
+      "name": "Single_CallBack",
+      "value": "Single image callback"
+    },
+    {
+      "name": "Multiple_CallBack",
+      "value": "Multiple image callback"
     }
   ]
 }

entry/src/main/resources/base/profile/main_pages.json

@@ -38,6 +38,8 @@
     "pages/TestImageKnifeCallbackPage",
     "pages/TestListImageKnifeCallbackPage",
     "pages/DownSamplePage",
-    "pages/AutoImageFit"
+    "pages/AutoImageFit",
+    "pages/SingleImageCallBack",
+    "pages/MultipleImageCallBack"
   ]
 }

entry/src/main/resources/zh_CN/element/string.json

@@ -651,6 +651,14 @@
     {
       "name": "Auto_ImageFit",
       "value": "ImageFit.Auto:自适用图片高度"
+    },
+    {
+      "name": "Single_CallBack",
+      "value": "单个图片回调"
+    },
+    {
+      "name": "Multiple_CallBack",
+      "value": "多张图片回调"
     }
   ]
 }

library/src/main/ets/ImageKnifeDispatcher.ets

@@ -373,7 +373,7 @@ export class ImageKnifeDispatcher {
         }
         if (requestWithSource.source === ImageKnifeRequestSource.SRC &&
           requestWithSource.request.imageKnifeOption.errorholderSrc !== undefined) {
-
+          requestWithSource.request.requestState = ImageKnifeRequestState.PROGRESS
           if (this.showFromMemomry(requestWithSource.request, requestWithSource.request.imageKnifeOption.errorholderSrc,
             ImageKnifeRequestSource.ERROR_HOLDER) === false) {
             this.getAndShowImage(requestWithSource.request, requestWithSource.request.imageKnifeOption.errorholderSrc,

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

@@ -24,7 +24,7 @@ import { DefaultEngineKey } from '../key/DefaultEngineKey';
 @Component
 export struct ImageKnifeComponent {
   @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
-  @State pixelMap: PixelMap | string | ImageContent | undefined = undefined
+  @State pixelMap: PixelMap | string | ImageContent | undefined = ImageContent.EMPTY
   @State syncLoad: boolean = false
   @State adaptiveWidth: Length = '100%'
   @State adaptiveHeight: Length = '100%'