Se itens diferentes do seu conjunto de dados tiverem quantidades diferentes de dados no mesmo campo, você poderá mostrar completamente os itens que tiverem mais dados sem adicionar espaço vazio após os itens que tiverem menos dados. Adicione e configure um controle de galeria de Altura flexível para que você possa:

  • Configurar os controles Rótulo para serem expandidos ou reduzidos conforme o conteúdo.
  • Posicionar cada controle para que ele apareça automaticamente sob o controle acima dele.

Neste tutorial, você mostrará dados sobre os produtos de pavimentação em um controle de galeria de Altura flexível. A imagem de cada produto aparecerá cinco pixels abaixo da visão geral, se ela tiver cinco linhas de texto ou duas linhas.

Aplicativo final

Sugestões de leitura

Se você nunca adicionou controles a uma galeria, siga as etapas em Mostrar uma lista de itens antes de prosseguir neste tópico.

Adicionar dados a um aplicativo em branco

  1. Baixe este arquivo de Excel, que contém nomes, visões gerais e links para as imagens dos produtos de pavimentação.

    Produtos de pavimentação

  2. Faça upload do arquivo de Excel em uma conta de armazenamento em nuvem, como OneDrive, Dropbox ou Google Drive.

  3. No PowerApps Studio, clique ou toque em Novo no menu Arquivo.

  4. No bloco Aplicativo em branco, clique ou toque em Layout do telefone.

    Opção Novo no menu Arquivo

  5. Adicione uma conexão na tabela FlooringEstimates no arquivo do Excel.

    Para obter mais informações, consulte Adicionar uma conexão.

Adicionar dados a uma galeria

  1. Na guia Inserir, clique ou toque em Galeria e, em seguida, clique ou toque em Altura flexível.

    Adicionar galeria

  2. Redimensione a galeria para ocupar a tela inteira.

  3. Defina a propriedade Itens da galeria como FlooringEstimates.

Mostrar os nomes de produto

  1. No canto superior esquerdo da galeria, clique ou toque no ícone de lápis para selecionar o modelo da galeria.

    Ícone de lápis

  2. Com o modelo da galeria selecionado, adicione um controle Rótulo a ele.

  3. Defina a propriedade Text do controle Rótulo com esta expressão:
    ThisItem.Name

    Adicionar rótulo

Mostrar as visões gerais de produto

  1. Com o modelo da galeria selecionado, adicione outro controle Rótulo e mova-o para abaixo do primeiro controle Rótulo.

  2. Defina a propriedade Text do segundo controle Rótulo com esta expressão:
    ThisItem.Overview

  3. Com o segundo controle Rótulo selecionado, clique ou toque no ícone de marcação de nome na guia Conteúdo e renomeie o controle para OverviewText.

    Renomear o rótulo

  4. Defina a propriedade AutoHeight da caixa OverviewText como true.

    Esta etapa garante que a caixa será ampliada ou reduzida para se ajustar ao conteúdo.

    Altura automática do texto

Mostrar as imagens do produto

  1. Redimensione o modelo para ele seja duas vezes maior do que era antes.

    Você pode adicionar controles ao modelo mais facilmente conforme compila o aplicativo, e essa alteração não afetará a aparência do aplicativo quando ele for executado.

  2. Com o modelo da galeria selecionado, adicione um controle de Imagem e mova-o para baixo da caixa OverviewText.

  3. Verifique se a propriedade Imagem do controle de Imagem foi definida para esta expressão:
    ThisItem.Image

  4. Defina a propriedade Y do controle de Imagem com base na posição e no tamanho da caixa OverviewText, como esta expressão:
    OverviewText.Y + OverviewText.Height + 5

    Aplicativo final

Aplique o mesmo conceito se você quiser adicionar mais controles: defina cada propriedade Y do controle com base nas propriedades Y e Altura do controle acima dela.

Próximas etapas

Saiba mais sobre como trabalhar com um controle de galeria e com fórmulas.