【kivy Button】經常使用的Button(按鈕)語法｜Kivy基礎用法

本篇開始:

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

【本篇說明】在kivy裡面，提供各種物件(widget)用來建構使用者介面(UI)，比如Label、Button、Textinput、CheckBox等，今天要講的Button(或中文稱為"按鈕")是很常用的物件(widget)之一，今天就來分享幾個基本常用的語法。

首先在main.py寫下固定的程式碼

from kivy.app import App
from kivy.core.window import Window
from kivy.uix.floatlayout import FloatLayout

print(Window.size)

class firstlayout(FloatLayout):
    pass
class Mainapp(App):
    def build(self):
        return firstlayout()

if __name__ == "__main__":
    Mainapp().run()

▲說明:

1.導入固定類別外，還須從kivy.uix.floatlayout模組導入FloatLayout類別。

2.創建類別firstlayout，使其繼承FloatLayout類別特性，也可以使待會的 main.kv中的<firstlayout>可以沿用特性

3.創建類別Mainapp，使其繼承App類別特性。其中這個"Main"的命名務必與 "main".kv 一樣(大小寫不拘)，不然無法呼叫 main.kv中的<firstlayout>

▲說明:main.py程式碼

加入Button text內容

以下.kv程式碼:(在vscode編輯或開啟kivy檔案，取名為main.kv，以下簡稱.kv)

Button:
        text:'Welcome to my app !'
        font_size: 20
        bold: True
        color: 'white'

▲說明:

1.text:'為顯示內容'

2.font_size:決定字體大小

3.bold:加入粗體效果

4.color:'指定字體顏色'

改變Button 大小，使用size或size_hint參數

以下.kv程式碼:(先使用size參數)

Button:
        size_hint: None, None
        size: 500, 500

▲說明:

1.size參數為絕對大小，使用語法為 size: x, y (x為水平大小、y為垂直大小)

2.使用size參數時，需加入這段size_hint: None, None，否則會無效

3.設定大小，使x=500、y=500

▲說明:從終端機看到，預設視窗大小為(1000,750)【視窗調整可參考這篇】，這邊用size: 500, 500

以下.kv程式碼:(使用size_hint參數)

Button:
        size_hint: {'x':0.3, 'y':0.3}   

【說明】

1.size_hint參數為"相對"大小，也就是以視窗大小為基準去做比例大小

2.使用語法為 size_hint:{'x':0.a, 'y':0.b}，也可以寫成 size_hint:{'x':.a, 'y':.b}，x為物件水平大小、y為物件垂直大小，這邊 0.a 意思為 0.a視窗水平大小，0.b 意思為 0.b視窗垂直大小

3.上述也可簡化寫成為 size_hint:0.3, 0.3，也可以改成 size_hint:.3, .3，通常我都是這樣寫法，也就是說物件(Button)大小為0.3視窗水平大小、0.3視窗垂直大小

改變Button 位置，使用pos或 pos_hint參數

以下.kv程式碼:(使用pos參數)

Button:
    pos: 300, 0
    

▲說明:

1.以視窗左下角為原點起算，物件也是以左下角為基準點起算

2.pos參數為絕對位置，使用語法為 pos: x, y (x為水平距離、y為垂直距離，可以用x、y座標來看比較好懂)

3.設定位置，使x=300、y=0

▲說明:預設視窗大小為(1000,750)，這邊用pos: 300, 0

以下.kv程式碼:(使用pos_hint參數)

Button:
    pos_hint:{'x':0.3, 'y':0.3}

▲說明:

1.以視窗左下角為原點起算，物件也是以左下角為基準點起算

2.pos_hint參數為相對位置，使用語法為 pos_hint:{'x':0.a, 'y':0.b}，x為物件水平位置、y為物件垂直位置，這邊 0.a 意思為 0.a*視窗水平大小，0.b 意思為 0.b*視窗垂直大小

3.上述也可簡化寫成為 pos_hint:{'x':.3, 'y':.3}，也就是說物件(Button)左下角位置在0.3視窗水平大小、0.3視窗垂直大小

另一種也常用語法 pos_hint:{'center_x':0.a, 'center_y':0.b}

以下.kv程式碼:

Button:
	pos_hint:{'center_x':0.5, 'center_y':0.3}

▲說明:

1.是以水平及垂直"中心"為基準點起算，也就是說以物件重心位置為基準

2.center_x為物件水平中心位置、center_y為物件垂直中心位置，這邊 0.a 意思為 0.a視窗水平大小，0.b 意思為 0.b視窗垂直大小

3.上述也可簡化寫成為 pos_hint:{'center_x':.5, 'center_y':.3}，也就是說物件(Button)水平位置在0.5視窗水平大小，垂直位置在0.3視窗垂直大小

改變Button 背景顏色

以下.kv程式碼:

background_normal: ''
background_color: 'lightyellow'

▲說明:

1.background_normal: ''，這行為必須指令，否則無法更換按鈕背景顏色

2.background_color: '顏色名稱'，也可以用rgb或rgba來填入

綜合測試，執行Python檔案

▲說明:使用兩個Button物件，可比較一下兩種大小及位置使用上的差異，並加入更換按鈕背景顏色

▲說明:上面完整.kv程式碼

【補充】觸發使用 on_release

【說明】當點擊 Button(按鈕)按下(放開)時觸發的事件。這邊實作一個紅綠燈警示標語的例子，來展示 Button 觸發效果

加入以下.py主要程式碼:

class firstlayout(FloatLayout):
    a1 = ObjectProperty()
    def traffic_light(self, color):
        print(color)
        if color == 'red':
            self.a1.color = color
            self.a1.text = 'Stop!!!'
        elif color == 'yellow':
            self.a1.color = color
            self.a1.text = 'Watch Out!!!'
        elif color == 'green':
            self.a1.color = color
            self.a1.text = 'GoGoGo!!!'

▲說明:程式碼有關屬性部分，其他篇章再來介紹

▲說明:上面完整.py程式碼

加入以下.kv程式碼:

<firstlayout>:
    a1:b1

    Button:
        text:'green light'
        font_size: 20
        bold: True
        color: 'green'
        size_hint: .2, .2
        pos: 200, 50
        background_normal: ''
        background_color: 'lightgreen'
        on_release: root.traffic_light('green')

    Button:
        text:'yellow light'
        font_size: 20
        bold: True
        color: 'yellow'
        size_hint: .2, .2
        pos: 400, 50
        background_normal: ''
        background_color: 'lightyellow'
        on_release: root.traffic_light('yellow')

    Button:
        text:'red light'
        font_size: 20
        bold: True
        color: 'red'
        size_hint: .2, .2
        pos: 600, 50
        background_normal: ''
        background_color: 'pink'
        on_release: root.traffic_light('red')

    Label:
        id: b1 
        text:''
        font_size: 50
        bold: True
        color: 'white'
        size_hint: .3, .3
        pos_hint: {'center_x':.5, 'center_y':.7}

▲說明:

1.以上使用3個 Button以及1個 Label來展示

2.當放開 Button時，呼叫main.py檔案中firstlayout類別的方法traffic_light()

3.同時將顏色字串帶入，透過if判斷句，選擇對應的字體顏色及警示標語，最後顯示在 Label

▲放開第1個 Button，顯示"GoGoGo!!!"

▲放開第2個 Button，顯示"Watch Out!!!"

▲放開第3個 Button，顯示"Stop!!!"

本篇小結

Button經常用法就這些!其實跟Label用法有很多相同之處，可以參考這篇(【kivy Label】經常使用的Label(標籤)語法)來互相對照一下。

本篇結束:

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