1.通用属性和通用事件能力,从ImageKnifeComponent剥离,解除耦合

2.pages目录中所有测试的页面,ImageKnifeComponent的入参ImageKnifeOption发生了改变

Signed-off-by: zhoulisheng1 <zhoulisheng1@huawei.com>

entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets

@@ -62,8 +62,8 @@ struct BasicTestFeatureAbilityPage {
         List({ space: 20, initialIndex: 0 }) {
           ForEach(this.options, (item) => {
             ListItem() {
-              ImageKnifeComponent({imageKnifeOption:item})
+              ImageKnifeComponent({imageKnifeOption:item}).width(300).height(300)
-            }.editable(true)
+            }
           }, item => item.loadSrc)
         }
         .listDirection(Axis.Vertical) // 排列方向

entry/src/main/ets/pages/frescoImageTestCasePage.ets

@@ -25,7 +25,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       displayProgress: true
@@ -33,7 +33,7 @@ struct FrescoImageTestCasePage {
   @State ImageKnifeOption: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       displayProgress: true
@@ -41,7 +41,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption3: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       displayProgress: true
@@ -49,7 +49,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption4: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       displayProgress: true,
@@ -62,6 +62,8 @@ struct FrescoImageTestCasePage {
 //        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
 //        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
         ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
+          .width(300)
+          .height(300)
 //        Scroll() {
 //          Text(this.progresshint).fontSize(15)
 //        }.width(300).height(200)

entry/src/main/ets/pages/frescoRetryTestCasePage.ets

@@ -23,7 +23,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       retryholderSrc: $r('app.media.icon_retry'),
@@ -33,7 +33,7 @@ struct FrescoImageTestCasePage {
   @State ImageKnifeOption: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       retryholderSrc: $r('app.media.icon_retry'),
@@ -43,7 +43,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption3: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       retryholderSrc: $r('app.media.icon_retry'),
@@ -53,7 +53,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption4: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/testRetryxxxx",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       retryholderSrc: $r('app.media.icon_retry'),
@@ -68,6 +68,8 @@ struct FrescoImageTestCasePage {
 //        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
 //        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
         ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
+          .width(300)
+          .height(300)
       }
     }
     .width('100%')

entry/src/main/ets/pages/index.ets

@@ -25,7 +25,7 @@ struct IndexFunctionDemo {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.icon'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed')
     };
@@ -33,7 +33,7 @@ struct IndexFunctionDemo {
   @State imageKnifeOption2: ImageKnifeOption =
     {
       loadSrc: $r('app.media.icon'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed')
     };
@@ -47,12 +47,12 @@ struct IndexFunctionDemo {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.pngSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed')
               }
             }).margin({ top: 5, left: 3 })
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
         }.width('100%').backgroundColor(Color.Pink)
 
         Text("简单示例2：加载一张网络gif图片").fontSize(15)
@@ -62,13 +62,13 @@ struct IndexFunctionDemo {
             .onClick(() => {
               this.imageKnifeOption2 = {
                 loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
                 displayProgress:true,
               }
             }).margin({ top: 5, left: 3 })
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
         }.width('100%').backgroundColor(Color.Pink)
 
         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

entry/src/main/ets/pages/showErrorholderTestCasePage.ets

@@ -23,28 +23,28 @@ struct ShowErrorholderTestCasePage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: "https://thirdwx.qlogo.cn/mmopen/xxxxx",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
     };
-  @State ImageKnifeOption: ImageKnifeOption =
+  @State imageKnifeOption: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/xxxxx",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
     };
   @State imageKnifeOption3: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/xxxxx",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
     };
   @State imageKnifeOption4: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/xxxxx",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
     };
@@ -52,10 +52,10 @@ struct ShowErrorholderTestCasePage {
   build() {
     Scroll() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
-        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
-        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(300).height(300)
-        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(300).height(300)
       }
     }
     .width('100%')

entry/src/main/ets/pages/testAllCacheInfoPage.ets

@@ -45,23 +45,23 @@ struct TestAllCacheInfoPage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.pngSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin:{top:15},
+
       transform: {
         transformType:TransformType.RotateImageTransformation,
         rotateImage:180
       },
       allCacheInfoCallback:this.allCacheInfoCallback1
     };
-  @State ImageKnifeOption: ImageKnifeOption =
+  @State imageKnifeOption: ImageKnifeOption =
     {
       loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin:{top:15},
+
       transform: {
         transformType:TransformType.RotateImageTransformation,
         rotateImage:180
@@ -112,10 +112,10 @@ struct TestAllCacheInfoPage {
             this.imageKnifeOption1 =
             {
               loadSrc: $r('app.media.pngSample'),
-              size: { width: '300', height: '300' },
+
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
-              margin: { top: 15 },
+
               transform: {
                 transformType:TransformType.RotateImageTransformation,
                 rotateImage:this.imageKnifeComponentAngle
@@ -131,13 +131,13 @@ struct TestAllCacheInfoPage {
         Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25)
           .onClick(() => {
             this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45;
-            this.ImageKnifeOption =
+            this.imageKnifeOption =
             {
               loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
-              size: { width: '300', height: '300' },
+
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
-              margin: { top: 15 },
+
               transform: {
                 transformType:TransformType.RotateImageTransformation,
                 rotateImage:this.imageKnifeComponentAngle
@@ -148,7 +148,7 @@ struct TestAllCacheInfoPage {
         Scroll() {
           Text(this.cacheinfo4).fontSize(15)
         }.width(300).height(200)
-        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
 
       }
     }

entry/src/main/ets/pages/testGifDontAnimatePage.ets

@@ -23,10 +23,8 @@ struct TestGifDontAnimatePage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
       placeholderSrc: $r('app.media.icon_loading'),
-      errorholderSrc: $r('app.media.icon_failed'),
+      errorholderSrc: $r('app.media.icon_failed')
-      margin:{left:15,top:15,right:15,bottom:15}
     };
 
 
@@ -38,10 +36,9 @@ struct TestGifDontAnimatePage {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.gifSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
               }
 
           }).margin({left:15}).backgroundColor(Color.Grey)
@@ -49,10 +46,8 @@ struct TestGifDontAnimatePage {
             .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: $r('app.media.gifSample'),
-              size: { width: '300', height: '300' },
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
-              margin:{left:15,top:15,right:15,bottom:15},
               dontAnimateFlag:true
             }
 
@@ -64,26 +59,24 @@ struct TestGifDontAnimatePage {
             .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-              size: { width: '300', height: '300' },
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
-              margin:{left:15,top:15,right:15,bottom:15}
             };
           }).margin({left:15}).backgroundColor(Color.Grey)
           Button('网络资源gif静态')
             .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-              size: { width: '300', height: '300' },
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
-              margin:{left:15,top:15,right:15,bottom:15},
               dontAnimateFlag:true
             };
           }).margin({left:15}).backgroundColor(Color.Grey)
         }
         .margin({top:15})
         ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+          .width(300)
+          .height(300)
 
       }
     }

entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets

@@ -25,10 +25,10 @@ struct TestImageKnifeOptionChangedPage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin:{left:5,top:5,right:5,bottom:5}
+
     };
 
 
@@ -40,10 +40,10 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.jpgSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5}
+
               };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -51,10 +51,10 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
              this.imageKnifeOption1 =  {
                loadSrc: $r('app.media.pngSample'),
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+
              };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -62,10 +62,10 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.bmpSample'),
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+
              };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -73,10 +73,9 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.jpgSample'),
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
+               errorholderSrc: $r('app.media.icon_failed')
-               margin:{left:5,top:5,right:5,bottom:5}
              };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -84,10 +83,9 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.svgSample'),
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
+               errorholderSrc: $r('app.media.icon_failed')
-               margin:{left:5,top:5,right:5,bottom:5}
              };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -95,10 +93,9 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.gifSample'),
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
+               errorholderSrc: $r('app.media.icon_failed')
-               margin:{left:5,top:5,right:5,bottom:5}
              };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -109,60 +106,54 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
-                errorholderSrc: $r('app.media.icon_failed'),
+                errorholderSrc: $r('app.media.icon_failed')
-                margin:{left:5,top:5,right:5,bottom:5}
               };
            }).margin({left:5}).backgroundColor(Color.Blue)
            Button('png')
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
+               errorholderSrc: $r('app.media.icon_failed')
-               margin:{left:5,top:5,right:5,bottom:5}
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
            Button('bmp')
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'https://img-blog.csdn.net/20140514114029140',
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
+               errorholderSrc: $r('app.media.icon_failed')
-               margin:{left:5,top:5,right:5,bottom:5}
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
            Button('webp')
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
+               errorholderSrc: $r('app.media.icon_failed')
-               margin:{left:5,top:5,right:5,bottom:5}
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
            Button('svg')
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/30df266a-485e-411e-b178-b9fb1d8e0748.svg',
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
+               errorholderSrc: $r('app.media.icon_failed')
-               margin:{left:5,top:5,right:5,bottom:5}
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
            Button('gif')
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
+               errorholderSrc: $r('app.media.icon_failed')
-               margin:{left:5,top:5,right:5,bottom:5}
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
 
@@ -170,10 +161,9 @@ struct TestImageKnifeOptionChangedPage {
             .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: "https://img13.360buyimg.com/n1/jfs/t1/220646/38/10395/30916/61d6e061E1a6d91c8/c0a9a67e726dd7a4.jpg.dpg",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
-                errorholderSrc: $r('app.media.icon_failed'),
+                errorholderSrc: $r('app.media.icon_failed')
-                margin:{left:5,top:5,right:5,bottom:5},
               };
             }).margin({left:5}).backgroundColor(Color.Blue)
         }
@@ -182,6 +172,8 @@ struct TestImageKnifeOptionChangedPage {
         Text('下面为展示图片区域').margin({top:5})
         Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
           ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+            .width(300)
+            .height(300)
         }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
 
 

entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets

@@ -24,10 +24,10 @@ struct TestImageKnifeOptionChangedPage2 {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin:{left:5,top:5,right:5,bottom:5},
+       
       thumbSizeMultiplier:0.1
     };
 
@@ -40,10 +40,10 @@ struct TestImageKnifeOptionChangedPage2 {
           .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
+                 
                 thumbSizeMultiplier:0.1,
                 transformation:new RotateImageTransformation(180)
               };
@@ -52,10 +52,10 @@ struct TestImageKnifeOptionChangedPage2 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
+                
                thumbSizeMultiplier:0.1,
                transformations:[new RotateImageTransformation(180)]
              };
@@ -64,10 +64,10 @@ struct TestImageKnifeOptionChangedPage2 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://img-blog.csdn.net/20140514114029140",
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
+                
                thumbSizeMultiplier:0.1,
                transformations:[new GrayscaleTransformation()]
              };
@@ -76,10 +76,10 @@ struct TestImageKnifeOptionChangedPage2 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
+                
                thumbSizeMultiplier:0.1,
                transformations:[new SketchFilterTransformation()]
              };
@@ -89,7 +89,7 @@ struct TestImageKnifeOptionChangedPage2 {
 
         Text("下面为展示图片区域").margin({top:5})
         Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
         }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
 
 

entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets

@@ -27,10 +27,11 @@ struct TestImageKnifeOptionChangedPage3 {
     {
       loadSrc: $r('app.media.jpgSample'),
       mainScaleType: ScaleType.FIT_CENTER,
-      size: { width: '300', height: '300' },
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
     };
+  @State compWidht:number = 300
+  @State compHeight:number = 300
 
 
   build() {
@@ -42,46 +43,48 @@ struct TestImageKnifeOptionChangedPage3 {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.jpgSample'),
                 mainScaleType: ScaleType.FIT_CENTER,
-                size: { width: '350', height: '350' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
                 thumbSizeMultiplier:0.1,
                 transformation:new RotateImageTransformation(180),
-                sizeAnimate: {
-                  duration: 500,
-                  curve: Curve.EaseInOut,
-                  delay: 100,
-                  iterations: 1,
-                  playMode:PlayMode.Normal,
-                  onFinish:()=>{
-                    console.log('play end!')
-                  }
-                }
               };
+              animateTo({
+                duration: 500,
+                curve: Curve.EaseInOut,
+                delay: 100,
+                iterations: 1,
+                playMode:PlayMode.Normal,
+                onFinish:()=>{
+                  console.log('play end!')
+                }
+              },()=>{
+                this.compHeight = 350
+                this.compWidht = 350
+              })
             }).margin({left:5}).backgroundColor(Color.Blue)
           Button("本地png")
             .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.pngSample'),
                 mainScaleType: ScaleType.FIT_CENTER,
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
                 thumbSizeMultiplier:0.1,
                 transformation:new RotateImageTransformation(180),
-                sizeAnimate: {
-                  duration: 500,
-                  curve: Curve.EaseInOut,
-                  delay: 100,
-                  iterations: 1,
-                  playMode: PlayMode.Normal,
-                  onFinish: () => {
-                    console.log('play end!')
-                  }
-                }
               };
+              animateTo({
+                duration: 500,
+                curve: Curve.EaseInOut,
+                delay: 100,
+                iterations: 1,
+                playMode:PlayMode.Normal,
+                onFinish:()=>{
+                  console.log('play end!')
+                }
+              },()=>{
+                this.compHeight = 400
+                this.compWidht = 300
+              })
             }).margin({left:5}).backgroundColor(Color.Blue)
         }.margin({top:15})
         Flex({direction:FlexDirection.Row}){
@@ -90,46 +93,48 @@ struct TestImageKnifeOptionChangedPage3 {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.bmpSample'),
                 mainScaleType: ScaleType.FIT_CENTER,
-                size: { width: '100', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
                 thumbSizeMultiplier:0.1,
                 transformations:[new GrayscaleTransformation()],
-                sizeAnimate: {
-                  duration: 500,
-                  curve: Curve.EaseInOut,
-                  delay: 100,
-                  iterations: 1,
-                  playMode: PlayMode.Normal,
-                  onFinish: () => {
-                    console.log('play end!')
-                  }
-                }
               };
+              animateTo({
+                duration: 500,
+                curve: Curve.EaseInOut,
+                delay: 100,
+                iterations: 1,
+                playMode:PlayMode.Normal,
+                onFinish:()=>{
+                  console.log('play end!')
+                }
+              },()=>{
+                this.compHeight = 250
+                this.compWidht = 350
+              })
             }).margin({left:5}).backgroundColor(Color.Blue)
           Button("本地webp")
             .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.webpSample'),
                 mainScaleType: ScaleType.FIT_CENTER,
-                size: { width: '300', height: '100' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
                 thumbSizeMultiplier:0.1,
                 transformations:[new SketchFilterTransformation()],
-                sizeAnimate: {
-                  duration: 500,
-                  curve: Curve.EaseInOut,
-                  delay: 100,
-                  iterations: 1,
-                  playMode: PlayMode.Normal,
-                  onFinish: () => {
-                    console.log('play end!')
-                  }
-                }
               };
+              animateTo({
+                duration: 500,
+                curve: Curve.EaseInOut,
+                delay: 100,
+                iterations: 1,
+                playMode:PlayMode.Normal,
+                onFinish:()=>{
+                  console.log('play end!')
+                }
+              },()=>{
+                this.compHeight = 400
+                this.compWidht = 400
+              })
             }).margin({left:5}).backgroundColor(Color.Blue)
         }.margin({top:15})
         Flex({direction:FlexDirection.Row}){
@@ -137,21 +142,9 @@ struct TestImageKnifeOptionChangedPage3 {
           .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-                size: { width: '200', height: '200' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
                 displayProgress:true,
-                sizeAnimate: {
-                  duration: 500,
-                  curve: Curve.EaseInOut,
-                  delay: 100,
-                  iterations: 1,
-                  playMode: PlayMode.Normal,
-                  onFinish: () => {
-                    console.log('play end!')
-                  }
-                },
                 thumbSizeMultiplier:0.1,
                 transformation:new RotateImageTransformation(180)
               };
@@ -160,22 +153,10 @@ struct TestImageKnifeOptionChangedPage3 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
-               size: { width: '300', height: '300' },
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
                displayProgress:true,
                thumbSizeMultiplier:0.1,
-               sizeAnimate: {
-                 duration: 500,
-                 curve: Curve.EaseInOut,
-                 delay: 100,
-                 iterations: 1,
-                 playMode: PlayMode.Normal,
-                 onFinish: () => {
-                   console.log('play end!')
-                 }
-               },
                transformations:[new RotateImageTransformation(180)]
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -185,22 +166,10 @@ struct TestImageKnifeOptionChangedPage3 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://img-blog.csdn.net/20140514114029140",
-               size: { width: '400', height: '400' },
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
                displayProgress:true,
                thumbSizeMultiplier:0.1,
-               sizeAnimate: {
-                 duration: 500,
-                 curve: Curve.EaseInOut,
-                 delay: 100,
-                 iterations: 1,
-                 playMode: PlayMode.Normal,
-                 onFinish: () => {
-                   console.log('play end!')
-                 }
-               },
                transformations:[new GrayscaleTransformation()]
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -208,29 +177,17 @@ struct TestImageKnifeOptionChangedPage3 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-               size: { width: '500', height: '500' },
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
                displayProgress:true,
                thumbSizeMultiplier:0.1,
-               sizeAnimate: {
-                 duration: 500,
-                 curve: Curve.EaseInOut,
-                 delay: 100,
-                 iterations: 1,
-                 playMode: PlayMode.Normal,
-                 onFinish: () => {
-                   console.log('play end!')
-                 }
-               },
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
         }.margin({top:15})
 
         Text("下面为展示图片区域").margin({top:5})
         Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(this.compWidht).height(this.compHeight)
         }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
 
 

entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets

@@ -31,10 +31,10 @@ struct TestImageKnifeOptionChangedPage4 {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 5, top: 5, right: 5, bottom: 5 },
+        
       thumbSizeMultiplier: 0.1,
       drawLifeCycle:this.createViewLifeCycle()
     };
@@ -48,10 +48,10 @@ struct TestImageKnifeOptionChangedPage4 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 5, top: 5, right: 5, bottom: 5 },
+                  
                 thumbSizeMultiplier: 0.1,
                 transformation: new RotateImageTransformation(180),
                 drawLifeCycle:this.createViewLifeCycle()
@@ -61,10 +61,10 @@ struct TestImageKnifeOptionChangedPage4 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 5, top: 5, right: 5, bottom: 5 },
+                  
                 thumbSizeMultiplier: 0.1,
                 transformations: [new RotateImageTransformation(180)],
                 drawLifeCycle:this.createViewLifeCycle()
@@ -76,10 +76,10 @@ struct TestImageKnifeOptionChangedPage4 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://img-blog.csdn.net/20140514114029140",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 5, top: 5, right: 5, bottom: 5 },
+                  
                 thumbSizeMultiplier: 0.1,
                 transformations: [new GrayscaleTransformation()],
                 drawLifeCycle:this.createViewLifeCycle()
@@ -89,10 +89,10 @@ struct TestImageKnifeOptionChangedPage4 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 5, top: 5, right: 5, bottom: 5 },
+                  
                 thumbSizeMultiplier: 0.1,
                 transformations: [new SketchFilterTransformation()],
                 drawLifeCycle:this.createViewLifeCycle()
@@ -102,7 +102,7 @@ struct TestImageKnifeOptionChangedPage4 {
 
         Text("下面为展示图片区域").margin({ top: 5 })
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
         }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
 
       }

entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets

@@ -32,7 +32,6 @@ struct TestImageKnifeOptionChangedPage5 {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@@ -47,7 +46,6 @@ struct TestImageKnifeOptionChangedPage5 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
                 drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@@ -57,7 +55,6 @@ struct TestImageKnifeOptionChangedPage5 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
                 drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@@ -69,7 +66,6 @@ struct TestImageKnifeOptionChangedPage5 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://img-blog.csdn.net/20140514114029140",
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
                 drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@@ -79,7 +75,6 @@ struct TestImageKnifeOptionChangedPage5 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
                 drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@@ -89,7 +84,7 @@ struct TestImageKnifeOptionChangedPage5 {
 
         Text("下面为展示图片区域").margin({ top: 5 })
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
         }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
 
       }

entry/src/main/ets/pages/testPreloadPage.ets

@@ -24,51 +24,51 @@ struct TestPreloadPage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
-  @State ImageKnifeOption: ImageKnifeOption =
+  @State imageKnifeOption: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
   @State imageKnifeOption3: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
 
   @State imageKnifeOption4: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
   @State imageKnifeOption5: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
   @State imageKnifeOption6: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
 
   build() {
@@ -99,10 +99,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.gifSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -132,10 +132,8 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.gifSample'),
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 },
                 dontAnimateFlag: true
               }
 
@@ -169,10 +167,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -201,10 +199,9 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 },
                 dontAnimateFlag: true
               };
             })
@@ -213,7 +210,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(200).height(200)
 
         }
 
@@ -240,12 +237,12 @@ struct TestPreloadPage {
 
             Button('本地资源svg')
               .onClick(() => {
-              this.ImageKnifeOption = {
+              this.imageKnifeOption = {
                 loadSrc: $r('app.media.svgSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -278,12 +275,12 @@ struct TestPreloadPage {
 
             Button('网络资源svg')
               .onClick(() => {
-              this.ImageKnifeOption = {
+              this.imageKnifeOption = {
                 loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/4dc8463e-8ac6-4eb4-862c-783bf486a242.svg',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -293,7 +290,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200)
 
         }
 
@@ -322,10 +319,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption3 = {
                 loadSrc: $r('app.media.jpgSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -360,10 +357,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption3 = {
                 loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -371,7 +368,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(200).height(200)
 
         }
 
@@ -400,10 +397,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption4 = {
                 loadSrc: $r('app.media.bmpSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -438,10 +435,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption4 = {
                 loadSrc: 'https://img-blog.csdn.net/20140514114029140',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -449,7 +446,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(200).height(200)
 
         }
 
@@ -478,10 +475,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption5 = {
                 loadSrc: $r('app.media.pngSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -516,10 +513,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption5 = {
                 loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -527,7 +524,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }).width(200).height(200)
 
         }
 
@@ -556,10 +553,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption6 = {
                 loadSrc: $r('app.media.jpgSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -594,10 +591,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption6 = {
                 loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -605,7 +602,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }).width(200).height(200)
 
         }
       }