【快應用】折疊屏展開與折疊判斷案例

 問題背景：

快應用在折疊屏手機上使用時，當展開或者折疊時，快應用的樣式如果是固定的，在展開後會變得異常，這個應該如何去适配呢？

解決方案：可以的，快應用中提供了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>