【快应用】折叠屏展开与折叠判断案例
原创
©著作权归作者所有：来自51CTO博客作者华为开发者论坛的原创作品，请联系作者获取转载授权，否则将追究法律责任
问题背景：
快应用在折叠屏手机上使用时，当展开或者折叠时，快应用的样式如果是固定的，在展开后会变得异常，这个应该如何去适配呢？
解决方案：可以的，快应用中提供了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>
欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
