{"id":3206,"date":"2022-01-25T21:24:42","date_gmt":"2022-01-25T20:24:42","guid":{"rendered":"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/"},"modified":"2022-01-27T22:40:00","modified_gmt":"2022-01-27T21:40:00","slug":"kivy-et-le-screenmanager","status":"publish","type":"page","link":"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/","title":{"rendered":"Kivy et le ScreenManager"},"content":{"rendered":"\n<p>Les sources des exemples sont disponibles <a href=\"https:\/\/filedn.com\/lpKG7uY9hIHVel5exA5Ik80\/Kivy_Demo\/\" target=\"_blank\" rel=\"noreferrer noopener\">ici<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Utiliser le ScreenManager avec Kivy\" width=\"900\" height=\"506\" src=\"https:\/\/www.youtube.com\/embed\/L0Re31xu_oE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Le principe<\/h3>\n\n\n\n<p>Kivy ne travaille qu&rsquo;avec une seule fen\u00eatre. Dans celle-ci, on peut mettre un ou plusieurs composants \u00ab\u00a0Screen\u00a0\u00bb.<\/p>\n\n\n\n<p>On peut ainsi en mettre plusieurs les uns apr\u00e8s les uns pour remplir la fen\u00eatre, \u00e0 la mani\u00e8re des \u00ab\u00a0Layout\u00a0\u00bb.<\/p>\n\n\n\n<p>Mais on peut surtout les mettre les uns \u00e0 la place des autres. Pour cel\u00e0, on utilise un ou plusieurs composants \u00ab\u00a0ScreenManager\u00a0\u00bb.<\/p>\n\n\n\n<p>Ainsi, le contenu d&rsquo;un \u00ab\u00a0ScreenManager\u00a0\u00bb est une succession de \u00ab\u00a0Screen\u00a0\u00bb dont les noms devront \u00eatre d\u00e9finie par l&rsquo;attribut \u00ab\u00a0name\u00a0\u00bb (\u00e0 ne pas confondre avec \u00ab\u00a0id\u00a0\u00bb). <\/p>\n\n\n\n<p>L&rsquo;attribut \u00ab\u00a0current\u00a0\u00bb du \u00ab\u00a0ScreenManager\u00a0\u00bb indique le nom du composant \u00ab\u00a0Screen\u00a0\u00bb courant. Il suffit donc de changer sa valeur pour basculer d&rsquo;un \u00e9cran \u00e0 l&rsquo;autre.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Un exemple basique : on basculer entre deux \u00e9crans ( Exemple04 )<\/h3>\n\n\n\n<h5 class=\"wp-block-heading\">&#8211; Builder.py<\/h5>\n\n\n\n<p>On y d\u00e9finit deux classes \u00ab\u00a0Screen1\u00a0\u00bb et \u00ab\u00a0Screen2\u00a0\u00bb, et la m\u00e9thode \u00ab\u00a0vers-ecran()\u00a0\u00bb pour faire la bascule.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from kivymd.app import MDApp\nfrom kivy.lang import Builder\nfrom kivy.uix.screenmanager import Screen\n\nclass Screen1(Screen) :\n\tpass\n\nclass Screen2(Screen) :\n\tpass\n\n\nclass MonAppli(MDApp):\n\ttitle = \"Mon appli\"\n\t#icon = \"Images\/icon.png\" \n\n\tdef build(self):\n\t\tself.theme_cls.theme_style = \"Light\"\n\t\tself.theme_cls.primary_palette = \"Teal\"\n\n\t\treturn Builder.load_file(\"design.kv\")\n\n\n\tdef vers_ecran(self,ecran):\n\t\tself.root.ids.screen_manager.current = ecran\n\t\tif ecran==\"ecran1\":\n\t\t\tself.root.ids.screen_manager.transition.direction = \"right\"\t\n\t\telse :\n\t\t\tself.root.ids.screen_manager.transition.direction = \"left\"\t\n\n\nif __name__ == '__main__':\n\tMonAppli().run()<\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">&#8211; design.kv<\/h5>\n\n\n\n<p>On commence par d\u00e9finir les deux \u00e9crans, avant les placer dans le ScreenManager.<\/p>\n\n\n\n<p>Ne pas oublier de placer le ScreenManager dans un Screen.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;Screen1> :\n\tname : \"ecran1\"\n\n\tMDBoxLayout :\n\t\torientation : \"vertical\"\n\t\tpadding : 20\n\t\tspacing : 20\n\n\t\tMDLabel : \n\t\t\ttext: \"\u00c9cran 1\"\n\t\t\thalign : \"center\"\n\t\t\tfont_style : \"H6\"\n\t\t\tmd_bg_color : (1,1,0,0.5)\n\t\t\tsize_hint_y : 0.5\n\t\tMDFloatLayout :\n\t\t\tMDRaisedButton :\n\t\t\t\ttext : \"Aller sur \u00c9cran 2\"\n\t\t\t\tpos_hint : {\"center_x\" : 0.5,\"center_y\" : 0.5}\n\t\t\t\ton_release : app.vers_ecran(\"ecran2\")\n\n&lt;Screen2> :\n\tname : \"ecran2\"\n\n\tMDBoxLayout :\n\t\torientation : \"vertical\"\n\t\tpadding : 20\n\t\tspacing : 20\n\n\t\tMDLabel : \n\t\t\ttext: \"\u00c9cran 2\"\n\t\t\thalign : \"center\"\n\t\t\tfont_style : \"H6\"\n\t\t\tmd_bg_color : (0,1,1,0.5)\n\t\t\tsize_hint_y : 0.5\n\t\tMDFloatLayout :\n\t\t\tMDRaisedButton :\n\t\t\t\ttext : \"Aller sur \u00c9cran 1\"\n\t\t\t\tpos_hint : {\"center_x\" : 0.5,\"center_y\" : 0.5}\n\t\t\t\ton_release : app.vers_ecran(\"ecran1\")\n\nScreen : \n\tScreenManager:\n\t\tid: screen_manager\n\n\t\tScreen1 :\n\n\t\tScreen2 :<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Un exemple plus complet : utilisation de MDNavigationLayout et de MDNavigationDrawer<\/h3>\n\n\n\n<p>Cet exemple peut servir de base pour un vrai projet. <\/p>\n\n\n\n<p>Les deux fichiers principaux sont encore builder.py et design.kv.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les sources des exemples sont disponibles ici. Le principe Kivy ne travaille qu&rsquo;avec une seule fen\u00eatre. Dans celle-ci, on peut mettre un ou plusieurs composants \u00ab\u00a0Screen\u00a0\u00bb. On peut ainsi en&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3188,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3206","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Kivy et le ScreenManager - Maths &amp; Num\u00e9rique<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Kivy et le ScreenManager - Maths &amp; Num\u00e9rique\" \/>\n<meta property=\"og:description\" content=\"Les sources des exemples sont disponibles ici. Le principe Kivy ne travaille qu&rsquo;avec une seule fen\u00eatre. Dans celle-ci, on peut mettre un ou plusieurs composants \u00ab\u00a0Screen\u00a0\u00bb. On peut ainsi en&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/\" \/>\n<meta property=\"og:site_name\" content=\"Maths &amp; Num\u00e9rique\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-27T21:40:00+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/\",\"url\":\"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/\",\"name\":\"Kivy et le ScreenManager - Maths &amp; Num\u00e9rique\",\"isPartOf\":{\"@id\":\"https:\/\/wordpress.callac.online\/#website\"},\"datePublished\":\"2022-01-25T20:24:42+00:00\",\"dateModified\":\"2022-01-27T21:40:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/wordpress.callac.online\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Python\",\"item\":\"https:\/\/wordpress.callac.online\/index.php\/python\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Des interfaces graphiques avec Kivy\",\"item\":\"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Kivy et le ScreenManager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wordpress.callac.online\/#website\",\"url\":\"https:\/\/wordpress.callac.online\/\",\"name\":\"Maths & Num\u00e9rique\",\"description\":\"Des outils pour les enseignants de math\u00e9matiques et de num\u00e9rique\",\"publisher\":{\"@id\":\"https:\/\/wordpress.callac.online\/#\/schema\/person\/04061f1ca2c2c42039142a704be95940\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wordpress.callac.online\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/wordpress.callac.online\/#\/schema\/person\/04061f1ca2c2c42039142a704be95940\",\"name\":\"dlefur\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/wordpress.callac.online\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4a9e17be136808c6597f28aa2b6c13126dab066fdc2198ff60090972c9b7fafc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4a9e17be136808c6597f28aa2b6c13126dab066fdc2198ff60090972c9b7fafc?s=96&d=mm&r=g\",\"caption\":\"dlefur\"},\"logo\":{\"@id\":\"https:\/\/wordpress.callac.online\/#\/schema\/person\/image\/\"},\"description\":\"Enseignant de math\u00e9matiques Lyc\u00e9e Pasteur S\u00e3o Paulo\",\"sameAs\":[\"http:\/\/wordpress.callac.online\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Kivy et le ScreenManager - Maths &amp; Num\u00e9rique","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/","og_locale":"fr_FR","og_type":"article","og_title":"Kivy et le ScreenManager - Maths &amp; Num\u00e9rique","og_description":"Les sources des exemples sont disponibles ici. Le principe Kivy ne travaille qu&rsquo;avec une seule fen\u00eatre. Dans celle-ci, on peut mettre un ou plusieurs composants \u00ab\u00a0Screen\u00a0\u00bb. On peut ainsi en&hellip;","og_url":"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/","og_site_name":"Maths &amp; Num\u00e9rique","article_modified_time":"2022-01-27T21:40:00+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/","url":"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/","name":"Kivy et le ScreenManager - Maths &amp; Num\u00e9rique","isPartOf":{"@id":"https:\/\/wordpress.callac.online\/#website"},"datePublished":"2022-01-25T20:24:42+00:00","dateModified":"2022-01-27T21:40:00+00:00","breadcrumb":{"@id":"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/kivy-et-le-screenmanager\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/wordpress.callac.online\/"},{"@type":"ListItem","position":2,"name":"Python","item":"https:\/\/wordpress.callac.online\/index.php\/python\/"},{"@type":"ListItem","position":3,"name":"Des interfaces graphiques avec Kivy","item":"https:\/\/wordpress.callac.online\/index.php\/python\/des-interfaces-graphiques-avec-kivy\/"},{"@type":"ListItem","position":4,"name":"Kivy et le ScreenManager"}]},{"@type":"WebSite","@id":"https:\/\/wordpress.callac.online\/#website","url":"https:\/\/wordpress.callac.online\/","name":"Maths & Num\u00e9rique","description":"Des outils pour les enseignants de math\u00e9matiques et de num\u00e9rique","publisher":{"@id":"https:\/\/wordpress.callac.online\/#\/schema\/person\/04061f1ca2c2c42039142a704be95940"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wordpress.callac.online\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":["Person","Organization"],"@id":"https:\/\/wordpress.callac.online\/#\/schema\/person\/04061f1ca2c2c42039142a704be95940","name":"dlefur","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/wordpress.callac.online\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4a9e17be136808c6597f28aa2b6c13126dab066fdc2198ff60090972c9b7fafc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4a9e17be136808c6597f28aa2b6c13126dab066fdc2198ff60090972c9b7fafc?s=96&d=mm&r=g","caption":"dlefur"},"logo":{"@id":"https:\/\/wordpress.callac.online\/#\/schema\/person\/image\/"},"description":"Enseignant de math\u00e9matiques Lyc\u00e9e Pasteur S\u00e3o Paulo","sameAs":["http:\/\/wordpress.callac.online"]}]}},"_links":{"self":[{"href":"https:\/\/wordpress.callac.online\/index.php\/wp-json\/wp\/v2\/pages\/3206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.callac.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wordpress.callac.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.callac.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.callac.online\/index.php\/wp-json\/wp\/v2\/comments?post=3206"}],"version-history":[{"count":7,"href":"https:\/\/wordpress.callac.online\/index.php\/wp-json\/wp\/v2\/pages\/3206\/revisions"}],"predecessor-version":[{"id":3232,"href":"https:\/\/wordpress.callac.online\/index.php\/wp-json\/wp\/v2\/pages\/3206\/revisions\/3232"}],"up":[{"embeddable":true,"href":"https:\/\/wordpress.callac.online\/index.php\/wp-json\/wp\/v2\/pages\/3188"}],"wp:attachment":[{"href":"https:\/\/wordpress.callac.online\/index.php\/wp-json\/wp\/v2\/media?parent=3206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}