Kivy Aula 01: Botão e Label

Como vocês estão? Tudo bem? Espero que sim! Como visto nesse meu post, vamos a nossa aula de hoje!

Antes de começar, quero informar que as aulas serão majoritariamente da biblioteca Kivy, uma vez que estou aprendendo para valer essa biblioteca e também estou com um projeto em construção que usa o Kivy. Sem mais delongas, vamos ao código!

---

Para essas aulas é necessário que você tenha alguma IDE para rodar os códigos. Caso você use o Jupyter o Kivy não irá funcionar. Eu utilizo a IDE PyCharm, mas qualquer outra (até mesmo a nativa do Python) serve. Criaremos dois documentos:

• main.py
• lab.kv

Construção do arquivo main.py

O arquivo main.py será usado para armazenar a lógica dos widgets usados e para a criação da aplicação. Vejamos como o arquivo main.py deve ser construído:

# Importar os módulos
from kivy.app import App
from kivy.uix.widget import Widget

# Criar a classe que armazena os widgets
class WidgetPrincipal(Widget):
    pass

# Criar a classe que gera a aplicação
class LabApp(App):
    pass
    
# Executar o código
if __name__ == '__main__':
    LabApp().run()

Aqui vale ressaltar que a classe WidgetPrincipal pode receber qualquer nome. Já a classe LabApp deve ter o mesmo nome que o aquivo .kv, pois o Kivy pega o nome do arquivo .kv e tenta achar no documento .py a classe com o mesmo nome sem o sufixo App. Não se preocupe se está em maiúsculo ou minúsculo o nome da classe, o Kivy transforma tudo para mnúsculo para essa tarefa.

O que cada linha faz?

from kivy.app import App            # 1
from kivy,uix.widget import Widget  # 2

Essas duas linhas importarão os módulos necessários para que seja possível rodar a aplicação.

Em #1 importamos a classe que gerará a aplicação, é essa classe que torna possível o aplicativo rodar.

Em #2 importamos a classe que torna possível colocar os widgets no aplicativo.

---

class WidgetPrincipal(Widget):  # 1
    pass                        # 2

Em #1 criamos a classe WidgetPrincipal, pois é nela que todos os widgets serão colocados (e suas funções, se tiverem).

Em #2 usaremos o pass, uma vez que toda a parte gráfica fica resposável pelo arquivo .kv, logo, não precisamos informar nada para essa classe

Ah, essa classe herda tudo da classe Widget que importamos de Kivy.

---

class LabApp(App):  # 1
    pass            # 2

Em #1 criamos a classe LabApp e é a partir dela que o aplicativo será criado e executado.

Em #2 usaremos o pass, uma vez que não precisamos mudar nada na execução do aplicativo. Lembrando que essa classe deve ter o mesmo nome até o App igual ao arquivo .kv.

Ah, essa classe herda tudo da classe App que importamos de Kivy.

---

if __name__ == '__main__':
    LabApp().run()

Essas linhas farão a execução do código.

Construção do arquivo lab.kv

O arquivo lab.kv será usado para dizer ao Kivy quais são e como a parte gráfica deverá se comportar na aplicação. Vejamos como o arquivo lab.kv deve ser construído:

WidgetPrincipal:

<WidgetPrincipal>:
    Button:
        text: 'Olá'
        size: '100dp', '80dp'
        pos: '100dp', '200dp'
        color: 0, 0, 1, 1
        
    Label:
        text: 'Mundo'
        size: '100dp', '80dp'
        pos: '200dp', '300dp'
        color: 1, 0, 0, 1

O qua cada linha faz?

WidegtPrincipal:

Essa linha indica qual a classe do arquivo lab.kv será usada. Mesmo que haja n classes nesse aquivo, o Kivy seleciona somente uma, que a que informamos na primeira linha do arquivo.

---

<WidgetPrincipal>:             # 1
    Button:                    # 2
        text: 'Olá'            # 3
        size: '100dp', '80dp'  # 4
        pos: '100dp', '200dp'  # 5
        color: 0, 0, 1, 1      # 6

A linha #1 informa ao Kivy em qual classe do arquivo main.py serão colocados os widgets.

A linha #2 cria o widget Button.

A linha #3 serve para colocarmos o texto que queremos no botão.

A linha #4 informa qual é o tamanho do botão. O primeiro valor é para o tamanho na horizontal (eixo X) e o segundo valor para o tamanho na vertical (eixo Y). A informação dp serve para manter a densidade de pixels, independente das dimensões das telas, ou seja, o widget terá o mesmo tamanho em qualquer dimensão de tela (computador, celular, tablet, etc).

A linha #5 diz onde esse widget estará na tela do aplicativo. A informação dp serve para o mesmo propósito aqui.

A linha #6 informa ao Kivy qual a cor que queremos do texto do botão. Nesse caso, o padrão é RGBA (Red, Green, Blue e Alpha). Para o Kivy, a quantidade de cada cor e transparência deve ser feita em porcentagem (valores entre 0 e 1). Como queremos, nessa aula, a cor azul informamos ao Kivy que deverá ter 100% de azul e 100% de alfa (sem transparência). Caso queiramos mudar a cor, basta achar a quantidade de cada uma e dividir cada valor por 255 para ter essa informação entre 0 e 1.

---

Label:                     # 1
    text: 'Mundo'          # 2
    size: '100dp', '80dp'  # 3
    pos: '200dp', '300dp'  # 4
    color: 1, 0, 0, 1      # 5

A linha #1 cria o widget Label.

A linha #2 informa qual o texto que queremos que esteja inserido na label.

A linha #3 informa ao Kivy qual o tamanho da label.

A linha #4 diz ao Kivy onde na tela esse widget deverá ficar.

A linha #5 passa a cor que o texto da label deverá ter.

E como tudo isso fica no final?

Agora vamos a parte mais legal que é ver o resultado:

Espero que tenham gostado, aprendido e o código funcionado certinho com vocês!

Nos vemos na próxima postagem! Até lá, um café bem forte e bom código!