Adicionar uma tela de rolagem a um aplicativo de tela

  • Artigo

Em um aplicativo de tela, crie uma tela que os usuários possam rolar para mostrar itens diferentes. Por exemplo, crie um aplicativo de telefone que mostre os dados em vários gráficos que os usuários podem exibir ao rolar a tela.

Quando você adiciona vários controles em uma seção, os controles mantêm suas posições relativas dentro dessa seção, independentemente se ele é um aplicativo de telefone ou um aplicativo de tablet. O tamanho e orientação da tela também podem afetar como as seções são organizadas.

Pré-requisitos

  1. Criar um aplicativo de tela em branco.
  2. Saiba como adicionar e configurar controles.

Criar uma tela com rolagem

  1. Selecione Nova tela abaixo do menu superior.

  2. Selecione Rolável.

    Selecione a nova tela e escolha o tipo de tela rolável.

    Uma nova tela rolável é adicionada ao aplicativo.

    Uma captura de tela que mostra a tela rolável adicionada ao aplicativo.

Adicionar controles

A tela rolável inclui uma grade fluida com um cartão de dados por padrão. Os cartões de dados ajudam a separar os blocos de construção na tela. Para tornar a tela rolável com vários controles, adicione mais cartões de dados. Em seguida, adicione controles em cartões de dados, conforme a necessidade.

Para adicionar cartões de dados, você pode selecionar Adicionar seção na parte inferior da tela rolável.

Botão Adicionar seção destacado na tela rolável na tela.

Começaremos adicionando controles no cartão de dados disponível com a tela rolável por padrão e, em seguida, adicionaremos uma nova seção que inclui outro cartão de dados. Assim que um novo cartão de dados estiver disponível, adicionaremos outro controle dentro do novo cartão de dados.

Juntos, os cartões de dados e os controles dentro dos cartões de dados estenderiam o comprimento padrão da tela, exigindo o uso da capacidade de rolagem da tela.

Dica

Para saber mais sobre cartões de dados, consulte Entender os cartões de dados.

  1. Selecione + (Inserir) no painel esquerdo.

    Texto Alt que descreve o conteúdo da imagem.

  2. Expanda Gráficos e selecione Gráfico de colunas.

  3. Redimensione o gráfico adicionado na tela para consumir cerca de dois terços da tela.

  4. Reduza o tamanho do cartão de dados para o tamanho do gráfico adicionado.

    Redimensione o cartão de dados na tela para consumir dois terços da tela.

  5. Selecione Adicionar seção na tela para incluir outra seção.

    Um novo cartão de dados é adicionado à tela.

  6. Selecione Inserir > Gráficos > Gráfico de linhas.

  7. Role para baixo na tela usando a barra de rolagem no lado direito da tela e selecione Adicionar seção para incluir um terceiro cartão de dados.

  8. Selecione Inserir > Entrada > Entrada à caneta.

  9. Redimensione o controle Entrada à caneta aumentando a largura dentro do cartão de dados.

    Controle Entrada à caneta redimensionado para usar mais largura na tela.

  10. Pressione F5 no teclado para visualizar o aplicativo. Usando a barra de rolagem, role para baixo até a parte inferior da tela.

    Visualize a tela rolável.

Agora que você demonstrou como usar a tela rolável, personalize ainda mais o aplicativo de acordo com seus requisitos de negócios.

Tela de rolagem para formulários

Uma vez que o Power Apps usa cartões de dados para criar seções, os controles Exibir formulário e Editar formulário não podem ser inseridos neles. O aninhamento de tal combinação de controles pode prejudicar o desempenho do aplicativo. Portanto, ao usar controles de formulário, use contêineres de layout, como um controle Contêiner vertical.

Dica

Para saber mais sobre como trabalhar com formulários, confira Entender os formulários de aplicativo de tela.

Existem vários métodos diferentes para configurar a rolagem com formulários:

Usar propriedade Vertical Overflow

O uso da propriedade Vertical Overflow é um método básico de usar uma tela de rolagem que possui um formulário.

  1. Certifique-se de estar usando uma tela em branco, e não uma tela rolável.

  2. Selecione Inserir > Layout e, em seguida, selecione Contêiner vertical.

  3. No lado direito da tela no painel de propriedades, selecione a lista suspensa de propriedades Vertical Overflow e escolha Rolar.

    Propriedade Vertical Overflow do contêiner definida como Rolar.

  4. Adicione o formulário de edição ou exibição com os campos necessários. Quando a lista de campos exceder o tamanho do contêiner dentro da tela, você poderá rolar dentro do contêiner usando a barra de rolagem.

    Contêiner vertical rolável usando a propriedade Vertical Overflow definido para rolar com um formulário de exibição.

Usar contêineres dentro do contêiner Vertical

Para aplicativos complexos, considere adicionar contêineres em um controle Contêiner vertical. Em seguida, ajuste a altura do formulário e do contêiner interno, conforme mostrado abaixo.

  1. Certifique-se de estar usando uma tela em branco, e não uma tela rolável.

  2. Selecione Inserir > Layout e, em seguida, selecione Contêiner vertical.

  3. No lado direito da tela no painel de propriedades, selecione a lista suspensa de propriedades Vertical Overflow e escolha Rolar.

  4. Selecione Inserir > Layout e, em seguida, Contêiner.

  5. No lado direito da tela no painel de propriedades, desative a propriedade Flexible height.

    Propriedade Flexible height desativada para o contêiner.

  6. Adicione o formulário de edição ou exibição com os campos necessários.

  7. Para habilitar a rolagem na tela para o formulário, atualize a altura do contêiner adicionado na etapa 4 e o formulário.

    Formulário rolável que usa a altura do contêiner e do formulário para capacidade de rolagem.

Para obter mais informações sobre como trabalhar com a capacidade de resposta de um aplicativo, confira Criando aplicativos de tela responsivos e Layouts responsivos

Confira também

Observação

Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)

A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).