Layout de Control no Godot: decida quem controla posição e tamanho

Escolha o contrato de posicionamento

Um Control descreve um elemento retangular de interface. Seu layout depende do nó pai, das âncoras, dos offsets e das restrições de tamanho. Um filho direto de um Container entrega o controle do posicionamento a esse Container; movê-lo manualmente pode ser desfeito na próxima operação de layout. Antes de alterar números no Inspector, decida se o elemento é posicionado livremente ou organizado por um pai. [1][3]

Leia âncoras e offsets como um cálculo

As âncoras definem pontos de referência relativos ao retângulo do pai. Os offsets, então, deslocam as bordas correspondentes a partir desses pontos de referência. Âncoras horizontais iguais mantêm as duas bordas presas à mesma referência horizontal; âncoras diferentes permitem que a largura varie junto com o pai. [2]

Como exemplo ilustrativo, num painel de status alinhado à direita, defina anchor_left e anchor_right como 1, offset_left como -240 e offset_right como -20. Num espaço de coordenadas do pai sem escala, com largura 1000, as bordas ficam em 760 e 980. O painel tem 220 unidades de largura, com margem direita de 20 unidades. Com o pai em largura 1200, essas bordas passam a 960 e 1180. O posicionamento vertical é uma decisão à parte. Esse cálculo pressupõe que nenhum container ou restrição de tamanho sobrescreva o retângulo.

Deixe os containers expressarem as relações

Use um HBoxContainer para uma linha e um VBoxContainer para uma coluna. Um MarginContainer fornece espaçamento interno por meio de constantes de tema. Aninhe-os quando a relação entre os filhos importar mais do que a posição absoluta de cada um. [3]

As opções de dimensionamento dos containers também são distintas: Fill faz o controle ocupar a área que lhe foi atribuída, enquanto Expand solicita o espaço disponível numa direção compatível. Seus efeitos dependem do tipo de container. Numa linha de configurações, defina uma disposição deliberada para o rótulo e o valor, em vez de mover o valor por script toda vez que o rótulo mudar. [3]

Trate o tamanho mínimo como informação do conteúdo

O mínimo interno de um controle pode depender de texto, texturas e style boxes do tema. custom_minimum_size contribui com um mínimo adicional solicitado; não é simplesmente um comando para impor um retângulo fixo. A API de Control citada também documenta restrições de tamanho máximo que podem ter precedência sobre os mínimos. Quando o resultado for surpreendente, inspecione em conjunto as restrições ativas. [1]

Em uma tela de configurações localizada, reserve um espaço útil, mas permita que rótulos mais longos influenciem o design. Escolha quebra de linha, rolagem ou outra disposição quando o conteúdo não couber. Forçar coordenadas pequenas não faz as exigências do texto desaparecerem, e aumentar todos os mínimos pode deixar a janela pequena sem nenhum layout viável.

Revise mudanças de tamanho e de responsabilidade

Verifique o painel de status e as linhas de configurações em tamanhos de pai estreitos e largos, com textos traduzidos mais longos e dimensões de tema alteradas. Inspecione qual é de fato o pai que controla o elemento antes de culpar um preset de âncora. Ao mover um controle livre para dentro de um Container, reconsidere seu contrato de layout; os antigos offsets manuais podem deixar de determinar o resultado. [2][3]

Mantenha as correções de layout em quem é responsável pela relação. Estes são casos de revisão propostos e exemplos aritméticos, não afirmações de que a interface foi testada em dispositivos específicos.

Fontes

1. Control — colaboradores do Godot Engine.
2. Size and anchors — colaboradores do Godot Engine.
3. Using Containers — colaboradores do Godot Engine.