Diseño responsive con contenedores

Introducción a Power Apps

Luise Freese

Azure & Power Platform Architect

¿Por qué responsive?

 

  • La misma app se abre en móviles, tablets, portátiles
  • Un diseño fijo se corta en pantallas pequeñas, se pierde en grandes
  • Responsive = el diseño se adapta

$$

Móvil, tablet y portátil mostrando la misma app adaptando su diseño de una a varias columnas.

Introducción a Power Apps

Contenedores de diseño modernos

Ilustración que compara contenedores de diseño vertical y horizontal con controles hijos apilados frente a en paralelo.

 

  • Contenedor de diseño vertical, apila de arriba abajo
  • Contenedor de diseño horizontal, coloca de izquierda a derecha
  • Los controles modernos fluyen al espacio disponible
Introducción a Power Apps

Ancho y alto flexibles

 

  • FlexibleWidth y FlexibleHeight
  • On: el control se estira para llenar su contenedor
  • Off: el control mantiene un tamaño fijo

$$

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width
Introducción a Power Apps

LayoutMinWidth y LayoutMinHeight

Móvil vs. tablet mostrando LayoutMinWidth como el punto de corte donde el diseño pasa de una columna a panel lateral más contenido.

 

  • Un contenedor necesita espacio suficiente para maquetar bien
  • LayoutMinWidth = el ancho mínimo antes de reordenar
  • Activa un diseño distinto para móviles vs. tablets
Introducción a Power Apps

Ajustes de pantalla de la app

 

  • Settings → Display define orientación y tamaño
  • App layout: Fixed fuerza una proporción; Responsive se adapta a la pantalla
  • Prueba en múltiples tamaños

$$

Cuadro de configuración de Power Apps Studio en la pestaña Display, con opciones de diseño, orientación y tamaño del lienzo

Introducción a Power Apps

Los diseños predefinidos

Captura real del panel New screen de Power Apps Studio con plantillas de diseño predefinidas: Blank, Split screen, Sidebar, Header and footer, Approval request y Welcome screen, cada una con una vista previa pequeña

 

  • + New screen incluye plantillas de diseño listas
  • Sidebar, Header and footer, Split screen, ya son responsive
  • Punto de partida recomendado para tu primera app responsive
Introducción a Power Apps

Qué vas a construir

$$

Envuelve controles en un Layout container · Cambia entre tamaños de dispositivo · Verás cómo la app responde

Ilustración de una app en móvil, tablet y portátil, mostrando la galería adaptándose a cada tamaño de pantalla.

Introducción a Power Apps

¡Vamos a practicar!

Introducción a Power Apps

Preparing Video For Download...