前言

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

步骤

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

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

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

FoldStatus：

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

查询的方法也很简单

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.绑定回调

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

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

这个时候，我们再来试一下效果

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

完整代码：

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%')

  }
}

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)
  }
}

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

结尾

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

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

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