Controle de contêiner de grade no Power Apps (versão prévia)

[Este artigo é um documento de pré-lançamento e está sujeito a alterações.]

O controle de contêiner grid fornece uma maneira de layout de componentes filho em um padrão de grade. Você obtém controle preciso sobre onde cada componente vai em termos de linhas e colunas.

Esse contêiner funciona como grades no estilo CSS. Defina as linhas e colunas e defina a posição exata para cada componente filho usando suas propriedades.

Description

O controle de contêiner grid oferece um sistema de layout flexível para aplicativos de tela. Ele permite:

• Colocar componentes filho em um padrão de grade
• Especificar o início e o término da linha e da coluna para cada filho
• Fazer ajustes responsivos quando o contêiner ou o tamanho da tela for alterado
• Controlar alinhamento, espaçamento e estouro dentro da grade

Usando essa abordagem, você não precisa posicionar manualmente cada componente. Seus aplicativos se tornam mais manteníveis e responsivos.

Propriedades de exibição

• Lacuna – o espaçamento em pixels entre componentes filho dentro da grade.
• Colunas – o número de colunas no layout da grade.
• Linhas – o número de linhas no layout da grade.

Tamanho e posição

• X – a distância horizontal da borda esquerda do contêiner pai (ou tela, se nenhum pai).
• Y – A distância vertical da borda superior do contêiner pai (ou tela, se nenhum pai).
• Largura – a distância entre as bordas esquerda e direita de um controle.
• Altura – a distância entre as bordas superior e inferior de um controle.
• Preenchimento – O espaçamento entre as bordas do contêiner e seus componentes filho.

Cor e borda

• Cor – cor de primeiro plano do contêiner, usada para bordas e texto, se aplicável.
• Border
  • Estilo – Tipo de borda: Sólido, Tracejado, Pontilhado ou Nenhum.
  • Espessura – largura da borda em pixels.
  • Cor – Cor da borda.
• Raio de borda – o grau em que os cantos do contêiner são arredondados. Você pode aplicar essa configuração a todos os cantos uniformemente ou dividi-la em cantos individuais em configurações avançadas.
• Sombra de soltar – efeito sombra aplicado ao contêiner. Opções: Nenhuma, Leve, Média ou Pesada.

Visibilidade

• Visível – se o contêiner de grade é exibido. Ativar oudesativar.

Propriedades de layout de grade (específicas para crianças)

• Início da Coluna/Fim da Coluna – define as colunas inicial e final para um componente filho.
• Início da Linha/Fim da Linha – define as linhas inicial e final para um componente filho.

Example

1. Crie um aplicativo de tela em branco do zero com um layout responsivo .

2. Crie uma nova tela.

3. No painel Inserir em Layout, selecione Contêiner de grade.

4. Defina as propriedades do contêiner para ocupar a tela inteira:

   • X = 0
   • Y = 0
   • Largura = LarguraDoPai
   • Altura = Parent.Height

5. Adicione vários componentes filho, como botões, entradas de texto, ícones e mídia. Para cada filho, defina as propriedades de posicionamento da grade:

   • Início/Término da Coluna
   • Início/Término da Linha
   • Alinhar na célula

6. Pressione F5 para visualizar. Redimensione a tela e observe como os componentes filho permanecem em suas posições de grade e se ajustam de forma responsiva.