Layouts no FireMonkey: faça a tela se adaptar sem espalhar coordenadas

Uma tela pode funcionar no tamanho usado pelo designer e falhar quando aparece o teclado, muda a orientação ou cresce o texto. O problema costuma estar na suposição de que posição e espaço disponível permanecerão fixos.

Vamos montar uma tela de consulta. Ela terá título, campo de busca, botão e área de resultados. O foco está no comportamento do layout, não em ligar a busca a uma API.

Desenhe a estrutura antes dos controles

Crie uma aplicação multi-device em branco. No formulário, organize os componentes desta forma:

FormPrincipal
  LayoutCabecalho       Align = Top
    LabelTitulo        Align = Client
  ScrollConteudo        Align = Client
    LayoutBusca        Align = Top
      EditBusca        Align = Top
      ButtonBuscar     Align = Top
    LabelOrientacao    Align = Top

ScrollConteudo deve ser um TVertScrollBox; os demais layouts são TLayout. Defina alturas suficientes para o cabeçalho e o bloco de busca. Use Margins para separar os controles e Padding para afastar o conteúdo das bordas do contêiner.

O alinhamento organiza um controle relativamente ao pai e pode afetar sua posição e dimensão. TAlignLayout inclui, entre outros, Top e Client. Confira a referência oficial de alinhamento.

Evite transformar o layout em escala de tudo

Aumentar ou reduzir a tela inteira proporcionalmente nem sempre melhora a leitura. Um botão pode ficar pequeno demais em uma janela estreita ou enorme no desktop. Para esse primeiro exercício, mantenha uma disposição vertical e deixe o conteúdo ocupar a largura disponível.

Confira a ordem visual no designer: controles alinhados no topo dependem de sua organização no contêiner. Se a sequência ficar diferente da esperada, revise a ordem e o pai dos objetos antes de compensar o problema com posições fixas.

O LabelTitulo deve permitir que o texto caiba no cabeçalho planejado. Se usar quebra de linha, ajuste a altura do contêiner também; permitir quebra não cria automaticamente espaço em todos os cenários.

Configure um detalhe por vez

Depois de criar os controles e nomeá-los, este trecho pode ser usado no OnCreate do formulário. Ele pressupõe FMX.Types e os componentes já existentes:

LayoutCabecalho.Align := TAlignLayout.Top;
LayoutCabecalho.Height := 80;
ScrollConteudo.Align := TAlignLayout.Client;
ScrollConteudo.Padding.Left := 16;
ScrollConteudo.Padding.Right := 16;
LayoutBusca.Align := TAlignLayout.Top;
LayoutBusca.Height := 160;
EditBusca.Align := TAlignLayout.Top;
EditBusca.Margins.Bottom := 12;
ButtonBuscar.Align := TAlignLayout.Top;

Os valores são um ponto de partida para o exercício, não dimensões universais. Reavalie-os com fontes ampliadas, estilos diferentes e traduções. Esse snippet não cria os objetos: copiar apenas o código sem montar a árvore no designer não reproduz a tela.

Verifique comportamentos, não apenas aparência

No desktop, redimensione a janela gradualmente. No mobile, teste em dispositivo e alterne a orientação. Insira um título mais longo e aumente os textos. Observe se algum controle fica escondido, se há sobreposição e se a área de resultados continua utilizável.

Faça uma pequena tabela de observação: largura, orientação, texto usado, controle afetado e ajuste necessário. Isso ajuda a distinguir um problema de dimensão do contêiner de um problema no próprio controle.

Um espaço rolável evita perder conteúdo, mas não substitui a hierarquia visual. A ação principal deve continuar fácil de encontrar. Não force o usuário a rolar uma tela longa para descobrir o botão que inicia o trabalho.

Desafio e limites

Adicione um resultado com três linhas de texto e outro com dez. A tela deve continuar legível sem exigir mudanças no código de cada controle. Se falhar, investigue quem controla a altura do conteúdo.

O roteiro e o snippet foram revisados por leitura, sem execução no Delphi. A adaptação ao teclado merece um teste separado: continue em Teclado virtual no FireMonkey.

Layout e sequência de estudo

1. Organize cabeçalho, formulário e scroll com Align/Margins.
2. Compare janela estreita, orientação e texto longo sem Scale global por padrão.
3. Repita fonte maior e zoom; verifique corte, foco e rolagem.
4. Registre dimensões e screenshots reais antes de validar.

Plano de captura. Formulário distribuível e capturas FMX dependem do designer/dispositivo. Continue para teclado e tarefas pelos botões da trilha mobile; HTTP fica leitura relacionada.

Projeto de estudo disponível

Baixar fonte FMX com .pas e .fmx. Inclui layout rolável, registro de geometria e tarefa local com contexto de entrega e geração. O worker captura valores; o contexto perde o destino antes da destruição e respostas de gerações antigas são descartadas.

Compilado para Win32 com DCC32 37.0 em 08/10/2026. Relatório. Não executado visualmente: testes de dispositivo, geometria/rotação e corridas de encerramento permanecem pendentes. A referência anterior a projeto pendente se refere à integração validada no alvo; este pacote entrega fonte de estudo, sem alegar esse teste.