【Palabras clave】
Diseño receptivo, pantalla plegable, pantalla horizontal y vertical.
【Antecedentes del problema】
Al desarrollar aplicaciones rápidas, los desarrolladores a menudo configuran designWidth al ancho de la pantalla del dispositivo. En este momento, el contenido de la aplicación se estirará y se mostrará a medida que el ancho del dispositivo sea más grande, lo que dará como resultado pantallas grandes, pantallas horizontales y pantallas plegables. La pantalla no es buena.
El efecto de cerrar y desplegar en la pantalla plegable es el siguiente: se puede ver que el tamaño de cada elemento en la página se vuelve significativamente mayor cuando se despliega.
【solución】
Al usar la capacidad de diseño receptivo de las aplicaciones rápidas para desarrollar nuevas aplicaciones o transformar las aplicaciones existentes, las aplicaciones rápidas pueden tener buenos efectos de visualización en dispositivos de varios tamaños, como teléfonos móviles, tabletas y pantallas inteligentes.
1. Configurar el archivo de manifiesto
1. Configure minPlatformVersion a 1066 y superior
2. Modifique el atributo designWidth en el nodo de configuración a device-width.
2. Elementos de la página de diseño
Planifique el tamaño y la disposición de los elementos de la página según los anchos de pantalla comunes. Los anchos de pantalla comunes son los siguientes:
- El ancho de la pantalla vertical normal del teléfono móvil: 360px
- El ancho de la pantalla horizontal normal del teléfono móvil: 640 px, 720 px, etc.
- Ancho ampliado de la pantalla plegable: 733px
- Ancho cuando la pantalla plegada está cerrada: 383px
3. Diseño dinámico
De acuerdo con el ancho de la pantalla para determinar cuántas imágenes se representan en una fila, el siguiente ejemplo realiza el efecto de controlar el número de columnas que se muestran en la lista de acuerdo con el ancho de la pantalla.
Cuando el diseño dinámico simple no puede lograr el efecto deseado, puede considerar usar MediaQuery para la adaptación, consulte el enlace para obtener más detalles:
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-mediaquery-0000001170210011
La implementación es la siguiente:
<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>El efecto cuando la pantalla es vertical:
El efecto cuando la pantalla es horizontal:
Para obtener artículos técnicos más completos, visite https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh