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

2.pages目录中所有测试的页面,ImageKnifeComponent的入参ImageKnifeOption发生了改变 Signed-off-by: zhoulisheng1 <zhoulisheng1@huawei.com>
2022-12-06 23:09:05 -08:00 · 2022-12-06 23:09:05 -08:00 · 40af0d2285
parent 791cf55158
commit 40af0d2285
13 changed files with 198 additions and 260 deletions
--- a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets
+++ b/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})
-            }.editable(true)
+              ImageKnifeComponent({imageKnifeOption:item}).width(300).height(300)
+            }
          }, item => item.loadSrc)
        }
        .listDirection(Axis.Vertical) // 排列方向
--- a/entry/src/main/ets/pages/frescoImageTestCasePage.ets
+++ b/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)
--- a/entry/src/main/ets/pages/frescoRetryTestCasePage.ets
+++ b/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%')
--- a/entry/src/main/ets/pages/index.ets
+++ b/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 }) {
--- a/entry/src/main/ets/pages/showErrorholderTestCasePage.ets
+++ b/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.imageKnifeOption })
-        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
-        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(300).height(300)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(300).height(300)
      }
    }
    .width('100%')
--- a/entry/src/main/ets/pages/testAllCacheInfoPage.ets
+++ b/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)

      }
    }
--- a/entry/src/main/ets/pages/testGifDontAnimatePage.ets
+++ b/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'),
-      margin:{left:15,top:15,right:15,bottom:15}
+      errorholderSrc: $r('app.media.icon_failed')
    };


@ -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)

      }
    }
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets
+++ b/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'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
             };

           }).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'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
             };

           }).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'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
             };

           }).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'),
-                margin:{left:5,top:5,right:5,bottom:5}
+                errorholderSrc: $r('app.media.icon_failed')
              };
           }).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'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
             };
           }).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'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
             };
           }).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'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
             };
           }).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'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
             };
           }).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'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
             };
           }).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'),
-                margin:{left:5,top:5,right:5,bottom:5},
+                errorholderSrc: $r('app.media.icon_failed')
              };
            }).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)


--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets
+++ b/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)


--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets
+++ b/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)


--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets
+++ b/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)

      }
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets
+++ b/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)

      }
--- a/entry/src/main/ets/pages/testPreloadPage.ets
+++ b/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)

        }
      }