缩略图变成完整图时，显示变形
==============

#### 问题现象

点击缩略图显示完整图片时，图片显示变形。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/33/v3/WBKRkmESTEyqIT8TLNQM4w/zh-cn_image_0000002628398446.png?HW-CC-KV=V1&HW-CC-Date=20260709T133920Z&HW-CC-Expire=86400&HW-CC-Sign=471D31A7F5E51CB77E10FF52A2E29D619EE8E6E9403040D1428DAE9CF4434CAC "点击放大")

#### 背景知识

*   [Image](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image)为图片组件，常用于在应用中显示图片。
*   设置Image组件的[objectFit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image#objectfit)属性可调整图片的填充效果。
*   通过Image组件的[onComplete](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image#oncomplete)事件，可在图片数据加载成功和解码成功时获取图片尺寸。

#### 问题定位

1.  使用DevEco Testing查看问题组件，问题组件为Image组件。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/97/v3/Z3EbjZEiSAmZmcGR1MKh9Q/zh-cn_image_0000002658797725.png?HW-CC-KV=V1&HW-CC-Date=20260709T133920Z&HW-CC-Expire=86400&HW-CC-Sign=ED4F2BC9A8635BECB5A31952FF92313342D15039721ED5413AD5D6E443649FDF "点击放大")
    
2.  查看该Image组件的设置，显示完整图片时的组件尺寸设置不合理，高度为屏幕的高度而不是等比例缩放下完整图片的高度。
    
    _// 全屏显示图片_
    @Builder
    export function DialogBuilder() {
      Dialog();
    }
    
    @Component
    export struct Dialog {
      pageInfos: NavPathStack = new NavPathStack();
    
      build() {
        NavDestination() {
          Stack() {
            Image($r('app.media.imggroup2')) _// $r('app.media.imggroup2')需要更换为开发者需要的图片资源_
              .width('80%')
              .height('100%') _// 高度与屏幕一致_
              .objectFit(ImageFit.Fill); _// 图片充满显示边界_
          }
          .height('100%')
        }
        .height('100%')
      }
    }
    

#### 分析结论

显示完整图片时的Image组件尺寸设置不合理，导致图片显示变形。

#### 修改建议

不设置Image组件的高度，按照设置的宽度进行等比例缩放。

import { window } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct NavigationCustomTransitionExample {
  pageInfos: NavPathStack = new NavPathStack();

  aboutToAppear() {
    this.pageInfos.pushPath({ name: 'PageMain' }, false);
  }

  build() {
    Stack() {
      Navigation(this.pageInfos)
        .hideNavBar(true)
        .width('100%')
        .height('100%');
    }
    .width('100%')
    .height('100%')
    .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM\]);
  }
}

@Builder
export function PageMainBuilder() {
  PageMain();
}

_// 全屏显示图片_
@Builder
export function DialogBuilder() {
  Dialog();
}

@Component
export struct Dialog {
  pageInfos: NavPathStack = new NavPathStack();

  aboutToAppear(): void {
    let context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setWindowSystemBarEnable(\[\]);
    });
  }

  aboutToDisappear(): void {
    let context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setWindowSystemBarEnable(\['status', 'navigation'\]);
    });
  }

  build() {
    NavDestination() {
      Stack() {
       _ // 图片过长时可滑动_
        Scroll() {
          Image($r('app.media.imggroup2')) _// $r('app.media.imggroup2')需要更换为开发者需要的图片资源_
            .objectFit(ImageFit.Contain)
            .width('80%');
         _ // 不设置Image组件的高度，按照设置的宽度进行等比例缩放_
        }
        .height('100%')
        .width('100%');
      }
      .height('100%')
      .width('100%')
      .onClick(() => {
        this.pageInfos.pop(); _// 完整图时点击缩小，显示缩略图_
      })
      .backgroundColor(Color.Black)
      .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM\]);
    }
    .hideTitleBar(true)
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack;
    })
    .height('100%')
    .width('100%')
    .mode(NavDestinationMode.DIALOG)
    .systemTransition(NavigationSystemTransitionType.NONE)
    .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM\]);
  }
}

@Component
export struct PageMain {
  pageInfos: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Stack() {
        Image($r('app.media.imggroup2')) _// $r('app.media.imggroup2')需要更换为开发者需要的图片资源_
          .width(300)
          .height(300)
          .objectFit(ImageFit.CENTER)
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'Dialog' }); _// 缩略图时点击放大，显示完整图片_
          });
      }
      .width('100%')
      .height('100%');
    }
    .hideTitleBar(true)
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack;
    })
    .height('100%')
    .width('100%')
    .mode(NavDestinationMode.STANDARD);
  }
}

src/main/resources/base/profile/route\_map.json：

{
  "routerMap": \[
    {
      "name": "PageMain",
      "pageSourceFile": "src/main/ets/pages/Index.ets",
      "buildFunction": "PageMainBuilder"
    },
    {
      "name": "Dialog",
      "pageSourceFile": "src/main/ets/pages/Index.ets",
      "buildFunction": "DialogBuilder"
    }
  \]
}

src/main/module.json5：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module\_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": \[
      "phone"
    \],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main\_pages",
    "abilities": \[
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility\_desc",
        "icon": "$media:layered\_image",
        "label": "$string:EntryAbility\_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start\_window\_background",
        "exported": true,
        "skills": \[
          {
            "entities": \[
              "entity.system.home"
            \],
            "actions": \[
              "ohos.want.action.home"
            \]
          }
        \]
      }
    \],
    "extensionAbilities": \[
      {
        "name": "EntryBackupAbility",
        "srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
        "type": "backup",
        "exported": false,
        "metadata": \[
          {
            "name": "ohos.extension.backup",
            "resource": "$profile:backup\_config"
          }
        \],
      }
    \],
    "routerMap": "$profile:router\_map"
  }
}

效果图如下：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/69/v3/rGo7EVOOSBGlMUtK86Afbg/zh-cn_image_0000002628558360.png?HW-CC-KV=V1&HW-CC-Date=20260709T133920Z&HW-CC-Expire=86400&HW-CC-Sign=F81CE83D2074A9147F04C75B8DE18ECE801CB38A30F0563D2C0BC9C8B72C7EC8 "点击放大")