15.學習Kivy:加入RoundedButton及screenmanager切換畫面方式

本篇開始:

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

以我實際開發的APP為例，

我想做的是可以訓練基本加(減)法的心算工具。

命名app叫 「CountInMind」。

1.這篇要說明screenmanager切換畫面方式，目前還在app第3頁，延續上篇，繼續編輯countinmind.kv，在<Thirdscreen>下 FloatLayout版面，加入RoundedButton功能

☆目的:建立另一個不同形狀 Button，有別於之前所分享的 DegreeButton(不過語法及功能相似)

以下為.kv程式碼:

RoundedButton:
            text: '進入測驗畫面'
            font_name: './font/TW-Kai-98_1.ttf'
            font_size:28
            color: root.text_color
            size_hint: 0.6, 0.25
            pos_hint: {'center_x':0.5, 'center_y':0.3}
            on_release: root.manager.current = 'forth'
#這邊沒有縮排(也就是沒有 tab鍵)
<RoundedButton@Button>
    background_normal: ''
    background_color: (0,0,0,0)
    canvas.before:
        Color:
            rgb: (252/255, 236/255, 231/255)
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius: [38]

▲說明:以上 RoundedButton的語法，可參考第10篇內容。

☆補充:若要說跟 DegreeButton哪邊不同?我認為 DegreeButton:可調整弧度變成橢圓或圓形，RoundedButton:四個角弧度變圓。

2.透過screenmanager執行畫面切換方式(舉例我有使用的兩種，還有其他轉換方式，可參考其他網頁介紹)

2-1.NoTransition:無轉換效果

以下.py程式碼

要先在前面導入 NoTransition類別

#要先在前面導入 NoTransition類別
from kivy.uix.screenmanager import Screen, ScreenManager, NoTransition
class SM(ScreenManager):
    #設立a1物件，使其 duration=1，代表轉換時間為1秒
    a1 = ObjectProperty(NoTransition(duration=1))

以下.kv程式碼

<SM>:
    #新增根物件的a1物件(變數)
    transition:root.a1

▲說明:因為無轉換效果無法截圖表示，這邊就請讀者自行測試

2-2.SlideTransition:滑行轉換畫面

以下.py程式碼

#要先在前面導入 SlideTransition類別
from kivy.uix.screenmanager import Screen, ScreenManager, NoTransition, SlideTransition
class SM(ScreenManager):
    #設立a2物件，使其 duration=3、direction = 'right'，代表轉換時間為3秒、方向為向右滑行
    a2 = ObjectProperty(SlideTransition(duration=3, direction = 'right'))

以下.kv程式碼

<SM>:
    #改成用根物件的a2物件(變數)
    transition:root.a2

▲說明:第1頁切換至第2頁進行中

▲說明:第2頁切換至第3頁進行中

▲▲▲說明:預設是使用 SlideTransition(direction = 'left')，也可以改變秒數以及方向('up'.'down'等)

3.本篇小結

加入RoundedButton功能及screenmanager切換畫面方式(NoTransition、SlideTransition)。

☆為精簡篇幅，本篇所使用完整(.py)(.kv)程式碼，請參考第9~14篇內容

本篇結束:

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