【Key words】
Responsive layout, folding screen, horizontal and vertical screen
【Problem background】
When developing quick apps, developers often set the designWidth to the width of the device screen. At this time, the content of the app will be stretched and displayed as the device width becomes larger, resulting in large screens, landscape screens, and folding screens. The display is not good.
The effect of closing and unfolding on the folding screen is as follows. It can be seen that the size of each element on the page becomes significantly larger when unfolded.
【solution】
By using the responsive layout capability of quick apps to develop new apps or transform existing apps, quick apps can have good display effects on devices of various sizes, such as mobile phones, tablets, and smart screens.
1. Configure the manifest file
1. Configure minPlatformVersion to 1066 and above
2. Modify the designWidth attribute under the config node to device-width.
2. Layout page elements
Plan the size and arrangement of page elements based on common screen widths. Common screen widths are as follows:
- The width of normal mobile phone vertical screen: 360px
- The width of normal mobile phone landscape screen: 640px, 720px, etc.
- Expanded width of the folding screen: 733px
- Width when folded screen is closed: 383px
3. Dynamic layout
According to the width of the screen to determine how many images are rendered in a row, the following example realizes the effect of controlling the number of columns displayed in the list according to the width of the screen.
When the simple dynamic layout cannot achieve the desired effect, you can consider using MediaQuery for adaptation, see the link for details:
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-mediaquery-0000001170210011
The implementation is as follows:
<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>The effect when the screen is vertical:
The effect when the screen is horizontal:
For more comprehensive technical articles, please visit https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh