
温馨提示:本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦!

概念 | 说明 | 使用场景 |
|---|---|---|
窗口尺寸 | 应用窗口的宽高信息 | 布局计算、UI适配 |
物理像素 | 设备实际像素点 | 设备显示 |
视口像素 | 逻辑显示单位 | UI开发 |
class WindowSizeManager {
// 存储窗口尺寸信息
private size: window.Size = { width: 0, height: 0 };
constructor() {
// 获取当前窗口实例
window.getLastWindow(getContext()).then((value: window.Window) => {
// 获取窗口属性中的矩形信息
const rect: window.Rect = value.getWindowProperties().windowRect;
// 转换物理像素到视口像素
this.size.width = px2vp(rect.width);
this.size.height = px2vp(rect.height);
console.log(`[windowWidth]${this.size.width} [windowHeight]${this.size.height}`);
})
}
// 获取窗口尺寸
get(): window.Size {
return this.size;
}
}// 导出单例实例
export const windowSizeManager: WindowSizeManager = new WindowSizeManager();为什么使用单例模式?
window.getLastWindow(getContext()).then((value: window.Window) => {
// 处理窗口信息
})异步操作的必要性:
this.size.width = px2vp(rect.width);
this.size.height = px2vp(rect.height);px2vp转换的重要性:
// 获取窗口尺寸
const windowSize = windowSizeManager.get();
console.log(`Window size: ${windowSize.width} x ${windowSize.height}`);场景 | 使用方式 | 示例代码 |
|---|---|---|
布局计算 | 获取可用空间 |
|
居中定位 | 计算居中坐标 |
|
响应式布局 | 根据窗口大小调整 |
|
// 推荐在组件初始化时获取窗口尺寸
aboutToAppear() {
const size = windowSizeManager.get();
// 使用窗口尺寸进行初始化
}// 在需要响应窗口变化的地方
onWindowResize(size: window.Size) {
// 更新布局或其他处理
}try {
const size = windowSizeManager.get();
// 使用尺寸信息
} catch (error) {
console.error('Failed to get window size:', error);
// 使用默认值或错误处理
}通过合理使用WindowSizeManager,可以有效管理应用的窗口尺寸信息,为UI布局和适配提供可靠的基础。在实际开发中,要注意异步操作和像素转换的处理,确保应用在不同设备上都能正常显示。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。