【關鍵詞】
響應式佈局、摺疊屏、橫豎屏
【問題背景】
當前開發者在開發快應用時，往往將designWidth設置爲設備屏幕的寬度，這時，應用的內容會隨着設備寬度的變大而拉伸顯示，導致在大屏、橫屏、摺疊屏展開時顯示效果不好。
在摺疊屏合起和展開的效果如下，可以看出頁面各元素尺寸在展開時明顯變大了。
【解決方案】
通過使用快應用的響應式佈局能力開發新應用或者改造已有應用，可以使快應用在手機、平板、智慧屏等各種尺寸的設備都有良好的展示效果。
一、配置manifest文件
1、將minPlatformVersion配置爲1066及以上版本
2、修改config節點下的designWidth屬性爲device-width。
二、佈局頁面元素
根據常見的屏幕寬度對頁面元素的尺寸和排列位置進行規劃。常見屏幕寬度如下：
- 正常手機豎屏的寬度：360px
- 正常手機橫屏的寬度：640px、720px 等
- 摺疊屏展開的寬度：733px
- 摺疊屏合起來時的寬度：383px
三、動態佈局
根據屏幕的寬度來判斷一行渲染幾張圖片，以下示例實現了根據屏幕寬度來控制list展示列數的效果。
當簡單的動態佈局無法實現所需效果時，可以考慮使用MediaQuery進行適配，詳細參見鏈接：
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-mediaquery-0000001170210011
實現如下：
<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
<div class="btn-container">
<text onclick="switchOrientation" class="orientation-btn">{{$t('message.framework.screenSwitch.switchScreen')}}</text>
</div>
<list class="list">
<list-item type="box" class="list-item bg-blue"></list-item>
<list-item type="box" class="list-item bg-green"></list-item>
<list-item type="box" class="list-item bg-gray"></list-item>
<list-item type="box" class="list-item bg-red"></list-item>
</list>
</div>
</template>
<style lang="sass">
.container {
flex-direction: column;
padding-bottom: 50px;
}
.bg-green {
background-color: #64bb5c;
}
.bg-blue {
background-color: #46b1e3;
}
.bg-gray {
background-color: #5d5e5d;
}
.bg-red {
background-color: #e64566;
}
.orientation-btn {
color: #0a59f7;
font-size: 32px;
font-weight: 500;
}
.list {
margin-left: 32px;
margin-right: 32px;
margin-top: 30px;
height: 500px;
}
.list-item {
height: 200px;
margin-right: 20px;
margin-bottom: 20px;
}
.btn-container{
height: 100px;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 599) {
.list{
columns: 3;
}
}
@media screen and (min-width: 600) {
.list{
columns: 4;
}
}
</style>
<script>
const orientationMap = {
portrait: 'portrait',
landscape: 'landscape'
}
import configuration from '@system.configuration';
module.exports = {
public: {
orientation: orientationMap.portrait
},
onInit: function () {
this.$page.setTitleBar({ text: this.$t('message.framework.screenSwitch.barTitle') });
},
switchOrientation() {
if (this.orientation === orientationMap.portrait) {
this.orientation = orientationMap.landscape;
} else {
this.orientation = orientationMap.portrait;
}
configuration.setScreenOrientation({
orientation: this.orientation,
})
}
}
</script>豎屏時效果：
橫屏時效果：
欲瞭解更多更全技術文章，歡迎訪問https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh