启动页中的图片宽高比异常
============

#### 问题现象

应用启动时，启动页显示的图片显示异常，图片中的字体存在明显的拉伸痕迹，文字整体被压扁了。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ab/v3/1Q_4q5UOTdmr5BOyBZMTDQ/zh-cn_image_0000002658918839.png?HW-CC-KV=V1&HW-CC-Date=20260709T134024Z&HW-CC-Expire=86400&HW-CC-Sign=6F5356E56B614CC6C00A39B294CC7792FC511A4685914B7DDF9F1F36F5FC1466 "点击放大")

#### 背景知识

*   [setPreferredOrientation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#setpreferredorientation9)：设置主窗口的显示方向属性。
*   [objectfit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image#objectfit)：设置图片的填充效果。
*   [ImageFit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enums#imagefit)枚举：ImageFit.Fill不保持宽高比进行放大缩小，使得图片或视频充满显示边界，对齐方式为水平居中。
*   [abilities标签](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/module-configuration-file#abilities标签)中的orientation配置，可以标识当前UIAbility组件启动时的方向，支持配置枚举，或启动方向资源索引。

#### 问题定位

1.  观察应用竖屏冷启动过程，启动页短暂竖屏展示（其中的文字显示异常）后切换为横屏展示（文字显示正常）之后再进入应用首页。
2.  使用DevEcoTesting的UIViewer工具检查UI结构，启动页中使用了Image组件展示图片。查找原始图片资源，确认其宽高是1920\*1080，适合横屏展示，但此时是竖屏显示。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5a/v3/szwrq_P6SUG7F6vWYYrZhA/zh-cn_image_0000002628399624.png?HW-CC-KV=V1&HW-CC-Date=20260709T134024Z&HW-CC-Expire=86400&HW-CC-Sign=7A7F32CCF2B5C6882E17AEA4F68CA2EB811475BBF63E1AD577138109B88BD736 "点击放大")
    
3.  检查Image组件采用的填充效果。是ImageFit.Fill。
    
    Image($r('app.media.back\_font'))
      .objectFit(ImageFit.Fill)
    

#### 分析结论

应用冷启动时，拉起启动页未提前切换至横屏。启动页竖屏展示，且图片未保持宽高比缩放，导致启动页中的文字字体宽度不足，辨识度低。

#### 修改建议

*   建议在拉起启动页前（推荐在EntryAbility的onWindowStageCreate方法中）提前旋转屏幕至横屏。
    
    import { UIAbility } from '@kit.AbilityKit';
    import { window } from '@kit.ArkUI';
    
    export default class EntryAbility extends UIAbility {
      onWindowStageCreate(windowStage: window.WindowStage): void {
    
        windowStage.loadContent('pages/SplashPage', (err) => {
          if (err.code) {
            _// 异常处理_
            return;
          }
         _ // 获取主窗口_
          windowStage.getMainWindow((err, data) => {
           _ // 切换窗口方向为横屏_
            data.setPreferredOrientation(window.Orientation.AUTO\_ROTATION\_LANDSCAPE\_RESTRICTED);
          });
        });
      }
    }
    
    效果如下：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3b/v3/xtBYw0RjS--PY3cRHs_jLg/zh-cn_image_0000002658798891.png?HW-CC-KV=V1&HW-CC-Date=20260709T134024Z&HW-CC-Expire=86400&HW-CC-Sign=8077F631C83B12EAAAFD2A831E6CB400A21917483E26832A55F4E5DB574781F4 "点击放大")
    
*   横屏应用可以配置应用仅支持横屏。在module.json5文件中，该文件的路径是src>main>module.json5，abilities标签下的当前UIAbility（默认是EntryAbility）中，添加orientation配置项，值为auto\_rotation\_landscape\_restricted，可以根据实际需要调整。
    
    {
      "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,
           _ // 配置当前UIAbility组件启动时的方向为（反向）横向_
            "orientation": "auto\_rotation\_landscape\_restricted",
            "skills": \[
              {
                "entities": \[
                  "entity.system.home"
                \],
                "actions": \[
                  "ohos.want.action.home"
                \]
              }
            \]
          }
        \],
      }
    }
    
    效果如下：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1d/v3/3VgH3eTnRNCZX12Uu_TiXw/zh-cn_image_0000002628559536.png?HW-CC-KV=V1&HW-CC-Date=20260709T134024Z&HW-CC-Expire=86400&HW-CC-Sign=0DFA280A6FF0BDC61040D170E6D48BA9E7E54125349C20583F3F18F1DA9F50E0 "点击放大")
    
*   将Image组件的填充效果改为保持宽高比缩放，但该方案可能会导致竖屏显示时图片中的文字缩小/放大。
    
    @Entry
    @Component
    struct SplashPage {
      build() {
        Column() {
          Image($r('app.media.back\_font'))
         _ // 配置图片保持宽高比适当缩放，水平居中，填充视图_
            .objectFit(ImageFit.Auto)
        }
        .height('100%')
        .width('100%')
      }
    }
    
    效果如下：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/10/v3/lmi6j7xUQ3S9QhtqP6MpnA/zh-cn_image_0000002658918847.png?HW-CC-KV=V1&HW-CC-Date=20260709T134024Z&HW-CC-Expire=86400&HW-CC-Sign=15507DE834454E74C5D81C7A30F289598FAD137A72B6FF686907D506903EC01C "点击放大")