Layout da página

É possível criar uma página simplesmente arrastando e soltando os widgets. Já as propriedades de layout aceleram bastante seu design. Elas oferecem controle imediato e preciso sobre o tamanho e a posição dos widgets.

Propriedade "layout"

Os widgets do painel têm uma propriedade layout no grupo principal de propriedades. Ela define como os widgets filho são organizados. A propriedade tem três valores possíveis:

  • Fixo: organiza os widgets filho em relação às bordas do painel.
  • Horizontal: organiza os widgets filho um ao lado do outro em uma linha horizontal.
  • Vertical: organiza os widgets filho um acima do outro em uma linha vertical.

A opção "Fixo" posiciona os widgets filho de forma absoluta, fazendo referência ao painel principal. Já as opções "Horizontal" e "Vertical" organizam os widgets relativamente, à esquerda e à direita ou acima e abaixo de outros widgets no painel. Imagine que os widgets com posição relativa fluem com os outros que estão ao seu redor. Na verdade, os widgets posicionados dessa maneira estão em um fluxo.

Propriedades do layout

Todos os widgets têm um grupo de propriedades de layout que determina o tamanho e a posição deles. O conteúdo desse grupo é alterado com base na propriedade layout do painel principal de um widget.

Propriedades de layout do painel fixo

Os widgets em painéis fixos têm propriedades de layout que definem o tamanho e a posição deles em relação às bordas do painel. As propriedades exibidas variam de acordo com o tipo do widget e suas seleções. No entanto, todas elas estão incluídas em quatro tipos básicos:

Tipo Descrição Propriedades
Posição Determinam a que distância um widget precisa estar das bordas do widget pai. É possível desativá-las usando as caixas de seleção próximas a elas. Se você desativar a última propriedade em um eixo, o App Maker ativará automaticamente a propriedade oposta. top, bottom, left, right
Tamanho absoluto Determinam o tamanho do widget, a menos que a propriedade de tamanho automático correspondente esteja ativada. É possível desativá-las usando as caixas de seleção próximas a elas. Se você desativar uma propriedade de tamanho absoluto, o tamanho do widget será determinado pelas propriedades de posição desse eixo. width, height
Tamanho automático Dimensionam o tamanho de um widget automaticamente com base no conteúdo dele. Elas estão disponíveis apenas para alguns tipos de widget, e somente se você não desativou a propriedade de tamanho absoluto correspondente. autoWidth, autoHeight
Restrições de tamanho Definem restrições de tamanho máximo e mínimo nos eixos com tamanho automático e com tamanho absoluto desativado. Insira um valor para definir o menor ou maior tamanho permitido do widget em uma dimensão. minWidth, maxWidth, minHeight, maxHeight

Propriedades de layout do painel de fluxo

Os widgets em painéis verticais e horizontais têm propriedades de layout que controlam o tamanho e a posição deles. No entanto, as opções de posição são muito mais limitadas do que nos painéis fixos. As propriedades do painel de fluxo são organizadas em duas colunas: horizontal e vertical. Cada uma delas controla seu respectivo eixo.

Tipo Descrição Propriedades
Tamanho Controla como o tamanho do widget é definido em cada eixo. As opções disponíveis são fixed, fit to content e fill parent. size
Tamanho absoluto Determinam o tamanho do widget quando as propriedades size dele são fixed. width, height
Restrições de tamanho Definem restrições de tamanho máximo e mínimo quando as propriedades size do widget são fit to content ou fill parent. minWidth, maxWidth, minHeight, maxHeight
Alinhamento Controla a posição do eixo que não seja de fluxo do painel. Ela determina o alinhamento vertical do widget em painéis horizontais e vice-versa. align

Espaçamento

Use o espaçamento para controlar a margem e o preenchimento de widgets individuais.

Tipo Descrição Propriedades
Margem Definem a quantidade de espaços entre as bordas de um widget e os objetos próximos na página. margin top, margin bottom, margin left, margin right
Preenchimento Controlam a quantidade de espaços entre o conteúdo de um widget e as bordas dele. padding top, padding bottom, padding left, padding right

Propriedades de fluxo

Ao contrário dos painéis fixos, a maioria dos posicionamentos de widgets em painéis de fluxo ocorre no nível do painel. Para posicionar widgets em fluxo, use as propriedades no grupo de fluxo do painel principal:

Propriedade Descrição
wrap Controla como o painel organiza widgets que seriam maiores que o eixo de fluxo.
justify Controla como o painel organiza widgets ao longo do eixo de fluxo deles.
alignChidren Controla como o painel organiza widgets ao longo do eixo que não é de fluxo.
wrapAlign Controla como o painel organiza widgets que são unidos quando a propriedade wrap está ativada.

Propriedades de tamanho

No grupo de propriedades de tamanho, todas as propriedades de tamanho do grupo de layout são listadas como propriedades comuns. Assim, é possível vincular os dados às propriedades para alterar dinamicamente os valores delas. Nesse grupo, todas as propriedades podem ser editadas ao mesmo tempo. Isso possibilita que valores conflitantes sejam definidos. Por exemplo, ao definir os valores left, right e width em números incompatíveis. O App Maker não garante o funcionamento consistente das propriedades de tamanho que estiverem em conflito.

Resumo

Com a guia "Resumo", é possível bloquear ou ocultar widgets. Ela está localizada no lado direito da tela. Os widgets bloqueados não podem ser selecionados na tela. Isso impede que você os mova sem querer. Já os widgets ocultos não são renderizados na tela. Assim, é possível interagir com os widgets que estariam abaixo deles. Os widgets ocultos ainda são exibidos no ambiente de execução do app. Para reposicionar ou editar um widget bloqueado ou oculto, selecione o nome dele em "Resumo".