---
title: "Layout e campos comuns da UI"
version: snapshot-2026-10-06
engineGeneration: astra-current
language: C#
status: source-reviewed
runtimeVerified: false
platformEvidence: []
url: https://astraengine.com.br/pt-br/snapshot-2026-10-06/ui/layout-e-campos/
---

# Layout e campos comuns da UI

Entenda âncoras, bordas, containers, estado e aparência antes de ajustar o HUD.

## Onde editar

Selecione o elemento na Hierarquia sob o Canvas ou na árvore da área Interface. Os grupos **Estado**, **Layout**, **Aparência**, **Composição automática**, **Interação**, **Ações**, **Estados visuais** e **Animação** aparecem conforme o tipo e seu pai. Campos escondidos podem depender do contexto.

## Layout manual: âncoras e bordas

| Campo / API | Efeito e uso |
|---|---|
| Âncora inicial / GuiLayout.AnchorMin | X/Y normalizados do pai: 0 é esquerda/topo, 1 é direita/base. Padrão (0,0). |
| Âncora final / GuiLayout.AnchorMax | Extremo oposto no pai. Igual à inicial conserva tamanho definido pelas bordas; diferente acompanha o tamanho do pai. |
| Bordas / GuiLayout.Offsets | Esquerda, topo, direita, base, em pixels relativos às respectivas âncoras. Não são X, Y, largura, altura. |
| Esticar | Preset com âncoras (0,0)–(1,1) e bordas 16,16,-16,-16; mantém margens no pai. |
| Centralizar | Coloca as duas âncoras em (0,5;0,5) e bordas simétricas, preservando o tamanho medido. |
| Recortar filhos / Style.ClipChildren | Restringe desenho/hit dos descendentes ao retângulo. Um filho para fora pode desaparecer. |

Para um Image 48 × 48 no canto superior esquerdo do pai, use âncoras (0,0) e (0,0), bordas **0,0,48,48**. Para outro 8 px à direita, use **56,0,104,48**. Na raiz, o retângulo do Canvas Tela acompanha o viewport. Não há CanvasScaler por resolução de referência entregue nesta versão.

## Composição automática

| Campo / API | Efeito e uso |
|---|---|
| Tamanho mínimo / Sizing.Minimum | Limite mínimo XY do filho. Padrão (0,0); escolha 48 × 48 para um coração que não deve encolher. |
| Preferido (0 = medir) / Preferred | Tamanho desejado. Zero usa a medição do conteúdo; Image pode medir a textura inteira, portanto defina 48 × 48 para um PNG grande. |
| Peso de expansão / Flexible | Distribui espaço extra nos filhos de HBox/VBox. Peso zero conserva o tamanho preferido; não é propriedade de expansão de Grid. |
| Padding / Padding | Margens internas esquerda, topo, direita, base. Padrão 8 em cada lado. |
| Espaçamento / Spacing | Distância entre filhos; HBox usa X, VBox usa Y, Grid usa ambos. Padrão 8. |
| Alinhamento / Alignment | Início, Centro, Fim ou Esticar no espaço do container. Padrão Esticar. |
| Colunas / Columns | Quantidade de colunas do Grid, 1–64 no editor; padrão 2. |
| Fora do fluxo / Ignore | Retira esse filho da distribuição; libera âncoras e arraste. Ele ainda pertence à árvore. |

Quando HBox/VBox/Grid controla o filho, os campos de layout manual ficam bloqueados. Use tamanho, peso e ordem. Um container não é uma lista de objetos da cena e não faz data binding de inventário.

## Estado e aparência

| Campo / API | Efeito e uso |
|---|---|
| Visível / Visible | Esconde o elemento e sua subárvore no runtime; em container, um filho invisível deixa de participar da medição. Use overlay em Panel para conservar o espaço de um coração vazio. |
| Habilitado / Enabled | Controla a participação na entrada e o estado desabilitado. Pode continuar visível. Ancestrais desabilitados afetam os filhos. |
| Nome / Name | Busca exata de Find/TryFind; mantenha nomes únicos. Nome não é o ID persistente. |
| Texto / Text | Conteúdo de Text e controles textuais. Image não desenha texto. |
| Desenhar fundo / Style.Background | Ativa alpha do fundo; desligado não adiciona uma placa atrás da imagem. |
| Fundo, Texto / Controle e Destaque | Cores de pintura: fundo, conteúdo e preenchimento de controles. C# usa 0xAARRGGBB. |
| Fonte / FontSize | Tamanho do texto em pixels; editor 6–128. Não é a resolução do Canvas. |
| Raio / Radius | Arredondamento do fundo desenhado. Não cria recorte por máscara na imagem. |
| Valor / Value | Estado numérico de Toggle, Slider e Progress. Image não consome Value como vida/preenchimento. |
| Mínimo / Máximo | Intervalo autorado do Slider/Progress; Máximo precisa superar Mínimo. Snapshot permite ler o intervalo; o setter Value é separado. |

## Acesso C# e erros

As propriedades de [GuiLayout](/pt-br/snapshot-2026-10-06/api/astra-guilayout/), [GuiSizing](/pt-br/snapshot-2026-10-06/api/astra-guisizing/), [GuiStyle](/pt-br/snapshot-2026-10-06/api/astra-guistyle/) e [GuiImageStyle](/pt-br/snapshot-2026-10-06/api/astra-guiimagestyle/) são records. Para preservar os outros campos, use **with**:

```csharp
var hud = Gui.ForCanvas(Object);
var heart = hud.Find("Heart1");
heart.Layout = heart.Layout with { Offsets = new System.Numerics.Vector4(0, 0, 48, 48) };
heart.ImageStyle = heart.ImageStyle with { Fit = GuiImageFit.Contain };
```

Essas escritas exigem Behavior em Play, no proprietário do Canvas. Alteram a cópia runtime. Consulte [diagnóstico do HUD](/pt-br/snapshot-2026-10-06/ui/diagnostico/) para fonte ausente, handles vencidos e layout controlado pelo pai.