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.