[TUTORIAL BUBBLE] Para iniciantes – Como criar uma tabela com cores alternadas no seu aplicativo

Play

---

Introdução

Este é um rápido tutorial que fiz para mostrar uma das táticas que uso para deixar meus aplicativos mais atraentes: as linhas zebradas.

Quando você tem muitos dados para mostrar, as tabelas facilmente ficam poluídas e difíceis de compreender para o usuário do App, e por isso é importante que deixemos a tabela mais simples de se visualizar.

Ao fazermos uma simples mudança, colocando cores alternadas na planilha, todo o aplicativo fica mais organizado e mais agradável de se usar.

Para isso, basta criar um grupo dentro do Grupo Repetidor que você colocou no seu aplicativo, e criar uma Formatação Condicional da seguinte forma:

---

Como funciona

O índice da célula atual nada mais é que o número da célula dentro do grupo repetidor. Ou seja, se for a primeira célula, o índice será 1. Se for a segunda célula, o índice será 2, e por aí vai.

A operação módulo é usada para obter o resto de uma divisão. Calma, eu sei que parece confuso, mas é simples:

Quando o índice da célula atual modulo 2 resulta em 1, estamos pedindo para o Bubble usar esse resto para decidir a cor da célula. Em termos práticos, se o resto for 1, a célula fica com uma cor; se for 0, com outra.

Quando fazemos a formatação Índice da célula atual modulo 2 = 1, pintamos a célula com uma cor mais escura, e quando o modulo = 0, pintamos a célula com uma cor mais clara.

E assim temos o resultado abaixo:

Conseguiu?

Se tiver dúvidas, fale comigo por aqui ou pelo Youtube!

---

Links úteis

Canal do YouTube Coaching No Code Apps (Tutoriais Bubble em Inglês)