问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

HarmonyOS Next如何获取屏幕宽高？

头像
老司机
    1.4k1211
    HarmonyOSharmonyos-next
    阅读 30
    avatarAI BotBETA

    在HarmonyOS Next中，可以通过以下方式获取屏幕的宽高：

    方法一：使用getDefaultDisplaySync方法

    1. 导入display模块：

      import display from '@ohos.display';

    2. 获取默认Display对象：

      let displayData = display.getDefaultDisplaySync();

    3. 获取屏幕宽高：

      let screenWidth = displayData.width;  // 屏幕宽
let screenHeight = displayData.height; // 屏幕高

    方法二：封装成工具类（可选）

    为了方便在多个页面或组件中使用，可以将获取屏幕宽高的逻辑封装成一个工具类。

    1. 创建工具类文件（例如ScreenUtils.ts）：

      import display from '@ohos.display';

export class ScreenUtils {
    private static instance: ScreenUtils;
    private defaultDisplay: display.Display | null = null;

    private constructor() {
        this.defaultDisplay = display.getDefaultDisplaySync();
    }

    public static getInstance(): ScreenUtils {
        if (!ScreenUtils.instance) {
            ScreenUtils.instance = new ScreenUtils();
        }
        return ScreenUtils.instance;
    }

    // 获取屏幕宽度（px单位）
    getScreenWidthPx(): number {
        return this.defaultDisplay?.width ?? -1;
    }

    // 获取屏幕宽度（vp单位）
    getScreenWidthVp(): number {
        return px2vp(this.getScreenWidthPx()); // 假设px2vp是一个将px转换为vp的函数
    }

    // 获取屏幕高度（px单位）
    getScreenHeightPx(): number {
        return this.defaultDisplay?.height ?? -1;
    }

    // 获取屏幕高度（vp单位）
    getScreenHeightVp(): number {
        return px2vp(this.getScreenHeightPx()); // 假设px2vp是一个将px转换为vp的函数
    }
}

// 假设的px2vp函数实现（需要根据实际进行转换）
function px2vp(px: number): number {
    // 这里需要实现具体的px到vp的转换逻辑
    // 返回一个vp单位的值
    return px * (1 / someDpiValue); // someDpiValue是需要根据设备获取的DPI值
}

    2. 在页面或组件中使用工具类：

      import { ScreenUtils } from '../utils/ScreenUtils';

@Entry
@Component
struct DisplayPage {
    private screenWidth = ScreenUtils.getInstance().getScreenWidthVp();
    private screenHeight = ScreenUtils.getInstance().getScreenHeightVp();

    build() {
        Column() {
            Text(`屏幕宽: ${this.screenWidth}`).fontSize(20).fontWeight(FontWeight.Bold)
            Text(`屏幕高: ${this.screenHeight}`).fontSize(20).fontWeight(FontWeight.Bold)
        }
        .width('100%')
        .margin({ top: 100 })
    }
}

    通过以上方法，你可以在HarmonyOS Next应用中获取屏幕的宽高，并根据需要进行使用。

    1 个回答
    得票最新
    头像
    轻口味
      17.5k311274
      查看全部 1 个回答
      推荐问题
      logo
      HarmonyOS
      子站问答
      访问
      宣传栏