【Mots clés】
Mise en page responsive, écran pliant, écran horizontal et vertical
【Contexte du problème】
Lorsque les développeurs développent des applications rapides, ils définissent souvent le designWidth sur la largeur de l'écran de l'appareil. À ce stade, le contenu de l'application sera étiré et affiché à mesure que la largeur de l'appareil augmente. L'affichage n'est pas bon.
L'effet de la fermeture et du dépliage sur le paravent est le suivant : on peut voir que la taille de chaque élément de la page devient nettement plus grande lorsqu'il est déplié.
【solution】
En utilisant la capacité de mise en page réactive des applications rapides pour développer de nouvelles applications ou transformer des applications existantes, les applications rapides peuvent être bien affichées sur des appareils de différentes tailles, tels que les téléphones mobiles, les tablettes et les écrans intelligents.
1. Configurez le fichier manifeste
1. Configurez minPlatformVersion sur 1066 et plus
2. Modifiez l'attribut designWidth sous le nœud config en device-width.
2. Éléments de page de mise en page
Planifiez la taille et la disposition des éléments de la page en fonction des largeurs d'écran courantes. Les largeurs d'écran courantes sont les suivantes :
- La largeur de l'écran vertical normal du téléphone portable : 360 px
- La largeur de l'écran paysage normal du téléphone portable : 640px, 720px, etc.
- Largeur agrandie du paravent : 733px
- Largeur lorsque l'écran plié est fermé : 383 px
3. Disposition dynamique
En fonction de la largeur de l'écran pour déterminer le nombre d'images rendues dans une rangée, l'exemple suivant réalise l'effet de contrôler le nombre de colonnes affichées dans la liste en fonction de la largeur de l'écran.
Lorsque la mise en page dynamique simple ne peut pas obtenir l'effet souhaité, vous pouvez envisager d'utiliser MediaQuery pour l'adaptation, voir le lien pour plus de détails :
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-mediaquery-0000001170210011
La mise en œuvre est la suivante :
<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>L'effet lorsque l'écran est vertical :
L'effet lorsque l'écran est horizontal :
Pour des articles techniques plus complets, veuillez visiter https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh