Créez votre première application graphique Python : Commencer avec Tkinter
Liens rapides
- Ce que nous fabriquons
- Configuration de Tkinter
- Créer la fenêtre principale
- Ajouter les widgets nécessaires
- Gestion des événements
- Travailler sur l'interface utilisateur
- Quelques retouches finales
Créer des projets de programmation est génial. Mais si cela a une interface graphique ? Encore mieux ! Créer une application GUI présente de nombreux avantages. Vous obtenez quelque chose que même des amis non-technophiles peuvent apprécier. C'est pourquoi nous allons créer une application GUI en Python et apprendre la bibliothèque Tkinter dans le processus.
Ce que nous fabriquons
Pour ce tutoriel, j'ai décidé de créer une application de liste de tâches. C'est un projet classique qui n'est pas trop difficile et, en même temps, enseigne beaucoup de concepts de programmation. De plus, si le produit final vous plaît, vous pouvez également l'utiliser pour vous-même.
Il existe une version console d'une application Python de liste de tâches. Elle couvre de nombreux aspects de base qu'il est utile de connaître. Je vous recommande donc de la consulter en premier, car cela vous aidera à mieux comprendre ce guide. Cependant, ce n'est pas absolument nécessaire puisque je vais vous guider à travers le code et expliquer ce qui se passe, afin que vous sachiez ce qui se passe sans beaucoup de connaissances préalables.
Je vous recommanderais également de revoir les bases de Python au cas où vous ne maîtriseriez pas le langage. Sans cela, il vous sera difficile de suivre ce guide.
Configurer Tkinter
La bonne chose à propos de Tkinter est qu'il est inclus dans votre installation Python. Ainsi, il n'est pas nécessaire d'installer quoi que ce soit. Vérifions cela en important le module tkinter et en vérifiant sa version.
import tkinter as tk
print(tk.TkVersion)
Vous devriez obtenir le numéro de version sur votre console. Pour moi, c'est 8.6. Si vous obtenez une erreur, cela signifie que votre installation de Python peut ne pas l'avoir. Vous devrez peut-être réinstaller Python, ou sur Linux, installer le paquet correct pour tkinter selon votre distribution.
Créer la fenêtre principale
Si cela a fonctionné pour vous, créons maintenant la fenêtre principale. Nous allons configurer la fenêtre avec des dimensions appropriées et un titre.
import tkinter as tk
# Create the main application window
root = tk.Tk()
root.title("To-Do List App")
root.geometry("400x500")
# Prevent window from being resized
root.resizable(False, False)
# Start the event loop
root.mainloop()
Qu'avons-nous fait ?
- Nous importons Tkinter et l'aliasons comme
tkpour plus de commodité. root=tk.Tk()crée la fenêtre principale de l'application- Nous définissons le titre de la fenêtre en utilisant
root.title() root.geometry("400x500")définit la taille de la fenêtreroot.resizable(False, False)empêche les utilisateurs de redimensionner la fenêtre. Le premier paramètre contrôle le redimensionnement horizontal, le second contrôle le redimensionnement vertical.- Enfin,
root.mainloop()lance la boucle d'événements. C'est crucial ! Sans cela, votre fenêtre apparaîtrait puis se fermerait immédiatement.
Lorsque vous exécutez ce code, vous verrez une fenêtre vide intitulée « Application de liste de tâches ». Elle est pour l'instant vide, mais à l'étape suivante, nous commencerons à la remplir avec des widgets.
Ajouter les widgets nécessaires
Une application de liste de tâches a besoin de nombreux widgets : un champ de saisie, des boutons pour gérer les tâches et un champ pour les afficher. Commençons à les ajouter. Écrivez ces lignes après la ligne root.resizable(False, False).
task_entry = tk.Entry(root, width=35, font=("Arial", 12))
task_entry.pack(pady=10)
Nous créons un widget Entry pour les entrées de texte sur une seule ligne. Nous lui donnons une largeur, une police et un peu de rembourrage vertical. Ensuite, nous ajoutons un bouton.
add_button = tk.Button(root, text="Add Task", width=20, font=("Arial", 10))
add_button.pack(pady=5)
Encore une fois, nous lui donnons une largeur, une police, un peu de padding vertical et une étiquette de texte. Ce bouton fonctionnera comme le bouton d'ajout de tâche. Après cela, nous créons une zone de liste pour afficher les tâches.
task_listbox = tk.Listbox(root, width=50, height=15, font=("Arial", 10))
task_listbox.pack(pady=10)
Comme pour les widgets précédents, nous lui fournissons certaines propriétés, y compris sa hauteur. Nous utilisons le gestionnaire de géométrie pack() pour positionner les widgets dans l'ordre où ils sont ajoutés. Tkinter propose également grid() pour un contrôle plus précis. Pour ce tutoriel, nous resterons avec pack() car il est plus simple pour les débutants.
Lorsque vous exécutez ce code, vous verrez un champ de texte vide en haut, un bouton « Ajouter une tâche » en dessous, et une grande liste vide en bas.
Ça ressemble maintenant plus à une application de tâches.
Gestion des événements
Actuellement, notre application n'a qu'une interface utilisateur. Il n'y a aucune fonctionnalité. Rendons notre application interactive. Nous allons créer une fonction pour ajouter des tâches à la liste. Ajoutez ce morceau de code après la ligne root.resizable(False, False).
def add_task():
task = task_entry.get()
if task:
task_listbox.insert(tk.END, task)
task_entry.delete(0, tk.END)
else:
print("Please enter a task!")
Tout d'abord, nous récupérons le texte dans le champ de saisie. Nous vérifions ensuite si le champ est vide ou non à l'aide d'une condition. S'il n'est pas vide, nous insérons le texte, qui est la tâche, dans la liste et nous effaçons le champ de saisie. Sinon, nous affichons un message simple dans la console indiquant qu'aucune tâche n'a été saisie. La prochaine étape consiste à connecter cela au bouton.
add_button = tk.Button(root, text="Add Task", width=20, font=("Arial", 10), command=add_task)
Nous passons un nouvel argument, la fonction add_task(). Cela indique au bouton d'appeler la fonction lorsqu'il est cliqué. Remarquez que nous ne donnons pas les parenthèses lors du passage de l'argument.
Essayons cela. Écrivez quelque chose dans le champ de saisie et cliquez sur le bouton « Ajouter une tâche » pour voir si la tâche est ajoutée ou non. Ensuite, essayez d'ajouter une tâche lorsque le champ de saisie est vide.
Génial. Ça fonctionne comme prévu. Vous pouvez maintenant ajouter des tâches.
Travailler sur l'interface utilisateur
Ajoutons plus de fonctionnalités pour rendre notre application de liste de tâches vraiment utile. Nous allons ajouter la possibilité de supprimer des tâches, de tout effacer et de marquer les tâches comme terminées. Ajoutons une fonction pour supprimer une tâche. Ajoutez ce code après la fonction add_task().
def delete_task():
try:
selected_index = task_listbox.curselection()[0]
task_listbox.delete(selected_index)
except IndexError:
print("Please select a task to delete!")
Ici, curselection()[0] obtient le premier (et unique) élément sélectionné à partir d'un tuple d'indices d'éléments sélectionnés. Nous supprimons ensuite l'élément à cet index. Nous utilisons également try/except pour une meilleure gestion des erreurs. Après cela, ajoutons une fonction pour effacer toutes les tâches dans la liste.
def clear_all_tasks():
task_listbox.delete(0, tk.END)
Cette fonction supprime toutes les tâches du début à la fin. Maintenant, ajoutons une fonction qui permettra de marquer une tâche comme terminée.
def mark_complete():
try:
selected_index = task_listbox.curselection()[0]
task = task_listbox.get(selected_index)
# Check if task is already marked complete
if not task.startswith("✓ "):
# Mark as complete with checkmark
task_listbox.delete(selected_index)
task_listbox.insert(selected_index, "✓ " + task)
task_listbox.itemconfig(selected_index, fg="gray")
except IndexError:
print("Please select a task to mark as complete!")
Beaucoup de choses se passent ici. Tout d'abord, nous récupérons la tâche sélectionnée, comme nous l'avons fait précédemment pour la suppression. Ensuite, nous utilisons des conditions pour vérifier si le texte de la tâche répond à une exigence spécifique. C'est-à-dire s'il commence par la coche ✓ suivie d'un espace.
Sinon, alors ce n'est pas terminé. Nous retirons la tâche de la liste et la réinsérons avec la coche et un espace. Pour plus de clarté visuelle, nous rendons également son texte en gris. Si aucune tâche n'est sélectionnée, nous affichons un message utile. Comme il n'y a pas d'option d'édition directe, nous supprimons d'abord la tâche puis la réinsérons à la même position avec le marquage.
Nous devons encore lier ces fonctionnalités à certains boutons. Tout d'abord, créons un cadre où nous placerons les nouveaux boutons. Ajoutez cela juste avant root.mainloop().
button_frame = tk.Frame(root)
button_frame.pack(pady=10)
Frame est un widget conteneur qui regroupe d'autres widgets. À l'intérieur de ce cadre, nous plaçons trois nouveaux boutons : un bouton de suppression, un bouton d'effacement et un bouton de marquer comme terminé.
mark_button = tk.Button(button_frame, text="Mark Complete", width=15,
font=("Arial", 10), command=mark_complete)
mark_button.grid(row=0, column=0, padx=5)
delete_button = tk.Button(button_frame, text="Delete Task", width=15,
font=("Arial", 10), command=delete_task)
delete_button.grid(row=0, column=1, padx=5)
clear_button = tk.Button(button_frame, text="Clear All", width=15,
font=("Arial", 10), command=clear_all_tasks)
clear_button.grid(row=0, column=2, padx=5)
Contrairement à avant, nous avons utilisé grid() ici. Cela nous donne un alignement horizontal précis des boutons. Les paramètres row et column déterminent où nous voulons placer le widget spécifique à l'intérieur de la disposition en grille. Nous ajoutons également un peu de marge horizontale à chaque bouton et à sa fonctionnalité respective.
Maintenant, notre application fonctionne comme une vraie application de tâches.
Quelques retouches finales
L'application fonctionne bien. Mais elle a un aspect un peu terne. Améliorons son apparence pour la rendre plus professionnelle. Ajoutez cette ligne après la ligne root.resizable(False, False).
root.config(bg="#f0f0f0") # Light gray background
Cela définit un agréable fond gris clair pour toute la fenêtre. Ensuite, créons une section d'en-tête. Ajoutez ce code après la fonction mark_complete().
header_frame = tk.Frame(root, bg="#4a7c9e")
header_frame.pack(fill=tk.X)
header_label = tk.Label(header_frame, text="📝 My To-Do List",
font=("Arial", 18, "bold"),
bg="#4a7c9e", fg="white")
header_label.pack(pady=15)
Avec fill=tk.X,, nous faisons en sorte que le cadre s'étire horizontalement à travers la fenêtre. Nous avons ajouté un widget label avec certaines propriétés. Ensuite, travaillons sur la section de saisie.
input_frame = tk.Frame(root, bg="#f0f0f0")
input_frame.pack(pady=20)
task_entry = tk.Entry(input_frame, width=35, font=("Arial", 13),
bd=2, relief=tk.GROOVE)
task_entry.pack(side=tk.LEFT, padx=10, ipady=5)
task_entry.bind('<Return>', lambda event: add_task())
add_button = tk.Button(input_frame, text="Add Task", width=12,
font=("Arial", 11, "bold"),
bg="#5cb85c", fg="white",
activebackground="#4cae4c",
bd=0, cursor="hand2",
command=add_task)
add_button.pack(side=tk.LEFT)
Nous avons ajouté une bordure au champ de saisie et lui avons donné un effet GROOVE. Nous avons également ajouté un peu de style au bouton. Ensuite, la section de la liste déroulante.
list_frame = tk.Frame(root, bg="#f0f0f0")
list_frame.pack(pady=10, padx=20)
scrollbar = tk.Scrollbar(list_frame, orient=tk.VERTICAL)
task_listbox = tk.Listbox(list_frame, width=55, height=14,
font=("Arial", 11),
bd=2, relief=tk.SUNKEN,
selectmode=tk.SINGLE,
activestyle='none',
bg="white",
selectbackground="#d4e6f1",
selectforeground="black",
yscrollcommand=scrollbar.set)
scrollbar.config(command=task_listbox.yview)
task_listbox.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
Dans le cadre de la liste déroulante, nous avons un nouveau widget Scrollbar. Si la liste devient grande, elle défilera verticalement. Nous avons également ajouté certaines propriétés au widget Listbox, en définissant ses couleurs, le style de bordure et le comportement de défilement. Passons maintenant aux boutons restants.
button_frame = tk.Frame(root, bg="#f0f0f0")
button_frame.pack(pady=20)
mark_button = tk.Button(button_frame, text="✓ Mark Complete", width=15,
font=("Arial", 10, "bold"),
bg="#5bc0de", fg="white",
activebackground="#46b8da",
bd=0, cursor="hand2",
command=mark_complete)
mark_button.grid(row=0, column=0, padx=8)
delete_button = tk.Button(button_frame, text="✕ Delete Task", width=15,
font=("Arial", 10, "bold"),
bg="#d9534f", fg="white",
activebackground="#c9302c",
bd=0, cursor="hand2",
command=delete_task)
delete_button.grid(row=0, column=1, padx=8)
clear_button = tk.Button(button_frame, text="Clear All", width=15,
font=("Arial", 10, "bold"),
bg="#f0ad4e", fg="white",
activebackground="#ec971f",
bd=0, cursor="hand2",
command=clear_all_tasks)
clear_button.grid(row=0, column=2, padx=8)
Nous utilisons des couleurs et d'autres styles qui correspondent à l'action de chaque bouton pour les faire ressortir visuellement. Enfin, ajoutons une section de pied de page.
footer_label = tk.Label(root, text="Select a task and use buttons to manage it",
font=("Arial", 9, "italic"),
bg="#f0f0f0", fg="#666666")
footer_label.pack(side=tk.BOTTOM, pady=10)
Nous avons utilisé un widget Label ici comme section de texte. Lorsque vous exécuterez la version actuelle, vous devriez voir une application de tâches à faire d'apparence magnifique.
L'interface semble beaucoup plus soignée et professionnelle maintenant. J'ai le code complet disponible sur mon dépôt GitHub pour votre confort, alors n'hésitez pas à le consulter.
Vous pouvez ajouter beaucoup plus à l'application existante, comme des opérations sur les fichiers, des boîtes de dialogue de messages et l'intégration de bases de données, entre autres. Si vous êtes intéressé par d'autres projets Tkinter, vous pouvez également créer un suivi des dépenses. Consultez également la documentation Tkinter pour en savoir plus.