【kivy screenmanager】CardTransition 使用效果及語法｜Kivy基礎用法

本篇開始:

• 我的開發環境是win11
• Python是3.10.7版本
• 編碼的工具是Visual Studio Code(VS Code)

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

在VScode開啟Python檔案，取名為main.py，以下簡稱.py

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

Window.size = (290,550)

class FirstPage(Screen):
    pass

class SecondPage(Screen):
    pass

class Manager(ScreenManager):
    tra = ObjectProperty(CardTransition())

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、CardTransition類別

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

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

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

7.在Manager類別裡面，創建變數tra，使其為ObjectProperty類，並繼承CardTransition類，代表現在screen切換模式為CardTransition

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

▲main.py程式碼

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

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

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

3.加入main.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: 'back to firstpage'
            on_release: root.manager.current = 'firstpage'   

<Manager>
    transition: root.tra
    FirstPage:
    SecondPage:

▲說明:

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

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

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

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

5.在<Manager>裡面加入transition、FirstPage 以及SecondPage6.並使transition參數等於根物件(也就是Manager類別)tra變數

▲main.kv程式碼

4.執行 Python檔案

請點擊網址觀看影片1:

https://drive.google.com/drive/folders/1F_KJX0fnG9umv9N3w_REizFOqSu4J492?usp=sharing

▲如影片1:新畫面以(預設)push堆疊進入、(預設)轉換方向向左、(預設)轉換時間不到1秒

5.改變轉換時間及方向設定(向右)

以下.py程式碼:

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

Window.size = (290,550)

class FirstPage(Screen):
    pass

class SecondPage(Screen):
    pass

class Manager(ScreenManager):
    # 這邊更改，加入duration 及 direction參數
    tra = ObjectProperty(CardTransition(duration=3, direction='right'))

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

▲main.py程式碼

【說明】加入duration 及 direction參數，轉換時間為3(s)，方向向右

請點擊網址觀看影片2:

https://drive.google.com/drive/folders/1F_KJX0fnG9umv9N3w_REizFOqSu4J492?usp=sharing

▲如影片2:向右堆疊，轉換時間3秒

6.改變方向設定(向上)

以下.py程式碼:

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

Window.size = (290,550)

class FirstPage(Screen):
    pass

class SecondPage(Screen):
    pass

class Manager(ScreenManager):
    # 這邊更改，加入duration 及 direction參數
    tra = ObjectProperty(CardTransition(duration=3, direction='up'))

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

▲說明:更改 direction參數，方向向上

▲更改的main.py程式碼

請點擊網址觀看影片3:

https://drive.google.com/drive/folders/1F_KJX0fnG9umv9N3w_REizFOqSu4J492?usp=sharing

▲如影片3:向"上"堆疊，轉換時間3秒

7.改變方向設定(向下)

以下.py程式碼:

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

Window.size = (290,550)

class FirstPage(Screen):
    pass

class SecondPage(Screen):
    pass

class Manager(ScreenManager):
    # 這邊更改，加入duration 及 direction參數
    tra = ObjectProperty(CardTransition(duration=3, direction='down'))

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

▲說明:更改 direction參數，方向向下

▲更改的main.py程式碼

請點擊網址觀看影片4:

https://drive.google.com/drive/folders/1F_KJX0fnG9umv9N3w_REizFOqSu4J492?usp=sharing

▲如影片4:向"下"堆疊，轉換時間3秒

8.改變模式(pop抽出)及方向設定(向左)

以下.py程式碼:

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

Window.size = (290,550)

class FirstPage(Screen):
    pass

class SecondPage(Screen):
    pass

class Manager(ScreenManager):
    # 這邊更改，加入duration 及 direction、 mode參數
    tra = ObjectProperty(CardTransition(duration=3, direction='left', mode='pop'))

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

▲說明:加入 mode參數，方向向左

▲更改的main.py程式碼

請點擊網址觀看影片5:

https://drive.google.com/drive/folders/1F_KJX0fnG9umv9N3w_REizFOqSu4J492?usp=sharing

▲如影片5:向"左"抽出，轉換時間3秒

9.改變方向設定(向右)

以下.py程式碼:

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

Window.size = (290,550)

class FirstPage(Screen):
    pass

class SecondPage(Screen):
    pass

class Manager(ScreenManager):
    # 這邊更改，加入duration 及 direction、 mode參數
    tra = ObjectProperty(CardTransition(duration=3, direction='right', mode='pop'))

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

▲說明:加入 mode參數，方向向右

▲更改的main.py程式碼

請點擊網址觀看影片6:

https://drive.google.com/drive/folders/1F_KJX0fnG9umv9N3w_REizFOqSu4J492?usp=sharing

▲如影片6:向"右"抽出，轉換時間3秒

10.改變方向設定(向上)

以下.py程式碼:

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

Window.size = (290,550)

class FirstPage(Screen):
    pass

class SecondPage(Screen):
    pass

class Manager(ScreenManager):
    # 這邊更改，加入duration 及 direction、 mode參數
    tra = ObjectProperty(CardTransition(duration=3, direction='up', mode='pop'))

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

▲說明:加入 mode參數，方向向上

▲說明:更改的main.py程式碼

請點擊網址觀看影片7:

https://drive.google.com/drive/folders/1F_KJX0fnG9umv9N3w_REizFOqSu4J492?usp=sharing

▲如影片7:向"上"抽出，轉換時間3秒

11.改變方向設定(向下)

以下.py程式碼:

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

Window.size = (290,550)

class FirstPage(Screen):
    pass

class SecondPage(Screen):
    pass

class Manager(ScreenManager):
    # 這邊更改，加入duration 及 direction、 mode參數
    tra = ObjectProperty(CardTransition(duration=3, direction='down', mode='pop'))

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

▲說明:加入 mode參數，方向向下

▲說明:更改的main.py程式碼

請點擊網址觀看影片8:

https://drive.google.com/drive/folders/1F_KJX0fnG9umv9N3w_REizFOqSu4J492?usp=sharing

▲如影片8:向"下"抽出，轉換時間3秒

本篇小結

了解CardTransition的基本語法，以卡片"堆疊"或"抽出"的方式轉換screen(畫面)，透過參數(duration 及 direction、 mode)可改變切換時間、方向及模式，來實現類似 Android切換方式。

本篇結束:

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