【kivy screen】Screen 和 ScreenManager的語法｜Kivy基礎用法

本篇開始:

• 我的開發環境是win11
• python是3.10.7版本
• kivy我設定在2.1.0版本
• 編碼的工具是Visual Studio Code(VS Code)

先在main.py主程式寫下程式碼

以下.py程式碼:(在vscode開啟python檔案，取名為main.py，以下簡稱.py)

from kivy.app import App
from kivy.core.window import Window
from kivy.uix.screenmanager import Screen, ScreenManager

Window.size = (290,550)

class FirstPage(Screen):
    pass

class SecondPage(Screen):
    pass

class Manager(ScreenManager):
    pass

class main(App):
    def build(self):
        return Manager()
    
if __name__ == "__main__":
    main().run()

▲說明:

1.從kivy.app模組，導入App類別

2.從kivy.core.window模組，導入Window類別

3.從kivy.uix.screenmanager模組，導入Screen、ScreenManager類別

4.設定畫面大小為 (290,550)，可參考:【kivy window】視窗大小原來可以自己決定!

5.定義FirstPage、SecondPage類，使其繼承Screen類別的屬性及方法(函式)

6.定義Manager類，使其繼承ScreenManager類別的屬性及方法(函式)

7.定義main類，使其繼承App類，創建build函式，並回傳Manager類別內容

▲說明:main.py程式碼

在VSCode新增(kivy)檔案，取名 main.kv

kivy language，我使用的是"相同命名方式"，如果不太懂我說的，可參考:【kivy language】如何使用 kivy language(kv)。

▲說明:我的是放在以下路徑:桌面-> python-> Kivy-> test

加入main.kv內容

以下.kv程式碼:(在vscode編輯kivy檔案，取名為main.kv，以下簡稱.kv)

<FirstPage>:
    name: 'firstpage'

    BoxLayout:
        Button:
            text: 'go to secondpage'
            on_release: root.manager.current = 'secondpage' 
    
<SecondPage>:
    name: 'secondpage'

    BoxLayout:
        Button:
            text: 'go to firstpage'
            on_release: root.manager.current = 'firstpage'   

<Manager>
    FirstPage:
    SecondPage:

▲說明:

1.在<firstpage>裡面加入 name參數，並使其等於 'firstpage'

2.加入Button物件，使用觸發函式on_release，並呼叫 manager.current函式，用來決定目前呈現的secondpage，可參考:【kivy Button】經常使用的Button(按鈕)語法

3.在<SecondPage>裡面加入 name參數，並使其等於 'secondpage'

4.加入Button物件，使用觸發函式on_release，並呼叫 manager.current函式，用來決定目前呈現的firstpage

5.記得最後在<Manager>裡面加入FirstPage: 以及SecondPage:

▲說明:main.kv程式碼

執行 Python檔案

▲說明:這是firstpage的畫面，按下Button後會進入secondpage

▲說明:這是secondpage的畫面，若再按下Button後會再切換到firstpage

本篇小結

透過Screen 以及 ScreenManager的基本使用，可以讓screen(畫面、頁面)轉換更多元。

本篇結束:

在自學路上遇到困難是很正常的事，只要堅持到底，相信就會有所成果，期勉大家一同努力。