Python3 TKINTER - Gerenciador de layout Grid

O gerenciador de layout Grid

Além do uso padrão simplificado que vimos anteriormente, o gerenciador Grid também disponibiliza algumas configurações que podem ser de grande ajuda no processo de layout. Este gerenciador é especialmente interessante na distribuição de elementos dentro de um diálogo, pois permite dividir a janela em células e posicionar cada elemento numa célula específica.

Obs: Os scripts aqui apresentados podem ser obtidos em nossa página de downloads, sob o nome pack170425.tar.gz. Todos os experimentos foram realizados em máquina Linux Mint 18.1, versão do Python 3.5.  Sugerimos que o estudo seja realizado em um ambiente virtual.

Parâmetros de configuração

TABELA 2. PARÂMETROS DE CONFIGURAÇÃO

parâmetro	ação
column = coluna	Insere o widget na coluna “coluna”. Colunas e linhas se iniciam em zero. Se omitido, o default é 0 (zero).
columnspan= num	Indica que a célula do widget irá se espalhar por num colunas. Default é 1 (um).
in_ = widget	Insere o widget dentro de um dado widget. O default é o widget pai.
ipadx = distância	Distância especifica o espaço horizontal interno em torno das laterais horizontais do objeto. Valor default 0.
ipady = distância	Distância especifica o espaço vertical interno em torno das laterais horizontais do objeto. Valor default 0.
padx=distância	Distância especifica o espaço horizontal em cada lado do objeto. Pode ser uma lista de dois valores especificando o espaço à esquerda e o espaço à direita separadamente. Valor default (0,0)
pady=distância	Distância especifica o espaço vertical em cada lado do objeto. Pode ser uma lista de dois valores especificando o espaço em cima e o espaço abaixo separadamente. Valor default (0,0)
row = linha	Insere o widget na linha “linha”. A numeração da linha inicia em 0 (zero). Se omitido, assume a primeira linha vazia do grid.
rowspan = num	Indica que a célula do widget irá se espalhar por “num” linhas. Default é 1.
sticky = pos	Define como se posicionará o widget se a área a ele alocada for maior do que o tamanho necessário para o widget. Pode ser uma combinação de S, N, E, e W, or NW, NE, SW, e SE. Veja observação ao final da tabela

E(leste) significa que o widget irá se encostar no lado esquerdo da borda da célula. W + E significa que irá se expandir horizontalmente entre o extremo esquerdo e o extremo direito da célula. W + E + N + S significa que irá se expandir de forma a preencher todo o espaço da célula. O valor default é ocupar o centro da célula.

Funções adicionais:

grid_columnconfigure(index, options)

Estabelece as opções para a coluna indicada pelo index. As opções são as seguintes:

TABELA 3. PARÂMETROS DE CONFIGURAÇÃO DE UMA COLUNA

minsize= min	A largura mínima de uma coluna. Se não existir nenhum widget na coluna, a mesma não será apresentada no display.
pad = num	Distância a ser adicionada ao widget mais largo para determinação do tamanho da coluna como um todo
weight= num	Peso relativo para se distribuir o espaço entre as colunas. Uma coluna com peso dois irá alterar suas dimensões duas vezes mais do que uma coluna com peso 1. O valor default é 0 (zero), o que significa que a coluna não terá as suas dimensões modificadas, mesmo se a janela for aumentada ou diminuída.

grid_rowconfigure(index, options) Estabelece as opções para a linha indicada pelo index. As opções são as seguintes:

TABELA 4. PARÂMETROS DE CONFIGURAÇÃO DE UMA COLUNA

minsize= min	O tamanho mínimo de uma linha. Se não existir nenhum widget na linha, a mesma não será apresentada no display.
pad = num	Distância a ser adicionada ao widget mais largo para determinação do tamanho da linha como um todo
weight= num	Peso relativo para se distribuir o espaço entre as linhas. Uma linha com peso dois irá alterar suas dimensões duas vezes mais do que uma linha com peso 1. O valor default é 0 (zero), o que significa que a linha não terá as suas dimensões modificadas, mesmo se a janela for aumentada ou diminuída.

grid_forget()

Remove o widget do gerenciador de laytout. O widget não é mais apresentado na tela, porém não é destruído. Se for inserido novamente no grid, volta a ser apresentado.

grid_info()

Retorna um dicionário contendo as opções da célula que está sendo utilizada pelo widget.

grid_location(x, y)

Retorna uma tupla com a coluna e a linha correspondente as coordenadas da tela de um dado pixel.

grid_slaves(row=None, column=None)

Retorna uma lista de widgets escravos gerenciados pelo widget que chamou.

grid_size()

Retorna uma tupla com o número de colunas e linhas gerenciados pelo Grid a que o widget está associado.

grid_propagate(flag)

Habilita ou desabilita a alteração de tamanho da janela em função da alteração do tamanho de um ou mais widgets filhos. O valor default é 1 (propagação habilitada).

Criando uma grid 3 x 3 e posicionando 3 labels na diagonal, espaço de 10 pixels entre cada label

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
#  ex_grida.py
#
#  
#
import tkinter as tk
from platform import python_version

def main(args):
 root = tk.Tk()

 lbl1= tk.Label(root, text="Texto superior", bg="red", fg="white")
 lbl2= tk.Label(root, text="Texto intermediário", bg="yellow", fg="black")
 lbl3= tk.Label(root, text="Texto inferior", bg="green", fg="white")

 lbl1.grid(row=0,column=0, padx= 10, pady=10)
 lbl2.grid(row=1,column=1,padx= 10, pady=10)
 lbl3.grid(row=2,column=2,padx= 10, pady=10)

 root.mainloop()
 return 0

if __name__ == '__main__':
 print (python_version())   #somente para verificar que estamos no ambiente virtual python 3.5
 import sys
 sys.exit(main(sys.argv))

O resultado é apresentado como:

Posicionando 3 labels na diagonal

Criando a interface de um calculadora de 4 operações

O script a seguir implementa a interface de uma calculadora de 4 operações:

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
#  ex_gridb.py
#
#  
import tkinter as tk
from platform import python_version

class MinhaCalculadora:

 def __init__(self, parent):

  self.nValorAtual=0

  top = self.top = parent

  display = tk.Text(top,height = 1,width =20)
  display.tag_config('justified', justify="right")
  display.insert('insert',self.nValorAtual, 'justified')

  btn1= tk.Button(top, text="1", command=self.p1)
  btn2= tk.Button(top, text="2", command=self.p2)
  btn3= tk.Button(top, text="3", command=self.p3)
  btn4= tk.Button(top, text="4", command=self.p4)
  btn5= tk.Button(top, text="5", command=self.p5)
  btn6= tk.Button(top, text="6", command=self.p6)
  btn7= tk.Button(top, text="7", command=self.p7)
  btn8= tk.Button(top, text="8", command=self.p8)
  btn9= tk.Button(top, text="9", command=self.p7)
  btn0= tk.Button(top, text="0", command=self.p8)

  btnCLR = tk.Button(top, text="C", command=self.pCLR)
  btnPonto = tk.Button(top, text=".", command=self.pPonto)

  btnDivide = tk.Button(top, text="/", command=self.equal)
  btnMultiplica = tk.Button(top, text="x", command=self.multiplica)
  btnSoma= tk.Button(top, text="+", command=self.soma)
  btnSubtrai= tk.Button(top, text="-", command=self.subtrai)
  btnEqual = tk.Button(top, text="=", command=self.equal)


  btn1.grid(row=1,column=0, padx= 1, pady=10)
  btn2.grid(row=1,column=1, padx= 1, pady=10)
  btn3.grid(row=1,column=2, padx= 1, pady=10)
  btn4.grid(row=2,column=0, padx= 1, pady=10)
  btn5.grid(row=2,column=1, padx= 1, pady=10)
  btn6.grid(row=2,column=2, padx= 1, pady=10)
  btn7.grid(row=3,column=0, padx= 1, pady=10)
  btn8.grid(row=3,column=1, padx= 1, pady=10)
  btn9.grid(row=3,column=2, padx= 1, pady=10)
  btn0.grid(row=4,column=1, padx= 1, pady=10)

  btnPonto.grid(row=4,column=2, padx= 1, pady=10)
  btnCLR.grid(row=4,column=0, padx= 1, pady=10)

  btnDivide.grid(row=1,column=3, padx= 5, pady=10)
  btnMultiplica.grid(row=2,column=3, padx= 5, pady=10)
  btnSoma.grid(row=3,column=3, padx= 5, pady=10)
  btnSubtrai.grid(row=4,column=3, padx= 5, pady=10)
  btnEqual.grid(row=5,column=3, padx= 5, pady=10)


  display.grid(row=0,column=0,columnspan=4)

 def pCLR(self):
  pass

 def pPonto(self):
  pass


 def p1(self):
  pass

 def p2(self):
  pass

 def p3(self):
  pass

 def p4(self):
  pass

 def p5(self):
  pass

 def p6(self):
  pass

 def p7(self):
  pass

 def p8(self):
  pass

 def p9(self):
  pass

 def p0(self):
  pass


 def multiplica(self):
  pass

 def divide(self):
  pass

 def soma (self):
  pass

 def subtrai(self):
  pass

 def equal(self):
  print ("Para você: Implemente as funções da calculadora")
  self.top.destroy()



def main(args):
 root = tk.Tk()

 calc = MinhaCalculadora(root)
 root.wait_window(calc.top)

 return 0

if __name__ == '__main__':
 print (python_version())   #somente para verificar que estamos no ambiente virtual python 3.5
 import sys
 sys.exit(main(sys.argv))

A apresentação fica da seguinte forma:

Interface de calculadora com o gerenciador Grid

Analisando o código:

Criando o widget display

display = tk.Text(top,height = 1,width =20)
display.tag_config('justified', justify="right")
display.insert('insert',self.nValorAtual, 'justified')

Este trecho de código cria o widget display, onde serão apresentados as entradas dos dígitos pressionados nos botões, e também o resultado da operação. Para fazer com que o alinhamento seja a direita, criamos um tag denominado “justified”, e ao inserirmos o valor atual (inicialmente zero) no display, fornecemos este tag. Sem isto a visualização seria feito a partir da lateral esquerda do widget.

Criando os botões

btn1= tk.Button(top, text="1", command=self.p1)
btn2= tk.Button(top, text="2", command=self.p2)
btn3= tk.Button(top, text="3", command=self.p3)
btn4= tk.Button(top, text="4", command=self.p4)
btn5= tk.Button(top, text="5", command=self.p5)
btn6= tk.Button(top, text="6", command=self.p6)
btn7= tk.Button(top, text="7", command=self.p7)
btn8= tk.Button(top, text="8", command=self.p8)
btn9= tk.Button(top, text="9", command=self.p7)
btn0= tk.Button(top, text="0", command=self.p8)

btnCLR = tk.Button(top, text="C", command=self.pCLR)
btnPonto = tk.Button(top, text=".", command=self.pPonto)

btnDivide = tk.Button(top, text="/", command=self.equal)
btnMultiplica = tk.Button(top, text="x", command=self.multiplica)
btnSoma= tk.Button(top, text="+", command=self.soma)
btnSubtrai= tk.Button(top, text="-", command=self.subtrai)
btnEqual = tk.Button(top, text="=", command=self.equal)

Criamos todos os botões que irão aparecer na tela. Cada botão tem um label e tem associado um método que será chamado quando o mesmo for pressionado.

Apresentando na tela

btn1.grid(row=1,column=0, padx= 1, pady=10)
btn2.grid(row=1,column=1, padx= 1, pady=10)
btn3.grid(row=1,column=2, padx= 1, pady=10)
btn4.grid(row=2,column=0, padx= 1, pady=10)
btn5.grid(row=2,column=1, padx= 1, pady=10)
btn6.grid(row=2,column=2, padx= 1, pady=10)
btn7.grid(row=3,column=0, padx= 1, pady=10)
btn8.grid(row=3,column=1, padx= 1, pady=10)
btn9.grid(row=3,column=2, padx= 1, pady=10)
btn0.grid(row=4,column=1, padx= 1, pady=10)

btnPonto.grid(row=4,column=2, padx= 1, pady=10)
btnCLR.grid(row=4,column=0, padx= 1, pady=10)

btnDivide.grid(row=1,column=3, padx= 5, pady=10)
btnMultiplica.grid(row=2,column=3, padx= 5, pady=10)
btnSoma.grid(row=3,column=3, padx= 5, pady=10)
btnSubtrai.grid(row=4,column=3, padx= 5, pady=10)
btnEqual.grid(row=5,column=3, padx= 5, pady=10)

display.grid(row=0,column=0,columnspan=4)

Apresentamos todos os widgets criados na tela, na linha e coluna específica de cada um. Deixamos um espaço de 1 pixel entre cada botão. O display é colocado na primeira linha e se expande por todas as quatro colunas. Os botões de função são inseridos um pouco afastados do bloco de valores numéricos.

Os métodos sem implementação, todos que estão com a palavra chave pass, são responsáveis por implementar as ações correspondentes a cada botão. Como nosso objetivo aqui é apenas descrever o modo de operação do gerenciador de layout Grid, deixamos esta implementação a cargo do leitor.