Controlo de contentores de grelha no Power Apps (pré-visualização)

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

O controlo de contentores Grid permite-te dispor componentes filhos num padrão de grelha. Tens controlo preciso sobre onde cada componente vai em termos de linhas e colunas.

Este contentor funciona como grelhas ao estilo CSS. Defines as linhas e colunas e defines a posição exata de cada componente filho usando as suas propriedades.

Description

O controlo de contentores Grid oferece um sistema de layout flexível para aplicações canvas. O portal permite-lhe:

• Coloque componentes filhos num padrão de grelha
• Especifique o início e o fim da linha e coluna para cada filho
• Faça ajustes responsivos quando o tamanho do contentor ou do ecrã muda
• Controla o alinhamento, espaçamento e transbordo dentro da grelha

Ao usar esta abordagem, não precisa de posicionar manualmente cada componente. As suas aplicações tornam-se mais fáceis de manter e responsivas.

Propriedades de exibição

• Gap – O espaçamento dos píxeis entre os componentes filhos dentro da grelha.
• Colunas – O número de colunas no layout da grelha.
• Linhas – O número de linhas na disposição da grelha.

Tamanho e posição

• X – A distância horizontal da borda esquerda do contentor pai (ou ecrã se não houver pai).
• Y – A distância vertical da borda superior do contentor pai (ou ecrã se não houver 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.
• Enchimento - O espaçamento entre as bordas do recipiente e os seus componentes filhos.

Cor e limite

• Cor – Cor em primeiro plano do recipiente, usada para bordas e texto, se aplicável.
• Fronteira
  • Estilo – Tipo de borda: Sólida, Tracejada, Pontilhada ou Nenhuma.
  • Espessura – Largura da borda em pixels.
  • Cor – Cor da borda.
• Raio da borda – O grau em que os cantos do recipiente são arredondados. Pode aplicar esta definição a todos os cantos de forma uniforme ou dividi-la em cantos individuais em definições avançadas.
• Sombra – Efeito de sombra aplicado ao contentor. Opções: Nenhuma, Leve, Média ou Pesada.

Visibilidade

• Visível – Se o contentor da grelha está exibido. Ativar ou desligar.

Propriedades do layout da grelha (específicas para filhos)

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

Example

1. Crie uma aplicação de tela em branco do zero com um layout responsivo .

2. Crie um novo ecrã.

3. No painel Inserir em Layout, selecione Contentor de Grelha.

4. Defina as propriedades do contentor para ocupar o ecrã completo:

   • X = 0
   • Y = 0
   • Largura = Principal.Largura
   • Altura = Progenitor. Altura

5. Adicione vários componentes filhos, como botões, entradas de texto, ícones e meios. Para cada filho, defina as propriedades de colocação da grelha:

   • Início / Fim da Coluna
   • Início / Fim da Fila
   • Alinhar em Célula

6. Carrega em F5 para pré-visualizar. Redimensione o ecrã e observe como os componentes infantis permanecem nas suas posições na grelha e ajuste de forma responsiva.