本篇開始:
- 我的開發環境是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篇內容
本篇結束:
在自學路上遇到困難是很正常的事，只要堅持到底，相信就會有所成果，期勉大家一同努力。
