Âncoras e redimensionamento

As âncoras decidem o que acontece a um widget quando a caixa que o contém muda de tamanho. Sem âncoras, o comportamento e proporcional; com âncoras, é possível prender arestas.

O comportamento por omissão

Sem nenhuma âncora, um widget e fluido na horizontal e fixo na vertical: mantém as suas colunas (portanto a sua proporção da largura) e a sua altura em píxeis.

Para a maior parte dos casos é o que se quer, e não há nada a configurar.

O que uma âncora faz

Uma âncora prende uma aresta do widget a aresta correspondente do pai, com a margem que tem nesse momento.

• Aresta presa: a distância até ao pai fica fixa em píxeis.
• Duas arestas opostas presas: o que está entre elas estica.

O modelo é o mesmo do Visual Basic clássico, e a razão de ser é a mesma: há peças que devem manter a margem, e há peças que devem crescer.

As quatro âncoras

Âncoras activas	Comportamento horizontal
Nenhuma	Largura proporcional, posição proporcional
Esquerda	Fica colado a esquerda, largura proporcional
Direita	Fica colado a direita, largura proporcional
Esquerda + direita	Estica: as duas margens ficam fixas é a largura acompanha

Âncoras activas	Comportamento vertical
Nenhuma	Y e altura em píxeis, medidos do topo
Topo	Igual (o topo já é a referência)
Base	Fica a distância fixa do fundo do pai
Topo + base	Estica: a altura acompanha a altura do pai

As âncoras aplicam-se ao dispositivo web e valem para os três — não há âncoras diferentes por dispositivo.

Quando usar

Uma tabela que deve ocupar o resto do ecrã. Ancore topo e base: a tabela cresce em ecrãs altos e encolhe em portateis, em vez de deixar espaço vazio ou ser cortada.

Uma barra de botões encostada a direita. Ancore a direita: a barra mantém a margem e não se afasta da aresta quando a janela cresce.

Um rodape. Ancore a base.

Um painel que enche a largura de um contentor. Ancore esquerda e direita.

Quando não usar

Numa faixa de indicadores. Quatro KPI de 12 colunas cada já acompanham a largura sozinhos. Ancorar só complica.

Em widgets dentro de um painel de altura fixa. Se o pai não muda de tamanho, a âncora não tem efeito nenhum — e depois ninguém percebe porque não faz nada.

A referência vertical

Para as âncoras a base ser possível é preciso uma altura de referência. É a altura canónica do dispositivo:

Dispositivo	Altura de referência
Web	800 px
Tablet	1024 px
Telemóvel	844 px

Num ecrã auxiliar em modal, a referência é a altura do modal, e não a do dispositivo.

A margem ao fundo é calculada uma vez, a partir da geometria contra esta referência; depois disso é o navegador que resolve contra a altura real. Nada extra é guardado no documento.

Widgets dentro de contentores

Um widget dentro de um painel ancora-se ao painel, não ao ecrã. É o que permite montar um painel que estica e, lá dentro, um título colado ao topo com uma tabela a encher o resto.

Ver Painéis e separadores.