{"id":5813,"date":"2024-08-29T06:48:19","date_gmt":"2024-08-29T06:48:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/placer-des-widgets-avec-grid-en-tkinter\/"},"modified":"2024-08-29T06:48:22","modified_gmt":"2024-08-29T06:48:22","slug":"placer-des-widgets-avec-grid-en-tkinter","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/placer-des-widgets-avec-grid-en-tkinter\/","title":{"rendered":"6.11 Placer des Widgets avec grid en Tkinter"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Placer des Widgets avec grid en Tkinter<\/strong> est une comp\u00e9tence essentielle pour organiser efficacement vos interfaces utilisateur en Python. Avec la m\u00e9thode <code>grid<\/code>, vous pouvez placer des widgets dans une grille, ce qui facilite le positionnement et le dimensionnement des \u00e9l\u00e9ments de mani\u00e8re flexible. Apprenons comment utiliser cette m\u00e9thode avec des exemples concrets pour am\u00e9liorer vos interfaces graphiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>grid en Tkinter<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/583385374?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) {\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La m\u00e9thode <code>grid<\/code> de Tkinter permet de placer des widgets dans une grille compos\u00e9e de lignes et de colonnes. Contrairement \u00e0 la m\u00e9thode <code>pack<\/code>, <code>grid<\/code> offre plus de contr\u00f4le et de flexibilit\u00e9 pour positionner les widgets pr\u00e9cis\u00e9ment o\u00f9 vous le souhaitez. Gr\u00e2ce \u00e0 <code>grid<\/code>, vous pouvez cr\u00e9er des interfaces utilisateur claires et bien ordonn\u00e9es. Si vous d\u00e9butez avec Tkinter, vous pouvez trouver des tutoriels sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-une-fenetre-avec-tkinter-tutoriel\">cr\u00e9er une fen\u00eatre avec Tkinter<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-le-widget-label-avec-tkinter\">utiliser le widget Label avec Tkinter<\/a> pour vous familiariser avant de plonger dans l&rsquo;utilisation de <code>grid<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9buter avec <strong>grid<\/strong> en Tkinter<\/h3>\n\n\n\n<p>Pour commencer \u00e0 utiliser la m\u00e9thode <code>grid<\/code>, il faut comprendre ses param\u00e8tres de base : <code>row<\/code> et <code>column<\/code>. La m\u00e9thode <code>grid<\/code> place un widget \u00e0 la cellule sp\u00e9cifi\u00e9e par les rang\u00e9es et colonnes choisies. Voici un exemple basique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\nroot = tk.Tk()\n\n# Cr\u00e9er des widgets\nlabel1 = tk.Label(root, text=\"Label 1\")\nlabel2 = tk.Label(root, text=\"Label 2\")\nlabel3 = tk.Label(root, text=\"Label 3\")\n\n# Placer des widgets avec la m\u00e9thode grid\nlabel1.grid(row=0, column=0)\nlabel2.grid(row=0, column=1)\nlabel3.grid(row=1, column=0, columnspan=2)  # \u00c9tendre sur deux colonnes\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, les widgets sont plac\u00e9s dans une grille avec deux lignes et deux colonnes. Le widget <code>label3<\/code> utilise le param\u00e8tre <code>columnspan<\/code> pour s\u2019\u00e9tendre sur deux colonnes. Une bonne ma\u00eetrise de la m\u00e9thode <code>grid<\/code> est essentielle pour cr\u00e9er des interfaces complexes, comme vous le verrez dans notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/comprendre-tkinter-la-fen\u00eatre\/145\">tutoriel approfondi<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les marges et les espacements<\/h3>\n\n\n\n<p>Pour ajuster les marges et les espacements entre les widgets, vous pouvez utiliser les param\u00e8tres <code>padx<\/code> et <code>pady<\/code> (pour les marges internes) ainsi que <code>sticky<\/code> (pour l\u2019alignement). Voici un exemple illustrant leurs utilisations :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\nroot = tk.Tk()\n\n# Cr\u00e9er des widgets\nlabel1 = tk.Label(root, text=\"Label 1\")\nlabel2 = tk.Label(root, text=\"Label 2\")\nlabel3 = tk.Label(root, text=\"Label 3\")\n\n# Placer des widgets avec marges et alignement\nlabel1.grid(row=0, column=0, padx=10, pady=10)\nlabel2.grid(row=0, column=1, padx=10, pady=10)\nlabel3.grid(row=1, column=0, columnspan=2, padx=10, pady=10, sticky=\"we\")\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, les widgets ont des marges de 10 pixels autour d&rsquo;eux et le <code>label3<\/code> est \u00e9tendu horizontalement dans sa cellule \u00e0 l\u2019aide du param\u00e8tre <code>sticky=\"we\"<\/code> (west-east). Prendre en consid\u00e9ration l&rsquo;alignement et les marges est crucial pour des interfaces soign\u00e9es, et vous pouvez apprendre plus sur l&rsquo;usage des widgets dans Tkinter dans notre article <a href=\"https:\/\/wikiform.fr\/codespace\/placer-des-widgets-avec-pack-en-tkinter\">Placer des Widgets avec pack en Tkinter<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner grid avec les Frames<\/h3>\n\n\n\n<p>L\u2019utilisation de <code>Frame<\/code>s avec <code>grid<\/code> permet de segmenter votre interface utilisateur en sous-sections, vous offrant une flexibilit\u00e9 et une organisation accrues. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\nroot = tk.Tk()\n\n# Cr\u00e9er des cadres\nframe1 = tk.Frame(root, borderwidth=2, relief=\"solid\")\nframe2 = tk.Frame(root, borderwidth=2, relief=\"solid\")\n\n# Placer les cadres dans la grille principale\nframe1.grid(row=0, column=0, padx=10, pady=10)\nframe2.grid(row=0, column=1, padx=10, pady=10)\n\n# Ajouter des widgets aux cadres\nlabel1 = tk.Label(frame1, text=\"Frame 1 - Label 1\")\nlabel2 = tk.Label(frame1, text=\"Frame 1 - Label 2\")\nlabel1.grid(row=0, column=0, padx=5, pady=5)\nlabel2.grid(row=1, column=0, padx=5, pady=5)\n\nlabel3 = tk.Label(frame2, text=\"Frame 2 - Label 1\")\nlabel4 = tk.Label(frame2, text=\"Frame 2 - Label 2\")\nlabel3.grid(row=0, column=0, padx=5, pady=5)\nlabel4.grid(row=1, column=0, padx=5, pady=5)\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, deux cadres (<code>frame1<\/code> et <code>frame2<\/code>) sont cr\u00e9\u00e9s et ins\u00e9r\u00e9s dans la grille principale. Chaque cadre a des widgets plac\u00e9s ind\u00e9pendamment avec <code>grid<\/code>. Cette technique est pratique pour des interfaces complexes, notamment lorsque vous utilisez des <a href=\"https:\/\/wikiform.fr\/codespace\/creer-des-boutons-avec-tkinter-guide\">boutons<\/a> ou des <a href=\"https:\/\/wikiform.fr\/codespace\/saisie-avec-le-widget-entry-en-tkinter\">widgets Entry<\/a> dans diff\u00e9rentes sections.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fusionner des Widgets dans la Grille<\/h3>\n\n\n\n<p>Vous pouvez fusionner des cellules pour cr\u00e9er un widget plus large ou plus haut en utilisant les param\u00e8tres <code>rowspan<\/code> et <code>columnspan<\/code>. Cela est particuli\u00e8rement utile lorsqu&rsquo;un widget doit occuper plus d&rsquo;une cellule dans la grille. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\nroot = tk.Tk()\n\n# Cr\u00e9er des widgets\nlabel1 = tk.Label(root, text=\"Label 1\")\nlabel2 = tk.Label(root, text=\"Label 2\")\nlabel3 = tk.Label(root, text=\"Label 3\")\n\n# Placer des widgets avec fusion de cellules\nlabel1.grid(row=0, column=0)\nlabel2.grid(row=0, column=1)\nlabel3.grid(row=1, column=0, rowspan=2, columnspan=2, pady=5, sticky=\"nsew\")\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, le widget <code>label3<\/code> utilise les param\u00e8tres <code>rowspan<\/code> et <code>columnspan<\/code> pour s\u2019\u00e9tendre sur trois cellules dans la grille. Cette m\u00e9thode est particuli\u00e8rement utile pour des conceptions de formulaires complexes ou des interfaces dynamiques. D\u00e9couvrez comment ces principes peuvent \u00eatre appliqu\u00e9s dans des cas concrets avec notre article sur la <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-des-messages-avec-tkinter\">bo\u00eete de message modale en Tkinter<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pratique Avanc\u00e9e : Formulaires Complets<\/h3>\n\n\n\n<p>Pour illustrer la puissance de <code>grid<\/code>, nous allons cr\u00e9er un formulaire complet avec divers types de widgets, y compris des entr\u00e9es, des labels et des boutons. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\nroot = tk.Tk()\n\n# Cr\u00e9er des labels et des entr\u00e9es pour le formulaire\ntk.Label(root, text=\"Nom:\").grid(row=0, column=0, padx=5, pady=5, sticky=\"e\")\ntk.Entry(root).grid(row=0, column=1, padx=5, pady=5)\n\ntk.Label(root, text=\"Email:\").grid(row=1, column=0, padx=5, pady=5, sticky=\"e\")\ntk.Entry(root).grid(row=1, column=1, padx=5, pady=5)\n\ntk.Label(root, text=\"Mot de passe:\").grid(row=2, column=0, padx=5, pady=5, sticky=\"e\")\ntk.Entry(root, show=\"*\").grid(row=2, column=1, padx=5, pady=5)\n\n# Cr\u00e9er des boutons pour le formulaire\ntk.Button(root, text=\"Soumettre\").grid(row=3, column=0, columnspan=2, pady=10)\ntk.Button(root, text=\"Annuler\").grid(row=4, column=0, columnspan=2, pady=5)\n\nroot.mainloop()\n <\/code><\/pre>\n\n\n\n<p>Ce formulaire simple utilise la m\u00e9thode <code>grid<\/code> pour aligner des labels, des entr\u00e9es et des boutons de mani\u00e8re claire et ordonn\u00e9e. Si vous souhaitez aller plus loin dans les formulaires et les interfaces utilisateur, vous pouvez consulter notre article sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-les-variables-de-controle-avec-tkinter\">utilisation des variables de contr\u00f4le avec Tkinter<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La m\u00e9thode <code>grid<\/code> en Tkinter est une technique puissante pour cr\u00e9er des interfaces utilisateur bien organis\u00e9es et flexibles. En tirant parti des param\u00e8tres comme <code>row<\/code>, <code>column<\/code>, <code>rowspan<\/code>, <code>columnspan<\/code>, <code>padx<\/code>, et <code>pady<\/code>, vous pouvez disposer vos widgets selon vos besoins sp\u00e9cifiques. Continuez \u00e0 explorer les possibilit\u00e9s offertes par <code>grid<\/code> pour ma\u00eetriser enti\u00e8rement la disposition des widgets dans Tkinter. Pour des exercices plus avanc\u00e9s, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Placer des Widgets avec grid en Tkinter est une comp\u00e9tence essentielle pour organiser efficacement vos interfaces utilisateur en Python. Avec la m\u00e9thode grid, vous&#8230;<\/p>\n","protected":false},"author":4,"featured_media":2944,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[24],"tags":[18],"class_list":["post-5813","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-python","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5813"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5813\/revisions"}],"predecessor-version":[{"id":5814,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5813\/revisions\/5814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2944"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}