17.學習Kivy|加入GridLayout版面，生成類似計算機的介面

本篇開始:

• 我的開發環境是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篇內容

本篇結束:

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