鸿蒙学习笔记二十：屏幕适配

鸿蒙的屏幕适配我们采用了跟安卓一样的dimen方案，即将屏幕宽度分成375份，每份是一个dimen，具体公式如下：

dimen_1 = 屏幕宽度 / 屏幕密度 / 375

代码如下：

import display from '@ohos.display'


export class DimensStyle {
  private dimen_1: number = 0

  dimen(i: number): number {
    return Number((i * this.dimen_1).toFixed(2))
  }

  constructor() {
    let dip = 360
    if (display.getDefaultDisplaySync() && display.getDefaultDisplaySync().width && display.getDefaultDisplaySync().densityPixels) {
      dip = display.getDefaultDisplaySync().width / display.getDefaultDisplaySync().densityPixels
    }

    let dimen_1 = 1 * (dip / 375)
    this.dimen_1 = dimen_1
  }
}

用法如下：

Image('')
          .width(Dimens.dimen(15))
          .height(Dimens.dimen(3))

注意点：

1：需要在 DimensStyle 所在模块的 Index.ets 文件中进行声明，否则不能全局引用，具体声明代码如下：

import { DimensStyle } from "./src/main/ets/styles/DimensStyle"

const Dimens = new DimensStyle()

export {
  Dimens
}

2：这种方法不需要进行额外配置，也不用生成不同分辨率下的dimen文件，使用时系统会自动将自定义的dimen值进行转换