本篇開始:
- 我的開發環境是win11
- python是3.10.7版本
- kivy我設定在2.1.0版本
- 編碼的工具是Visual Studio Code(VS Code)
【本篇說明】今天要來介紹的是 RoundedButton，基本使用語法跟 Button是差不多的，還不知道的話，可以先參考這篇:【kivy Button】經常使用的Button(按鈕)語法。RoundedButton顧名思義，就是一個「圓角按鈕」
首先在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變得更不一樣。
本篇結束:
在自學路上遇到困難是很正常的事，只要堅持到底，相信就會有所成果，期勉大家一同努力。
