【kivy RoundedButton】Button也可以改變形狀，使用 RoundedButton｜Kivy基礎用法

本篇開始:

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

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

以下.py程式碼:(在vscode開啟python檔案，取名為main.py，以下簡稱.py)

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout

class firstlayout(FloatLayout):
    pass

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

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

▲說明:這邊 kivy language(kv)，我使用的是"相同命名方式"，如果不太懂我說的，可參考這篇:【kivy language】如何使用 kivy language(kv)。

▲說明:main.py程式碼

在vscode新增 kivy檔案，我取名 main.kv，並且放在同資料夾內

▲說明:我的是放在以下路徑:桌面-> python-> Kivy-> test

這邊先加入 Button基本內容

以下.kv程式碼:(在vscode編輯main.kv，以下簡稱.kv)

Button:
        text:'green light'
        font_size: 20
        bold: True
        color: 'green'
        size_hint: .2, .2
        pos: 220, 50
        background_normal: ''
        background_color: 'lightgreen'
Button:
        text:'yellow light'
        font_size: 20
        bold: True
        color: 'yellow'
        size_hint: .2, .2
        pos: 400, 50
        background_normal: ''
        background_color: 'lightyellow'
Button:
        text:'red light'
        font_size: 20
        bold: True
        color: 'red'
        size_hint: .2, .2
        pos: 620, 50
        background_normal: ''
        background_color: 'pink'

▲說明:先使用3個 Button來展示

▲說明:main.kv程式碼

▲說明:執行python檔案，3個 Button預設形狀是矩形的

加入 RoundedButton基本內容

在 Button部件下面加入以下程式碼，且要注意要與<firstlayout>類別同階層，這樣才不會無效宣告

以下.kv程式碼:

<RoundedButton@Button>
    background_normal: ''
    background_color: (0,0,0,0)
    canvas.before:
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius: [38]

▲說明:

1.宣告類別<RoundedButton@Button>

2.background_normal這兩段除了改變背景顏色外，最重要的是讓下面邊角產生改變，請務必加入這兩段，否則無效

3.這邊使用canvas.before部件，如果不太清楚可以先看這篇:【kivy canvas】canvas.before 基本使用時機

4.RoundedRectangle:來製造有圓角的矩形

5.size、pos:等於部件本身的大小、位置

6.radius:用半徑為38像素(pixel)將邊角改成圓角，半徑越高會越趨近於橢圓形或圓形

7.【補充】我只將第三個 Button改成 RoundedButton來比較看看

▲說明:main.kv程式碼

▲說明:執行python檔案，發現沒什麼改變

仔細看會發現 RoundedButton部件裡面已經使用 background_normal: ''，因此會影響<RoundedButton@Button> 裡面背景顏色的效果

改成以下.kv程式碼:(只需要把background_normal那兩段刪掉即可)

RoundedButton:
        text:'red light'
        font_size: 20
        bold: True
        color: 'red'
        size_hint: .2, .2
        pos: 620, 50
        

執行python檔案

▲說明:邊角形狀改變了，變成圓角了

【最後補充】

1.使用 RoundedButton雖然可以改成帶有圓角的矩形，但預設 Button部件按下去會有反色的效果就被 canvas.before覆蓋掉了

2.canvas.before如果改成 canvas的話，會發現 RoundedButton的文字會被覆蓋

3.如果這時想要改變 RoundedButton的背景顏色，可在 canvas.before裡面加入 Color屬性

4.radius:半徑越高會越趨近於橢圓形或圓形

以下.kv程式碼:(針對上面3.4項做展示)

<RoundedButton@Button>
    background_normal: ''
    background_color: (0,0,0,0)
    canvas.before:
        Color:
            rgb:(.1,.1,.9)
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius: [150]

▲說明:main.kv程式碼

本篇小結

使用 RoundedButton，讓原先 Button變得更不一樣。

本篇結束:

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