Neste tutorial entenderemos a principal função do elemento "list picker" (selecionador de listas) , como na tradução seu objetivo no aplicativo será de selecionar itens de uma lista pré estabelecida em uma ordem de "Strings" que será adicionada.
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" ).
Clique em "create new app", e na janela que aparecer escreva Button e aperte OK.
Vai aparecer uma tela como essa, onde sera desenvolvida nossa aplicação.
Agora vamos adicionar o itens da parte gráfica, vamos utilizar apenas um elemento nesta tela clique em "List Picker", arraste uma vez para a Screen1.
Vamos renomear o elemento "List Picker" , vá até a caixa "Text" apague o nome "List Picker" , e escreva "Escolha a cor".
Agora vamos adicionar as "Strings", que serão os elementos selecionáveis da lista.
Em Elements from Strings , adicione a seguintes palavras (verde,vermelho,amarelo) é interessante que seja nesta sequencia e as palavras devem ser separadas por virgulas para não haver erros.
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.
Agora iremos declarar as variáveis que será onde ficaram armazenados os dados da lista.
Em variables selecione "initialize global" e renomeie para cores.
Em Lists selecione "create empty list" , e encaixe na variável recém criada.
Novamente em Screen1 selecione o elemento "Initialize".
Em Lists adicione o elemento "add items to list" e encaixe dentro do bloco Initialize, adicionando mais dois itens como mostra a figura abaixo.
Vamos novamente em variables e pegue um bloco "get global cores" e encaixe em list.
Em Colors selecione as cores "verde","vermelho" e "amarelo", nesta sequencia e adicione nos itens.
Em List Picker selecione o elemento "After Picking" no menu lateral direito e arraste para dentro do editor como na imagem abaixo.
Novamente em Lists Selecione "select list item" e adicione um "get global Cores"
Em List_Picker escolha "select list item index " e encaixe em index .
Pronto nossa aplicação já esta pronta e deverá aparecer desta forma no emulador.
E quando clicar em "Escolha a cor", aparecerá uma lista .
Selecione um item da lista e a cor escolhida será exibida no layout.
Experimente as outras cores.
Quando clicamos no elemento List Picker ele nos fornece uma lista predefinida pelas Strings que acrescentamos antes, mudando a cor do Layout .
É isso ai pessoal, um simples tutorial que nos mostra o funcionamento do elemento List Picker, agora usem a imaginação para criar uma infinidade de aplicações, e boa sorte.
Duvidas deixem no comentário.
tutorial em vídeo
Nenhum comentário:
Postar um comentário