鸿蒙appUI布局适配原有的设计

1.创建一个ArkTS工具文件 DisPlayInfo

import {display} from '@kit.ArkUI'

class DisPlayInfo {
  private screenWidth = 0;
  private screenHeight = 0;
  private static readonly STANDARD_WIDTH = 750;
  private static readonly STANDARD_HEIGHT = 1334;

  constructor() {
    let screenWidth = display.getDefaultDisplaySync().width;
    let screenHeight = display.getDefaultDisplaySync().height;
    this.screenWidth = Math.min(screenWidth, screenHeight);
    this.screenHeight = Math.max(screenWidth, screenHeight);
    console.info("screenWidth " + screenWidth + " screenHeight " + this.screenHeight)
  }

  public getWidth(width: number): PX {
    let realWidth: number = Math.floor(width * this.screenWidth / DisPlayInfo.STANDARD_WIDTH)
    return `${realWidth}px`
  }

  public getHeight(height: number): PX {
    return `${Math.floor((this.screenHeight / DisPlayInfo.STANDARD_HEIGHT) * height)}px`
  }

}

export default new DisPlayInfo();

2.在需要使用的ArkTS文件里

2.1引入工具文件
import DisPlayInfo from '../../util/DisPlayInfo'

2.2在使用的地方
Image(this.bannerImage)
  .width(DisPlayInfo.getWidth(88))
  .height(DisPlayInfo.getWidth(88))
  .objectFit(ImageFit.Fill)