Como utilizar o elemento ListView no Thunkable/app Inventors

  Neste tutorial vou mostra como usar o List View(exibição de lista) no Thunkable/app Inventors. Como na tradução seu objetivo no aplicativo será o de exibir uma lista de palavras pré estabelecida em uma ordem de "Strings" que será adicionada. 


   Usaremos meses de janeiro a abril pra ilustra o tutorial.

  Vamos iniciar nossa aplicação e para isso vamos usar a plataforma de desenvolvimento online Thunkable, sem a necessidade de instalar qualquer programa no computador apenas um pequeno aplicativo no celular para emular a aplicação, e pode ser encontrado neste link app Thunkable.

  Acessaremos a plataforma de desenvolvimento para PC neste link LINK Thunkable . .


  (Se você não conhece a plataforma de desenvolvimento ou quer ver um tutorial bem básico de como usar o Thunkable acesse esse link "Tutorial básico thunkable" ).


  
Selecione a opção Android e faça login com o Google.






    Clique em "create new app", e na janela que aparecer escreva List View e aperte OK.






   Vai aparecer uma tela como essa, onde sera desenvolvida nossa aplicação.





     Agora vamos adicionar os itens da parte gráfica, vamos utilizar o elemento "List View" e uma "Label" clique e arraste um de cada para a Screen1.








    Selecione a Label1, e na parte inferior direita da tela localize Text e apague o texto.

   







 Selecione List View na Screen1 e em width selecione Fill parent e clique em OK, para ajustar o elemento na tela.









 Selecione Show Filter Bar, para adicionar uma caixa de busca.





  Agora adicionamos as Strings que vão aparecer na lista. No exemplo coloquei (Janeiro,Fevereiro,Março,Abril) mas você pode colocar qualquer outra coisa como dias da semana por exemplo.









 Pronto nossa parte gráfica já esta pronta, e partiremos agora para os blocos que é onde faremos com que o aplicativo funcione de fato.

 Clique em Blocks, e aparecera uma tela como esta abaixo.





  Em List View selecione o elemento "After Picking" ( tradução "Depois de escolher") no menu lateral esquerdo e arraste para dentro do editor como na imagem abaixo. 









Em Label1 escolha "Text.to", que vai receber informação da List View.
     







   Em List View1 escolha o bloco 'Selection Index" e encaixe em Text.to.







 Neste momento sua aplicação já esta pronta, como pode observar, deverá ficar igual a ilustração abaixo.



 Observe que há uma caixa de busca (Search list), caso haja uma lista muito grande poderá facilitar a localização do item a que se procura.










  Quando selecionarmos um item, o mesmo e mostrado na Label logo abaixo de forma numérica de acordo com sua posição na lista.










Tutorial em vídeo
 

Nenhum comentário:

Postar um comentário