PyPhyPC

Fenêtre - Placement des widgets : pack()

Ci-contre, le code pour obtenir la fenêtre ci-dessus à l'aide de la méthode pack().
Rappel : lors de sa création, un widget est généralement stocké dans une variable. C'est à cette variable qu'on applique la méthode pack().

Méthode pack()

Par défaut, les widgets s'empilent les uns sous les autres, au centre de la fenêtre. Si l'un d'eux est décalé par side='left' (ou side='right'), il vient s'aligner sur le bord gauche en s'extrayant du "flux" : les suivants reviennent par défaut s'aligner en haut de la fenêtre.
Il est possible d'utiliser des cadres (Frame) pour regrouper des widgets et réaliser des interfaces complexes.
Observer les exemples ci-dessous pour comprendre le fonctionnement de pack() (la fenêtre principale s'appelle "jeu"). Cet exemple utilise des boutons mais les principes restent les mêmes quels que soient les widgets.

Placement	Code (extrait)
	ttk.Button(jeu, text='Widget 1', command=None).pack(padx=5, pady=5) ttk.Button(jeu, text='Widget 2', command=None).pack(padx=5, pady=5) ttk.Button(jeu, text='Widget 3', command=None).pack(padx=5, pady=5) ttk.Button(jeu, text='Widget 4', command=None).pack(padx=5, pady=5)
	ttk.Button(jeu, text='Widget 1', command=None).pack(padx=5, pady=5, side='left') ttk.Button(jeu, text='Widget 2', command=None).pack(padx=5, pady=5) ttk.Button(jeu, text='Widget 3', command=None).pack(padx=5, pady=5) ttk.Button(jeu, text='Widget 4', command=None).pack(padx=5, pady=5)
	ttk.Button(jeu, text='Widget 1', command=None).pack(padx=5, pady=5, side='left') ttk.Button(jeu, text='Widget 2', command=None).pack(padx=5, pady=5, side='left') ttk.Button(jeu, text='Widget 3', command=None).pack(padx=5, pady=5) ttk.Button(jeu, text='Widget 4', command=None).pack(padx=5, pady=5)
	ttk.Button(jeu, text='Widget 1', command=None).pack(padx=5, pady=5) ttk.Button(jeu, text='Widget 2', command=None).pack(padx=5, pady=5) ttk.Button(jeu, text='Widget 3', command=None).pack(padx=5, pady=5, side='left') ttk.Button(jeu, text='Widget 4', command=None).pack(padx=5, pady=5)
	cadre1 = ttk.Frame(jeu) cadre1.pack(side='left') ttk.Button(cadre1, text='Widget 1', command=None).pack(padx=5, pady=5) ttk.Button(cadre1, text='Widget 2', command=None).pack(padx=5, pady=5) ttk.Button(jeu, text='Widget 3', command=None).pack(padx=5, pady=5) ttk.Button(jeu, text='Widget 4', command=None).pack(padx=5, pady=5)
	cadre1 = ttk.Frame(jeu) cadre1.pack(side='left') ttk.Button(cadre1, text='Widget 1', command=None).pack(padx=5, pady=5) ttk.Button(cadre1, text='Widget 2', command=None).pack(padx=5, pady=5) ttk.Button(jeu, text='Widget 3', command=None).pack(padx=5, pady=5, side='left') ttk.Button(jeu, text='Widget 4', command=None).pack(padx=5, pady=5, side='left')
	cadre1 = ttk.Frame(jeu) cadre1.pack(side='left') ttk.Button(cadre1, text='Widget 1', command=None).pack(padx=5, pady=5) ttk.Button(cadre1, text='Widget 2', command=None).pack(padx=5, pady=5) cadre2 = ttk.Frame(jeu) cadre2.pack(side='left') ttk.Button(cadre2, text='Widget 3', command=None).pack(padx=5, pady=5,side='left') ttk.Button(cadre2, text='Widget 4', command=None).pack(padx=5, pady=5)

Réaliser l'interface suivante.
On utilisera LabelFrame(fenetre_cible, text='...') et la commande associée au bouton sera None (utile lorsque la véritable fonction n'est pas encore programmée). Attention, le widget LabelFrame n'apparaît dans la fenêtre que s'il contient un widget (il reste invisible tant qu'il est vide).

jeu = tk.Tk()
jeu.title('Mon 1er jeu')
jeu.geometry('300x200')

cadre1 = ttk.LabelFrame(jeu, text='Joueur 1')
cadre1.pack(padx=5, pady=5)

etiquette1 = ttk.Label(cadre1, text='Pseudo :')
etiquette1.pack(padx=5, pady=5, side='left')
entree1 = ttk.Entry(cadre1)
entree1.pack(padx=5, pady=5, side='left')

cadre2 = ttk.LabelFrame(jeu, text='Joueur 2')
cadre2.pack(padx=5, pady=5)

etiquette2 = ttk.Label(cadre2, text='Pseudo :')
etiquette2.pack(padx=5, pady=5, side='left')

entree2 = ttk.Entry(cadre2)
entree2.pack(padx=5, pady=5, side='left')

bJouer = ttk.Button(jeu, text='Jouer', command = None)
bJouer.pack(padx=5, pady=5)

jeu.mainloop()

❮ ❯

Code

import tkinter as tk
from tkinter import ttk

monAppli = tk.Tk()     	                     # Création fenêtre

monCadre = ttk.Frame(monAppli,  width=1, relief='sunken') # Cadre placé dans la fenêtre 
# width=1, relief='sunken' pour visualiser le cadre (inutile en général)
monCadre.pack(padx=5, pady=5)

maLegende  = ttk.Label(monCadre, text='Nom : ') # maLegende placée dans monCadre
maLegende.pack(padx=5, pady=5, side='left')	# maLegende placée à gauche dans monCadre

maZoneSaisie = ttk.Entry(monCadre) 		# maZoneSaisie placée dans monCadre
maZoneSaisie.pack(padx=5, pady=5)	# maZoneSaisie placée par défaut en haut du cadre

monBoutonQuitter = ttk.Button(monAppli, text='Quitter', command=monAppli.destroy)
monBoutonQuitter.pack(padx=5, pady=5)	# Placé par défaut sous le widget précédent

monAppli.mainloop()  	 # Boucle principale

Commentaires

Méthode pack()

Remarque : pour faciliter la compréhension du code ci-dessus, le cadre peut être rendu visible en spécifiant une largeur de bordure et un relief : bd = borderwidth en pixels et relief ('sunken', 'raised', 'groove' ou 'ridge).
Expérimenter à partir des exemples fournis.
D'autres options de placement sont disponibles : side='top', side='bottom' et side='right'.
Par ailleurs, il est possible d'adapter la taille d'un widget à son conteneur (fenêtre ou cadre) via l'option fill. Avec fill='x', le widget occupe tout l'espace horizontal disponible. Autres valeurs possibles : fill='y' ou fill='both' avec l'option expand=1.

Placement	Code (extrait)
	ttk.Button(jeu, text='Widget 1', command=None).pack(padx=5, pady=5, fill='x') ttk.Button(jeu, text='Widget 2', command=None).pack(padx=5, pady=5, side='bottom')
	ttk.Button(jeu, text='Widget 1', command=None).pack(padx=5, pady=5,fill='y',expand=1) ttk.Button(jeu, text='Widget 2', command=None).pack(padx=5, pady=5)
	ttk.Button(jeu, text='Widget 1', command=None).pack(padx=5, pady=5,fill='both',expand=1) ttk.Button(jeu, text='Widget 2', command=None).pack(padx=5, pady=5)

Conception d'une interface

La conception d'une interface graphique nécessite un schéma ou un dessin préparatoire.

Ressources : Python tutorial

❮ ❯