Menu courant

Kivy et le ScreenManager

Les sources des exemples sont disponibles ici.

Le principe

Kivy ne travaille qu’avec une seule fenêtre. Dans celle-ci, on peut mettre un ou plusieurs composants “Screen”.

On peut ainsi en mettre plusieurs les uns après les uns pour remplir la fenêtre, à la manière des “Layout”.

Mais on peut surtout les mettre les uns à la place des autres. Pour celà, on utilise un ou plusieurs composants “ScreenManager”.

Ainsi, le contenu d’un “ScreenManager” est une succession de “Screen” dont les noms devront être définie par l’attribut “name” (à ne pas confondre avec “id”).

L’attribut “current” du “ScreenManager” indique le nom du composant “Screen” courant. Il suffit donc de changer sa valeur pour basculer d’un écran à l’autre.

Un exemple basique : on basculer entre deux écrans ( Exemple04 )

– Builder.py

On y définit deux classes “Screen1” et “Screen2”, et la méthode “vers-ecran()” pour faire la bascule.

from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen

class Screen1(Screen) :
	pass

class Screen2(Screen) :
	pass


class MonAppli(MDApp):
	title = "Mon appli"
	#icon = "Images/icon.png" 

	def build(self):
		self.theme_cls.theme_style = "Light"
		self.theme_cls.primary_palette = "Teal"

		return Builder.load_file("design.kv")


	def vers_ecran(self,ecran):
		self.root.ids.screen_manager.current = ecran
		if ecran=="ecran1":
			self.root.ids.screen_manager.transition.direction = "right"	
		else :
			self.root.ids.screen_manager.transition.direction = "left"	


if __name__ == '__main__':
	MonAppli().run()
– design.kv

On commence par définir les deux écrans, avant les placer dans le ScreenManager.

Ne pas oublier de placer le ScreenManager dans un Screen.

<Screen1> :
	name : "ecran1"

	MDBoxLayout :
		orientation : "vertical"
		padding : 20
		spacing : 20

		MDLabel : 
			text: "Écran 1"
			halign : "center"
			font_style : "H6"
			md_bg_color : (1,1,0,0.5)
			size_hint_y : 0.5
		MDFloatLayout :
			MDRaisedButton :
				text : "Aller sur Écran 2"
				pos_hint : {"center_x" : 0.5,"center_y" : 0.5}
				on_release : app.vers_ecran("ecran2")

<Screen2> :
	name : "ecran2"

	MDBoxLayout :
		orientation : "vertical"
		padding : 20
		spacing : 20

		MDLabel : 
			text: "Écran 2"
			halign : "center"
			font_style : "H6"
			md_bg_color : (0,1,1,0.5)
			size_hint_y : 0.5
		MDFloatLayout :
			MDRaisedButton :
				text : "Aller sur Écran 1"
				pos_hint : {"center_x" : 0.5,"center_y" : 0.5}
				on_release : app.vers_ecran("ecran1")

Screen : 
	ScreenManager:
		id: screen_manager

		Screen1 :

		Screen2 :

Un exemple plus complet : utilisation de MDNavigationLayout et de MDNavigationDrawer

Cet exemple peut servir de base pour un vrai projet.

Les deux fichiers principaux sont encore builder.py et design.kv.