HarmonyOS Next 元服务的折叠屏适配简单说明原创

第一小趴菜

发布于 2024-11-28 12:33

浏览

0收藏

前言

折叠屏的适配在api11及其之前挺麻烦，但是api12之后，display的api接口可以在元服务中使用

步骤

1.获取当前屏幕折叠状态

FoldStatus表示当前可折叠设备的折叠状态枚举。

我们获取屏幕的状态获取的就为FoldStatus的值。

FoldStatus：

名称	值	说明
FOLD_STATUS_UNKNOWN	0	表示设备当前折叠状态未知。
FOLD_STATUS_EXPANDED	1	表示设备当前折叠状态为完全展开。
FOLD_STATUS_FOLDED	2	表示设备当前折叠状态为折叠。
FOLD_STATUS_HALF_FOLDED	3	表示设备当前折叠状态为半折叠。半折叠指完全展开和折叠之间的状态。

有需要的可以根据上方表格进行查询。

查询的方法也很简单

import { display } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  // 我们获取到的FoldStatus
  @State windowStatusType: display.FoldStatus = display.getFoldStatus();

  build() {
    RelativeContainer() {
      // 渲染查看
      Text(String(JSON.stringify(this.windowStatusType)))
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
              .alignRules({
                center: { anchor: '__container__', align: VerticalAlign.Center },
                middle: { anchor: '__container__', align: HorizontalAlign.Center }
              })
    }
        .height('100%')
        .width('100%')

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

显示的效果：
HarmonyOS Next 元服务的折叠屏适配简单说明-鸿蒙开发者社区

但是这样会有一个问题，那就是我们切换折叠屏的时候，不会自动刷新，比如我们如果给他折上，上面显示的数字依旧是1，没有刷新，所以我们下一步就是要绑定状态回调了

2.绑定回调

我们需要让屏幕状态改变的时候，及时的获取到新的状态，这个时候，我们可以通过display.on这个api，进行回调的绑定，我们只要加上下面这段代码，就可以完成回调的绑定

    aboutToAppear(): void {
      let callback: Callback<display.FoldStatus> = (data: display.FoldStatus) => {
        this.windowStatusType = data;
      };
      display.on('foldStatusChange', callback);
    }
1.
2.
3.
4.
5.
6.

这个时候，我们再来试一下效果
HarmonyOS Next 元服务的折叠屏适配简单说明-鸿蒙开发者社区

这样，我们就把初步内容搞定了

完整代码：

import { display } from '@kit.ArkUI';
import { Callback } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  // 我们获取到的FoldStatus
  @State windowStatusType: display.FoldStatus = display.getFoldStatus();

    aboutToAppear(): void {
      let callback: Callback<display.FoldStatus> = (data: display.FoldStatus) => {
        this.windowStatusType = data;
      };
      display.on('foldStatusChange', callback);
    }

  build() {
    RelativeContainer() {
      // 渲染查看
      Text(String(JSON.stringify(this.windowStatusType)))
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
              .alignRules({
                center: { anchor: '__container__', align: VerticalAlign.Center },
                middle: { anchor: '__container__', align: HorizontalAlign.Center }
              })
    }
        .height('100%')
        .width('100%')

  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

3.页面使用

这个时候我们就可以运用三元表达式或者简单的if语句对我们的折叠屏进行修改，例如：

import { display } from '@kit.ArkUI';
import { Callback } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  // 我们获取到的FoldStatus
  @State windowStatusType: display.FoldStatus = display.getFoldStatus();

    aboutToAppear(): void {
      let callback: Callback<display.FoldStatus> = (data: display.FoldStatus) => {
        this.windowStatusType = data;
      };
      display.on('foldStatusChange', callback);
    }

  build() {
    Flex({ direction: this.windowStatusType == 2?FlexDirection.Column:FlexDirection.Row }) {
      Text('1').height(this.windowStatusType == 2?'50%':'99%').width(this.windowStatusType == 2?'99%':'50%').backgroundColor(0xF5DEB3)
      Text('2').height(this.windowStatusType == 2?'50%':'99%').width(this.windowStatusType == 2?'99%':'50%').backgroundColor(0xD2B48C)
    }
    .height('100%')
    .width('100%')
    .padding(10)
    .backgroundColor(0xAFEEEE)
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

这段代码通过Flex和三元表达式，实现了一个简单的对于折叠屏的屏幕使用，效果如下

HarmonyOS Next 元服务的折叠屏适配简单说明-鸿蒙开发者社区

结尾

以上就是对折叠屏的适配部分的一个讲解，对于可以直接拿来用的部分，在下面总结一下
总结：

  @State windowStatusType: display.FoldStatus = display.getFoldStatus();

    aboutToAppear(): void {
      let callback: Callback<display.FoldStatus> = (data: display.FoldStatus) => {
        this.windowStatusType = data;
      };
      display.on('foldStatusChange', callback);
    }
1.
2.
3.
4.
5.
6.
7.
8.

分类

标签