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.