4. Layouts

O que você vai aprender: como o CrossFly posiciona, e a técnica de aninhar layouts para montar telas reais. Pré-requisitos: Pensando em componentes.

Exemplo completo (copiar, colar e rodar)

A estrutura definitiva da tela de lista, aninhando layouts: header em HorizontalLayout (altura auto), conteúdo elástico com LAY_FILL e rodapé auto — tudo num VerticalLayout. Compila como está.

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout(Position.START, Position.START));

      // header: HorizontalLayout, altura natural (LAY_AUTO)
      Component header = new Component();
      header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
      header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // ícone
      header.add(LAY_FILL, new Label("Minhas tarefas"));         // título absorve a largura
      add(LAY_AUTO, header);

      // conteúdo: o "elástico" — absorve a altura restante
      Component conteudo = new Component();
      conteudo.setLayout(new VerticalLayout());
      conteudo.add(LAY_AUTO, new Label("Item 1"));
      conteudo.add(LAY_AUTO, new Label("Item 2"));
      conteudo.add(LAY_AUTO, new Label("Item 3"));
      add(LAY_FILL, conteudo);

      // rodapé: altura natural
      add(LAY_AUTO, new Button("Adicionar"));
   }
}

Os trechos abaixo mostram só o miolo (o que vai dentro de onShow()). Para rodar, coloque-os no esqueleto MainWindow acima.

Os seis layouts

add(tamanho, comp) — os três casos

add(LAY_AUTO, comp);   //  0f → tamanho natural do conteúdo
add(LAY_FILL, comp);   // -1f → preenche o espaço restante (o "elástico")
add(0.3f, comp);       // >0  → 30% da dimensão do container

A técnica-chave: aninhar layouts

Telas reais se montam compondo containers com layouts diferentes. Header em HorizontalLayout (auto), conteúdo em LAY_FILL, tudo num VerticalLayout:

setLayout(new VerticalLayout(Position.START, Position.START));

Component header = new Component();
header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // ícone
header.add(LAY_FILL, new Label("Minhas tarefas"));         // título absorve a largura
add(LAY_AUTO, header);                                      // header: altura natural

add(LAY_FILL, new VirtualListView(Relative.ofFont(3f), adapter));   // lista: absorve a altura

Constrói neste passo

A estrutura definitiva da tela de lista: header (auto) + lista (LAY_FILL) + rodapé.

Recapitulando

add(0f|-1f|fração, comp); um LAY_FILL por eixo é o elástico; aninhe layouts para telas reais.

Próximos passos

→ Estilos e temas

Veja também

• Layouts (ui) · Conceito: Layout e o modelo Relative