本篇開始:
- 我的開發環境是win11
- python是3.10.7版本
- kivy我設定在2.1.0版本
- 編碼的工具是Visual Studio Code(VS Code)
以我實際開發的APP為例，
我想做的是可以訓練基本加(減)法的心算工具。
命名app叫 「CountInMind」。
1.使用GridLayout版面，在.kv<Forthscreen >的BoxLayout下加入
以下.kv程式碼:
<Forthscreen>:
#為了精簡版面，中間程式碼省略，請參考第16篇
BoxLayout:
#為了精簡版面，中間程式碼省略，請參考第16篇
GridLayout:
rows: 5
cols: 3
▲說明:
1.GridLayout，是一種圖形版面
2.可由"行、列"圖形組成，我以 5x3圖形來組合計算機介面
2.加入Button物件(先嘗試加入3個物件看看效果)
以下.kv程式碼
GridLayout:
rows: 5
cols: 3
Button:
text: '7'
font_size: 30
size_hint: 0.2, 0.15
Button:
text: '8'
font_size: 30
size_hint: 0.2, 0.15
Button:
text: '9'
font_size: 30
size_hint: 0.2, 0.15
▲說明:
1.GridLayout版面，會先從"行"開始先排列
2.雖然有寫5x3行列，但不會預設空的，是將有的物件依序排列進去
3.size_hint: 0.2, 0.15，大小我先設定這樣，物件(單元格)大小有設定規則，這邊就不做細節說明
▲說明:只出現3行，如果再多寫幾個物件，會依序排入，如下圖
3.依照上述原則加入其他功能Button(清除鍵、正負鍵)
以下.kv程式碼
GridLayout:
rows: 5
cols: 3
# 為精簡篇幅，中間其他程式碼省略
Button:
text: '0'
font_size: 30
size_hint: 0.2, 0.15
Button:
text: 'C'
font_size: 30
size_hint: 0.2, 0.15
Button:
text: '+/–'
font_size: 30
size_hint: 0.2, 0.15
▲說明:再加入一些功能(如開始鍵、提交鍵、結算鍵)，這邊程式碼跟前面有講過重複，就留給讀者發揮
▲說明:到這邊app的第四頁操作介面已經有雛型了，已經有計算機的樣子，接下來章節就要進入重點，也就是加入觸發的功能
4.接下來把要調用的顏色屬性寫進去
以下.py程式碼
class Forthscreen(Screen):
back_text_color = Firstscreen.text_color
text_color = ColorProperty('white')
number_btn_bgcolor = ColorProperty([255/255, 252/255, 221/255]) # 淺咖色
other_btn_bgcolor = ColorProperty([237/255, 171/255, 169/255]) # 駝色
再來修正上面的.kv
以下.kv程式碼
# 這邊我僅列舉兩個來呈現，其他就省略版面
Button:
text: '7'
font_size: 30
color: root.text_color
background_color: root.number_btn_bgcolor
size_hint: 0.2, 0.15
Button:
text: '+/–'
font_size: 30
color: root.text_color
background_color: root.number_btn_bgcolor
size_hint: 0.2, 0.15
▲說明:數字鍵的顏色好像跟預設的差不多==，讀者改成自己喜歡的顏色吧
5.本篇小結
加入GridLayout版面，搭配Button物件，在第4頁生成類似計算機的介面。
為精簡篇幅，本篇所使用完整(.py)(.kv)程式碼，請參考第9~16篇內容
本篇結束:
在自學路上遇到困難是很正常的事，只要堅持到底，相信就會有所成果，期勉大家一同努力。
