【python2】画面を切り替える【kivy】

kivy使い初めて最初に躓いた、ウィジェットの追加・削除について少しずつわかってきたのでメモ。
例えばゲームやってると、スタート画面で何かのボタンを押したときにゲーム画面に移行しますよね、あれのやり方です。



<main.py>

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout

class MenuWindow(FloatLayout):
    pass

class Menu1(FloatLayout):
    def clear_this(self):
        self.parent.add_widget(Menu2())
        self.parent.remove_widget(self)

class Menu2(FloatLayout):
    def clear_this(self):
        self.parent.add_widget(Menu3())
        self.parent.remove_widget(self.parent.children[1])

class Menu3(FloatLayout):
    def clear_this(self):
        self.parent.add_widget(Menu1())
        self.parent.remove_widget(self.parent.children[0])

class SampleApp(App):
    def build(self):
        root = FloatLayout()
        root.add_widget(Menu1())
        return root

if __name__ == '__main__':
    SampleApp().run()

<sample.kv>
<MenuWindow>:
    canvas:
        Color:
            rgb: self.parent.bgcolor
        Rectangle:
            size: self.size
   
    Label:
        text: self.parent.parent.message
        font_size: 40
        pos_hint: {'x': 0, 'y': .2}

    Button:
        text: 'back'
        size_hint: .1, .1
        pos_hint: {'x': .45, 'y': .45}
        on_release: self.parent.parent.clear_this()

<Menu1>:
    message: 'This is the window 1'
    bgcolor: (.7, 0, 0)
    MenuWindow:

<Menu2>:
    message: 'This is the window 2'
    bgcolor: (0, .7, 0)
    MenuWindow:

<Menu3>:
    message: 'This is the window 3'
    bgcolor: (0, 0, .7)
    MenuWindow:

ここでは3パターンの画面切り替え操作をMenu1〜3に当てはめています。
main.pyを最初に実行すると、rootの上にMenu1()が重ね書きされた状態で出現します。
ここで、Menu1のbackボタンを押すと、Menu1().clear_this()が呼び出されます。すると、

• Menu2()を、親ウィジェット（parent）に追加する
• 親ウィジェット内に含まれる自分自身（self）のウィジェットを削除する

が実行され、画面が切り替わります。Menu2でbackボタンを押すと、

• Menu3()を追加する
• 親ウィジェット内の、最後から2番目に追加されたウィジェット（つまり自分自身）を削除する

が実行され、画面が切り替わります。最後に、Menu3でbackボタンを押すと、

• Menu1()を追加する
• 親ウィジェット内の、最後に追加されたウィジェット（つまり今追加したMenu1）を削除する

が実行されます。つまり、結果的に何も起こりません。
ここで、Menu1とMenu2のclear_this()は同じことを別の方法で実行しています。
画面の切り替えはこのMenu1や2と同じ方法を使って行えます。つまり、

• 何も無いFloatLayout()をルートウィジェットとして設定する
• そこに最初のメニュー画面を追加する。
• 特定の画面切り替え操作を行うことで、新しいメニュー画面のウィジェットを追加しつつ、古いメニュー画面を削除する

ということです。