Limitações

• Verifique com a documentação atual do Makepad 2.0; APIs de terceiros mudam frequentemente.
• Não execute scripts empacotados sem aprovação explícita do usuário.

Quando Usar

• Use quando este fluxo de terceiros corresponder ao objetivo declarado do usuário.
• Use quando a tarefa exigir os procedimentos documentados nesta habilidade.

Sistema de Layout do Makepad 2.0

O Makepad usa um sistema de tartaruga de layout -- não CSS flexbox, nem CSS grid. A tartaruga percorre os filhos um por um, posicionando cada widget de acordo com dois conceitos principais:

• Walk -- como um widget define seu tamanho (largura, altura, margem)
• Layout -- como um contêiner organiza seus filhos (fluxo, espaçamento, preenchimento, alinhamento)

Todo widget contêiner (View, SolidView, RoundedView, ScrollYView, etc.) possui propriedades de Walk (seu próprio tamanho) e propriedades de Layout (como ele organiza os filhos).

Sistema Walk (Definição de Tamanho do Widget)

Walk controla como um widget individual reivindica espaço dentro de seu pai.

width / height

use mod.prelude.widgets.*

// Fill: takes all available width
View{
    width: Fill height: Fit
    flow: Down
    Label{text: "I stretch to fill the width"}
}

// Fit: shrinks to content
View{
    width: Fit height: Fit
    padding: 10
    Label{text: "I am only as wide as this text"}
}

// Fixed: exact pixel size
View{
    width: 300 height: 200
    Label{text: "I am exactly 300x200 pixels"}
}

// Constrained Fill: fills but within bounds
View{
    width: Fill{min: 200 max: 600} height: Fit
    flow: Down padding: 16
    Label{text: "I fill available space but stay between 200-600px"}
}

CRÍTICO: height: Fit em Contêineres

Este é o principal bug de layout no Makepad.

A altura padrão é Fill. Quando sua saída renderiza dentro de um contêiner Fit, Fill dentro de Fit cria uma dependência circular e se resolve para 0 pixels. Toda a sua UI se torna invisível.

Regra: SEMPRE defina height: Fit em toda View, SolidView, RoundedView e contêineres similares, a menos que o pai tenha uma altura fixa ou Fill.

// CORRECT -- height: Fit makes the container visible
View{
    width: Fill height: Fit
    flow: Down padding: 10
    Label{text: "I am visible"}
}

// WRONG -- defaults to height: Fill, resolves to 0px, invisible
View{
    width: Fill
    flow: Down padding: 10
    Label{text: "I am invisible (0px tall)"}
}

Exceções onde height: Fill é aceitável:

1. Dentro de um pai com altura fixa:

View{
    height: 400
    View{
        height: Fill
        Label{text: "I fill the 400px parent"}
    }
}

2. Dentro de uma cadeia height: Fill que finalmente atinge um tamanho conhecido (por exemplo, o corpo da Janela).
3. ScrollYView sempre usa height: Fill porque precisa preencher seu pai para rolar.

margin

Margin adiciona espaço ao redor do exterior de um widget.

// Uniform margin on all sides
Label{text: "Hello" margin: 10}

// Selective margin with Inset
Label{
    text: "Indented"
    margin: Inset{top: 5 bottom: 5 left: 20 right: 20}
}

// Zero margin (note the trailing dot for float literal)
Label{text: "Flush" margin: 0.}

Sistema Layout (Arranjo de Filhos)

Layout controla como um contêiner posiciona seus filhos.

flow (Direção)

use mod.prelude.widgets.*

// Pilha vertical (mais comum)
View{
    width: Fill height: Fit
    flow: Down spacing: 10
    Label{text: "Primeiro"}
    Label{text: "Segundo"}
    Label{text: "Terceiro"}
}

// Linha horizontal
View{
    width: Fill height: Fit
    flow: Right spacing: 10
    Label{text: "Esquerda"}
    Label{text: "Centro"}
    Label{text: "Direita"}
}

// Sobreposição -- filhos empilhados um sobre o outro

…