add test cancel callback demo

Signed-off-by: tyBrave <tianyong21@h-partners.com>

entry/src/main/ets/pages/Index.ets

@@ -167,9 +167,15 @@ struct Index {
         Button("测试颜色变换").margin({top:10}).onClick(()=>{
           router.push({
             uri: 'pages/TestChangeColorPage',
+
           });
         })
+        Button("测试加载取消回调接口").margin({top:10}).onClick(()=>{
+          router.push({
+            uri: 'pages/TestLoadCancelListenerPage',
 
+          });
+        })
       }
     } .width('100%')
     .height('100%')

entry/src/main/ets/pages/TestLoadCancelListenerPage.ets

@@ -0,0 +1,93 @@
+/*
+ * 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, ImageKnifeOption } from '@ohos/imageknife';
+
+@Entry
+@ComponentV2
+struct TestLoadCancelListenerPage {
+  @Local currentWidth: number = 200
+  @Local currentHeight: number = 200
+  @Local showChild: boolean = true;
+  @Local text: string = "onLoadCancel回调原因:";
+  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+    loadSrc: "",
+    objectFit: ImageFit.Contain,
+    border: { radius: 50 }
+  })
+
+  build() {
+    Column() {
+      Text(this.text).margin(20).fontSize(15)
+      Button('移除组件-网络加载图片')
+        .margin(20)
+        .onClick(() => {
+          this.ImageKnifeOption = new ImageKnifeOption({
+            loadSrc: "https://q7.itc.cn/images01/20240223/ce80229bf9934dff97cdf2ad7be1dcb8.jpeg",
+            objectFit: ImageFit.Contain,
+            onLoadListener: {
+              onLoadStart: (data) => {
+                this.showChild = false;
+              },
+              onLoadCancel: (res, data) => {
+                this.text = "onLoadCancel回调成功，网络nLoadCancel回调原因:" + res
+                console.log("TestLoadCancelListenerPage----onLoadCancel> url:" + res)
+              }
+            },
+            border: { radius: 50 }
+          })
+        })
+
+      Button('恢复组件显示')
+        .margin(20).onClick(() => {
+        this.showChild = true;
+        this.ImageKnifeOption = new ImageKnifeOption({
+          loadSrc: "",
+          objectFit: ImageFit.Contain,
+          border: { radius: 50 }
+        })
+      })
+      Button('移除组件-本地资源图片')
+        .margin(20)
+        .onClick(() => {
+          this.ImageKnifeOption = new ImageKnifeOption({
+            loadSrc: $r('app.media.loading'),
+            objectFit: ImageFit.Contain,
+            onLoadListener: {
+              onLoadStart: (data) => {
+                this.showChild = false;
+              },
+              onLoadCancel: (res, data) => {
+                this.text = "onLoadCancel回调成功，本地onLoadCancel回调原因:" + res
+                console.log("TestLoadCancelListenerPage----onLoadCancel> url:" + res)
+              }
+            },
+            border: { radius: 50 }
+          })
+        })
+
+      if (this.showChild) {
+        ImageKnifeComponent(
+          { imageKnifeOption: this.ImageKnifeOption })
+          .height(150)
+          .width(150)
+          .backgroundColor(Color.Orange)
+          .margin({ top: 20 })
+      }
+    }
+    .height('100%')
+    .width('100%')
+  }
+}

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

@@ -24,6 +24,7 @@
     "pages/TestErrorHolderPage",
     "pages/TestTaskResourcePage",
     "pages/TestCacheDataPage",
-    "pages/TestChangeColorPage"
+    "pages/TestChangeColorPage",
+    "pages/TestLoadCancelListenerPage"
   ]
 }