{"id":5811,"date":"2024-08-29T06:44:09","date_gmt":"2024-08-29T06:44:09","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/placer-des-widgets-avec-pack-en-tkinter\/"},"modified":"2024-08-29T06:44:12","modified_gmt":"2024-08-29T06:44:12","slug":"placer-des-widgets-avec-pack-en-tkinter","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/placer-des-widgets-avec-pack-en-tkinter\/","title":{"rendered":"6.10 Placer des Widgets avec pack en Tkinter"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les widgets en Tkinter<\/strong> sont au c\u0153ur de toute application graphique en Python. D\u00e9couvrir comment les placer et les organiser efficacement avec la m\u00e9thode <strong>pack<\/strong> optimisera vos interfaces et am\u00e9liorera l&rsquo;exp\u00e9rience utilisateur. Apprenons ensemble, par des exemples d\u00e9taill\u00e9s, comment utiliser la m\u00e9thode pack pour cr\u00e9er des interfaces visuellement agr\u00e9ables et fonctionnelles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la M\u00e9thode <strong>Pack<\/strong> en Tkinter<\/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\/583384747?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) { \/\/ 120 seconds = 2 minutes\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 pack est l&rsquo;un des gestionnaires de positionnement propos\u00e9s par Tkinter, les autres \u00e9tant grid et place. Le gestionnaire pack est utilis\u00e9 pour organiser les widgets de mani\u00e8re s\u00e9quentielle dans un conteneur parent, soit horizontalement, soit verticalement. Gr\u00e2ce \u00e0 la m\u00e9thode pack, vous pouvez contr\u00f4ler l&rsquo;alignement, la direction et l&rsquo;espacement de vos widgets pour obtenir la disposition souhait\u00e9e. Ceux qui souhaitent en savoir plus sur d&rsquo;autres m\u00e9thodes de positionnement peuvent \u00e9galement consulter notre article <a href=\"https:\/\/wikiform.fr\/codespace\/placer-des-widgets-avec-grid-en-tkinter\">sur le positionnement avec grid en Tkinter<\/a>. De m\u00eame, pour comprendre comment initialiser Tkinter, visitez notre guide <a href=\"https:\/\/wikiform.fr\/codespace\/creer-une-fenetre-avec-tkinter-tutoriel\">cr\u00e9er une fen\u00eatre avec Tkinter<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Positionnement de Base avec <strong>Pack<\/strong><\/h2>\n\n\n\n<p>Pour un premier exemple, nous allons voir comment utiliser la m\u00e9thode pack pour arranger de simples widgets (par exemple, des boutons) verticalement dans une fen\u00eatre. Vous pouvez suivre les \u00e9tapes ci-dessous :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\n# Cr\u00e9ation de la fen\u00eatre principale\nroot = tk.Tk()\nroot.title(\"Exemple Pack\")\n\n# Cr\u00e9ation de boutons et utilisation de pack pour les placer\nbutton1 = tk.Button(root, text=\"Bouton 1\")\nbutton1.pack()\n\nbutton2 = tk.Button(root, text=\"Bouton 2\")\nbutton2.pack()\n\nbutton3 = tk.Button(root, text=\"Bouton 3\")\nbutton3.pack()\n\n# Lancement de la boucle principale\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, chaque bouton est ajout\u00e9 \u00e0 la fen\u00eatre principale avec le gestionnaire pack, ce qui les empile verticalement. Le comportement par d\u00e9faut de pack est d&rsquo;afficher les widgets de haut en bas. Pour d&rsquo;autres approches de mise en page dans Tkinter, d\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/placer-des-widgets-avec-place-en-tkinter\">ajuster les positions avec place<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configurer l&rsquo;Alignement et la Remplissage avec <strong>Pack<\/strong><\/h2>\n\n\n\n<p>La m\u00e9thode pack permet de configurer l&rsquo;alignement (par exemple, gauche, droite ou centr\u00e9) ainsi que le remplissage (horizontalement ou verticalement). Voyons comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\nroot = tk.Tk()\nroot.title(\"Alignement et Remplissage\")\n\n# Cr\u00e9ation de boutons avec configurations diverses\nbutton1 = tk.Button(root, text=\"Gauche\")\nbutton1.pack(side=\"left\", padx=10, pady=10)\n\nbutton2 = tk.Button(root, text=\"Droite\")\nbutton2.pack(side=\"right\", padx=10, pady=10)\n\nbutton3 = tk.Button(root, text=\"Remplir X\")\nbutton3.pack(fill=\"x\", padx=10, pady=10)\n\nbutton4 = tk.Button(root, text=\"Remplir Y\")\nbutton4.pack(fill=\"y\", padx=10, pady=10)\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<p>Ici, nous utilisons les options side, padx, pady et fill de pack. L&rsquo;option side permet de placer les widgets \u00e0 gauche ou \u00e0 droite. Les options fill et padx\/pady permettent d&rsquo;ajuster le remplissage et l&rsquo;espacement. Pour des techniques avanc\u00e9es de remplissage et d&rsquo;alignement, consultez notre guide <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-le-widget-label-avec-tkinter\">utiliser le widget Label avec Tkinter<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Combinaison d&rsquo;Options avec <strong>Pack<\/strong><\/h2>\n\n\n\n<p>La puissance de la m\u00e9thode pack r\u00e9side dans sa flexibilit\u00e9 et sa capacit\u00e9 \u00e0 combiner des options pour obtenir des dispositions complexes. Voici un exemple qui montre comment cr\u00e9er une disposition plus \u00e9labor\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\nroot = tk.Tk()\nroot.title(\"Combinaison d'Options Pack\")\n\nframe1 = tk.Frame(root, bg=\"lightblue\", bd=2)\nframe1.pack(fill=\"x\")\n\nframe2 = tk.Frame(root, bg=\"lightgreen\", bd=2)\nframe2.pack(fill=\"both\", expand=True)\n\nbutton1 = tk.Button(frame1, text=\"Frame 1 - Bouton 1\")\nbutton1.pack(side=\"left\")\n\nbutton2 = tk.Button(frame1, text=\"Frame 1 - Bouton 2\")\nbutton2.pack(side=\"right\")\n\nbutton3 = tk.Button(frame2, text=\"Frame 2 - Bouton 1\")\nbutton3.pack(side=\"top\")\n\nbutton4 = tk.Button(frame2, text=\"Frame 2 - Bouton 2\")\nbutton4.pack(side=\"bottom\")\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, nous cr\u00e9ons deux cadres (Frame) avec diff\u00e9rentes couleurs d&rsquo;arri\u00e8re-plan pour une meilleure visualisation. Nous ajoutons des boutons dans ces cadres en utilisant diverses options pack pour contr\u00f4ler leur positionnement. Pour explorer davantage la cr\u00e9ation de cadres et de leurs dispositions, notre tutoriel sur la <a href=\"https:\/\/wikiform.fr\/codespace\/observateurs-en-tkinter-fonctionnement\">gestion des observateurs en Tkinter<\/a> pourrait \u00eatre utile.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Utiliser <strong>Expand<\/strong> et <strong>Anchor<\/strong> avec <strong>Pack<\/strong><\/h2>\n\n\n\n<p>Les options expand et anchor ajoutent encore plus de flexibilit\u00e9 \u00e0 la m\u00e9thode pack. L&rsquo;option expand permet d&rsquo;indiquer si le widget doit s&rsquo;\u00e9tendre pour occuper tout l&rsquo;espace disponible, tandis que anchor contr\u00f4le l&rsquo;alignement des widgets \u00e0 l\u2019int\u00e9rieur de leur conteneur. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\nroot = tk.Tk()\nroot.title(\"Expand et Anchor\")\n\nbutton1 = tk.Button(root, text=\"Bouton Expansif\")\nbutton1.pack(expand=True, fill=\"both\")\n\nbutton2 = tk.Button(root, text=\"Bouton Ancr\u00e9\")\nbutton2.pack(anchor=\"se\")\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<p>Avec l&rsquo;option expand, le premier bouton occupe tout l&rsquo;espace disponible. Le deuxi\u00e8me bouton est ancr\u00e9 au sud-est (en bas \u00e0 droite) de la fen\u00eatre. Pour d&rsquo;autres astuces d&rsquo;ancrage et d&rsquo;expansion de widgets, consulter <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-des-messages-avec-tkinter\">afficher des messages avec Tkinter<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Projet R\u00e9el: Cr\u00e9ation d&rsquo;une Interface Utilisateur<\/h2>\n\n\n\n<p>Voyons maintenant comment appliquer ces concepts dans un projet r\u00e9el, comme cr\u00e9er une simple interface utilisateur avec des champs de saisie, des \u00e9tiquettes et des boutons de soumission :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\nroot = tk.Tk()\nroot.title(\"Formulaire Utilisateur\")\n\n# Cr\u00e9ation des \u00e9l\u00e9ments de l'interface utilisateur\ntk.Label(root, text=\"Nom\").pack(anchor=\"w\", padx=10, pady=5)\ntk.Entry(root).pack(fill=\"x\", padx=10)\n\ntk.Label(root, text=\"E-mail\").pack(anchor=\"w\", padx=10, pady=5)\ntk.Entry(root).pack(fill=\"x\", padx=10)\n\ntk.Button(root, text=\"Soumettre\").pack(pady=10)\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, nous cr\u00e9ons un formulaire basique avec des champs de saisie pour le nom et l&rsquo;e-mail, ainsi qu&rsquo;un bouton de soumission. Les \u00e9tiquettes sont align\u00e9es \u00e0 gauche et les champs de saisie remplissent l&rsquo;espace horizontal disponible. Pour ceux qui cherchent \u00e0 ajouter des fonctionnalit\u00e9s logiques \u00e0 de tels formulaires, notre guide sur la <a href=\"https:\/\/wikiform.fr\/codespace\/structures-de-donnees-dictionnaires-en-python\">gestion des dictionnaires en Python<\/a> pourrait \u00eatre d&rsquo;une grande aide.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La m\u00e9thode <strong>pack<\/strong> de Tkinter est un puissant outil pour organiser les widgets dans une application. Elle permet d&rsquo;ajuster facilement l&rsquo;alignement, le remplissage et l&rsquo;espacement des widgets, et de combiner ces options pour cr\u00e9er des interfaces utilisateur complexes et bien structur\u00e9es. Continuez \u00e0 exp\u00e9rimenter avec pack, et explorez \u00e9galement les gestionnaires grid et place pour une ma\u00eetrise compl\u00e8te de la disposition des widgets en Tkinter. Pour en savoir plus sur Tkinter, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/tkinter-interm\u00e9diaire-avanc\u00e9\/150\">cours interm\u00e9diaire et avanc\u00e9 sur Tkinter<\/a> ou notre <a href=\"https:\/\/wikiform.fr\/codespace\/installer-python-sur-windows-facilement\">tutoriel d\u00e9taill\u00e9 pour cr\u00e9er une fen\u00eatre avec Tkinter<\/a>, et apprenez \u00e9galement comment <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/tkinter_initialisation\/135\">initialiser Tkinter pour vos projets<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-PYTHON-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Python Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les widgets en Tkinter sont au c\u0153ur de toute application graphique en Python. D\u00e9couvrir comment les placer et les organiser efficacement avec la m\u00e9thode&#8230;<\/p>\n","protected":false},"author":4,"featured_media":2945,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[24],"tags":[18],"class_list":["post-5811","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\/5811","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=5811"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5811\/revisions"}],"predecessor-version":[{"id":5812,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5811\/revisions\/5812"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2945"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}