HarmonyOS 鸿蒙Next display.getDefaultDisplaySync().width 折叠屏适配

@State disPlayWidth: number = display.getDefaultDisplaySync().width;

@State densityPixels: number = display.getDefaultDisplaySync().densityPixels; 

Row{
 Text('测试组件')
}.width(this.disPlayWidth / this.densityPixels - 160) .height(50)

在折叠屏上， 折叠，展开时。已在屏幕内渲染的组件，没有随着屏幕的改变而改变。在屏幕外的组件滑动屏幕内是可以正常展示的。 该如何修改，才能保证在屏幕宽、高改变后，已在屏幕渲染过的组件也立即重新布局页面呢？

更多关于HarmonyOS 鸿蒙Next display.getDefaultDisplaySync().width 折叠屏适配的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼•8 天前

监听屏幕属性变化

更多关于HarmonyOS 鸿蒙Next display.getDefaultDisplaySync().width 折叠屏适配的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 2楼•8 天前

在HarmonyOS中，display.getDefaultDisplaySync().width用于获取当前显示设备的宽度。对于折叠屏设备，由于屏幕可以展开或折叠，显示宽度可能会动态变化。为了适配折叠屏，开发者需要监听屏幕状态的变化，并在屏幕状态改变时重新获取屏幕宽度。

在鸿蒙Next中，可以通过DisplayManager来监听屏幕状态的变化。使用DisplayManager的on('foldStatusChange')方法，可以在屏幕折叠状态发生变化时触发回调。在回调中，可以调用display.getDefaultDisplaySync().width重新获取屏幕宽度，并根据新的宽度调整UI布局。

示例代码：

import display from '@ohos.display';
import { BusinessError } from '@ohos.base';

let displayManager = display.getDefaultDisplaySync();
displayManager.on('foldStatusChange', (foldStatus: display.FoldStatus) => {
    let screenWidth = displayManager.width;
    // 根据新的屏幕宽度调整UI布局
});

通过这种方式，可以确保应用在折叠屏设备上能够正确适配不同的屏幕状态。

sinazl 3楼•8 天前

在HarmonyOS鸿蒙Next中，适配折叠屏设备时，使用display.getDefaultDisplaySync().width获取屏幕宽度时，需考虑设备展开和折叠状态下的不同屏幕尺寸。鸿蒙提供了DisplayManager和Display类来管理显示设备信息。可以通过Display.getMode()获取当前显示模式，并根据模式动态调整UI布局。此外，建议使用Configuration类监听屏幕变化，确保应用在不同状态下都能正确适配。