HarmonyOS 鸿蒙Next中【快应用】折叠屏展开与折叠判断案例

HarmonyOS 鸿蒙Next中【快应用】折叠屏展开与折叠判断案例 问题背景：

快应用在折叠屏手机上使用时，当展开或者折叠时，快应用的样式如果是固定的，在展开后会变得异常，这个应该如何去适配呢？

解决方案：可以的，快应用中提供了onConfigurationChanged来监听应用配置的改变，其中的foldScreenMode属性就是屏幕的物理大小改变（如折叠屏折叠/展开）时触发。当这个参数返回时，可以调用device.getInfoSync()接口根据返回的screenWidth来判断是展开还是折叠，并以此来设置不同的样式属性。

相关代码：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container" style="flex-direction: column">
    <input type="button" value="hello" />
  </div>
</template>

<style lang="sass"></style> 
<script>
  import device from '@system.device';
  module.exports = {
    data: {
      width: 0
    },
    onShow(options) {
      const res = device.getInfoSync();
      //先获取折叠屏折叠的宽度
      this.width = res.screenWidth
      console.log("width:", this.width);
    },
    onConfigurationChanged(e) {
      if (e.type === "foldScreenMode") {
        try {
          //判断宽度的大小决定是展开还是折叠
          const res = device.getInfoSync();
          console.log("res.screenwidth:", res.screenWidth);
          //返回的宽度与折叠的宽度对比
          if (res.screenWidth === this.width) {
            //设置折叠时的样式
            console.log("当前是折叠态");
          } else {
            //设置展开时样式
            console.log("当前是展开态");
          }
        } catch (e) {
          console.log(e.code + e.message);
        }
      }
    }
  }
</script>