Grade Tkinter

Resumo : neste tutorial, você aprenderá como usar o gerenciador de geometria de grade Tkinter para posicionar widgets em uma janela.

Introdução ao gerenciador de geometria de grade Tkinter

O gerenciador de geometria de grade utiliza os conceitos de linhas e colunas para organizar os widgets .

O seguinte mostra uma grade que consiste em quatro linhas e três colunas:

Cada linha e coluna da grade é identificada por um índice. Por padrão, a primeira linha possui um índice zero, a segunda linha possui um índice um e assim por diante. Da mesma forma, as colunas da grade possuem índices zero, um, dois, etc.

Os índices de linhas e colunas em uma grade não precisam começar em zero. Além disso, os índices de linhas e colunas podem apresentar lacunas.

Por exemplo, você pode ter uma grade cujos índices de coluna sejam 1, 2, 10, 11 e 12. Isso é útil quando você planeja adicionar mais widgets no meio da grade posteriormente.

A interseção de uma linha e uma coluna é chamada de célula . Uma célula é uma área onde você pode colocar um widget. Uma célula pode conter apenas um widget. Se você colocar dois widgets em uma célula, eles ficarão um em cima do outro.

Para colocar vários widgets em uma célula, você usa ou Framepara LabelFrameagrupar os widgets e colocar Frameou LabelFramena célula.

A largura de uma coluna depende da largura do widget que ela contém. Da mesma forma, a altura de uma linha depende da altura dos widgets contidos na linha.

Linhas e colunas podem abranger. O seguinte ilustra uma grade que possui a célula (1,1) que abrange duas colunas e a célula (0,2) que abrange duas linhas:

Configurando a grade

Antes de posicionar widgets em uma grade, você precisará configurar as linhas e colunas da grade.

O Tkinter fornece dois métodos para configurar linhas e colunas da grade:

container.columnconfigure(index, weight)
container.rowconfigure(index, weight)Linguagem de código:  CSS  ( css )

O columnconfigure()método configura a coluna indexde uma grade.

O weightdetermina a largura que a coluna ocupará, que é relativa a outras colunas.

Por exemplo, uma coluna com peso 2 terá o dobro da largura de uma coluna com peso 1.

Posicionando um widget na grade

Para colocar um widget na grade, você usa o grid()método do widget:

widget.grid(**options)Linguagem de código:  Python  ( python )

O grid()método possui os seguintes parâmetros:

Parâmetros Significado
coluna O índice da coluna onde você deseja colocar o widget.
linha O índice de linha onde você deseja colocar o widget.
Expansão de linha Defina o número de linhas adjacentes que o widget pode abranger.
coluna Defina o número de colunas adjacentes que o widget pode abranger.
pegajoso Se a célula for maior que o widget, a stickyopção especifica em qual lado o widget deve ficar e como distribuir qualquer espaço extra dentro da célula que não seja ocupado pelo widget em seu tamanho original.
padx Adicione preenchimento externo acima e abaixo do widget.
arroz Adicione preenchimento externo à esquerda e à direita do widget.
iPadX Adicione preenchimento interno dentro do widget nos lados esquerdo e direito.
ipady Adicione preenchimento interno dentro do widget nas partes superior e inferior.

Pegajoso

Por padrão, quando uma célula é maior que o widget que contém, o gerenciador de geometria da grade coloca o widget no centro da célula horizontal e verticalmente.

Para alterar esse comportamento padrão, você pode usar a stickyopção. A opção fixa especifica em qual borda da célula o widget deve aderir.

O valor de stickytem os seguintes valores válidos:

Pegajoso Descrição
N Norte ou Centro Superior
S Sul ou Centro Inferior
E Centro Leste ou Direita
C Centro Oeste ou Esquerda
NO Noroeste ou canto superior esquerdo
NE Nordeste ou canto superior direito
SE Sudeste ou canto inferior direito
SO Sudoeste ou canto inferior esquerdo
E NS estica o widget verticalmente. No entanto, deixa o widget centralizado horizontalmente.
ai credo EW estica o widget horizontalmente. No entanto, deixa o widget centralizado verticalmente.

Se quiser posicionar o widget no canto da célula, você pode usar N, S, E e W.

O exemplo a seguir ilustra como posicionar um widget com a opção fixa definida como N:

Se quiser posicionar o widget centralizado em um lado da célula, você pode usar NW (canto superior esquerdo), NE (canto superior direito), SE (canto inferior direito) e SW (canto inferior esquerdo).

O exemplo a seguir mostra como posicionar um widget com a opção fixa definida como NW:

Grade Tkinter - Sticky NW

NS estica o widget verticalmente. No entanto, deixa o widget centralizado horizontalmente:

EW estica o widget horizontalmente. No entanto, deixa o widget centralizado verticalmente:

Preenchimento

Para adicionar preenchimentos entre células de uma grade, você usa as opções padxe pady. Os padxe padysão preenchimentos externos:

grid(column, row, sticky, padx, pady)Linguagem de código:  Python  ( python )

Para adicionar preenchimentos dentro de um widget, você usa as opções ipadxe ipady. Os ipadxe ipadysão preenchimentos internos:

grid(column, row, sticky, padx, pady, ipadx, ipady)Linguagem de código:  Python  ( python )

Os preenchimentos internos e externos são padronizados como zero.

Exemplo de gerenciador de geometria de grade Tkinter

Neste exemplo, usaremos o gerenciador de geometria de grade para projetar uma tela de login da seguinte maneira:

A tela de login usa uma grade que possui duas colunas e três linhas. Além disso, a segunda coluna é três vezes mais larga que a primeira coluna:

O seguinte mostra a janela de login completa:

import tkinter as tk
from tkinter import ttk

# root window
root = tk.Tk()
root.geometry("240x100")
root.title('Login')
root.resizable(0, 0)

# configure the grid
root.columnconfigure(0, weight=1)
root.columnconfigure(1, weight=3)


# username
username_label = ttk.Label(root, text="Username:")
username_label.grid(column=0, row=0, sticky=tk.W, padx=5, pady=5)

username_entry = ttk.Entry(root)
username_entry.grid(column=1, row=0, sticky=tk.E, padx=5, pady=5)

# password
password_label = ttk.Label(root, text="Password:")
password_label.grid(column=0, row=1, sticky=tk.W, padx=5, pady=5)

password_entry = ttk.Entry(root,  show="*")
password_entry.grid(column=1, row=1, sticky=tk.E, padx=5, pady=5)

# login button
login_button = ttk.Button(root, text="Login")
login_button.grid(column=1, row=3, sticky=tk.E, padx=5, pady=5)


root.mainloop()
Linguagem de código:  Python  ( python )

Como funciona.

Primeiro, use o columnconfigure()método para definir o peso da primeira e da segunda colunas da grade. A largura da segunda coluna é três vezes maior que a largura da primeira coluna.

root.columnconfigure(0, weight=1)
root.columnconfigure(1, weight=3)Linguagem de código:  Python  ( python )

Segundo, posicione o rótulo do nome de usuário na primeira coluna e a entrada do nome de usuário na segunda coluna da primeira linha da grade:

username_label = ttk.Label(root, text="Username:")
username_label.grid(column=0, row=0, sticky=tk.W, padx=5, pady=5)

username_entry = ttk.Entry(root, textvariable=username)
username_entry.grid(column=1, row=0, sticky=tk.E, padx=5, pady=5Linguagem de código:  Python  ( python )

Terceiro, posicione o rótulo da senha e a entrada na primeira e segunda colunas da segunda linha:

password_label = ttk.Label(root, text="Password:")
password_label.grid(column=0, row=1, sticky=tk.W, padx=5, pady=5)

password_entry = ttk.Entry(root, textvariable=password, show="*")
password_entry.grid(column=1, row=1, sticky=tk.E, padx=5, pady=5)Linguagem de código:  Python  ( python )

Por fim, posicione o botão de login na terceira linha. Como sua stickyopção está definida como E, o botão fica alinhado à direita da terceira linha.

login_button = ttk.Button(root, text="Login")
login_button.grid(column=1, row=3, sticky=tk.E, padx=5, pady=5)Linguagem de código:  Python  ( python )

O seguinte mostra o mesmo programa. No entanto, ele usa programação orientada a objetos:

import tkinter as tk
from tkinter import ttk


class App(tk.Tk):
    def __init__(self):
        super().__init__()

        self.geometry("240x100")
        self.title('Login')
        self.resizable(0, 0)

        # configure the grid
        self.columnconfigure(0, weight=1)
        self.columnconfigure(1, weight=3)

        self.create_widgets()

    def create_widgets(self):
        # username
        username_label = ttk.Label(self, text="Username:")
        username_label.grid(column=0, row=0, sticky=tk.W, padx=5, pady=5)

        username_entry = ttk.Entry(self)
        username_entry.grid(column=1, row=0, sticky=tk.E, padx=5, pady=5)

        # password
        password_label = ttk.Label(self, text="Password:")
        password_label.grid(column=0, row=1, sticky=tk.W, padx=5, pady=5)

        password_entry = ttk.Entry(self,  show="*")
        password_entry.grid(column=1, row=1, sticky=tk.E, padx=5, pady=5)

        # login button
        login_button = ttk.Button(self, text="Login")
        login_button.grid(column=1, row=3, sticky=tk.E, padx=5, pady=5)


if __name__ == "__main__":
    app = App()
    app.mainloop()
Linguagem de código:  Python  ( python )

Resumo

  • Use os métodos columnconfigure()e rowconfigure()para especificar o peso de uma coluna e de uma linha de uma grade.
  • Use grid()o método para posicionar um widget em uma grade.
  • Use stickya opção para alinhar a posição do widget em uma célula e definir como o widget será esticado.
  • Use ipadxe para adicionar preenchimentos internos e externos ipady.padxpady
Pacote Tkinter
Anterior
Pacote Tkinter

Próximo
Lugar Tkinter

Lugar Tkinter

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *