Design responsivo com contêineres

Introdução ao Power Apps

Luise Freese

Azure & Power Platform Architect

Por que responsivo?

 

  • O mesmo app abre em celulares, tablets, laptops
  • Um layout fixo corta em telas pequenas e fica perdido nas grandes
  • Responsivo = o layout se adapta

$$

Celular, tablet e laptop mostrando o mesmo app mudando de coluna única para várias colunas.

Introdução ao Power Apps

Contêineres de layout modernos

Ilustração comparando contêineres de Layout vertical e horizontal com controles filhos empilhados vs. lado a lado.

 

  • Contêiner de layout vertical empilha de cima para baixo
  • Contêiner de layout horizontal distribui da esquerda para a direita
  • Controles modernos fluem no espaço disponível
Introdução ao Power Apps

Largura e altura flexíveis

 

  • FlexibleWidth e FlexibleHeight
  • On: o controle estica para preencher o contêiner
  • Off: o controle mantém tamanho fixo

$$

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width
Introdução ao Power Apps

`LayoutMinWidth` e `LayoutMinHeight`

Celular vs. tablet mostrando LayoutMinWidth como o ponto de quebra onde o layout muda de uma coluna para painel lateral + conteúdo.

 

  • Um contêiner precisa de espaço suficiente para se organizar bem
  • LayoutMinWidth = a menor largura antes de se rearranjar
  • Dispara um layout diferente para celular vs. tablet
Introdução ao Power Apps

Configurações de exibição do app

 

  • Settings → Display define orientação e tamanho
  • App layout: Fixed fixa uma proporção; Responsive se adapta à tela
  • Teste em vários tamanhos

$$

Janela Settings do Power Apps Studio na aba Display, mostrando layout, orientação e opções de tamanho da tela

Introdução ao Power Apps

Layouts predefinidos

Captura real do flyout New do Power Apps Studio com modelos de layout: Blank, Split screen, Sidebar, Header and footer, Approval request e Welcome screen, cada um com miniatura

 

  • + New screen traz modelos de layout prontos
  • Sidebar, Header and footer, Split screen, já são responsivos
  • Ponto de partida recomendado para seu primeiro app responsivo
Introdução ao Power Apps

O que você vai construir

$$

Envolva controles em um Layout container · Alterne entre tamanhos de dispositivo · Veja o app responder

Ilustração de um app em celular, tablet e laptop, mostrando a galeria se adaptando a cada tamanho de tela.

Introdução ao Power Apps

Vamos praticar!

Introdução ao Power Apps

Preparing Video For Download...