本篇開始:
- 我的開發環境是win11
- python是3.10.7版本
- kivy我設定在2.1.0版本
- 編碼的工具是Visual Studio Code(VS Code)
【本篇說明】在kivy裡面，還有一些部件可用來建構使用者介面(UI)，比如 canvas、canvas.before、DegreeButton等，這次要講的是 canvas.before，它的語法跟 canvas是相同，可以參考這篇:【kivy canvas】canvas(帆布) 基本使用語法，但是它的使用時機卻是有別於 canvas!
1.首先在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程式碼
2.新增 kivy檔案，取名 main.kv，並且放在同資料夾內
3.這邊延續上一篇，先加入 canvas基本內容
以下.kv程式碼:(在vscode編輯main.kv，以下簡稱.kv)
canvas:
Color:
rgb: (117/255, 220/255, 141/255)
Rectangle:
size: self.size
pos: self.pos
▲說明:
1.canvas 字首'c'是小寫，主要分成兩種屬性(顏色及形狀)
2.Color 字首'C'是大寫，rgb: 顏色代碼
3.Rectangle 字首'R'是大寫，主要分成兩種屬性(大小及位置)
4.size:self.size，代表視窗本身大小
5.pos:self.pos，代表視窗本身位置
▲說明:main.kv程式碼
▲說明:執行python檔案，發現canvas佈滿整個視窗範圍
4.接下來本篇情境說明: 想要加入一段 Label文字，然後在文字底下使用 canvas凸顯文字
加入以下.kv程式碼:(首先是 Label部件內容)
Label:
text:'Welcome to my app!'
font_size: 30
bold: True
color: 'white'
size_hint: .3, .3
pos_hint: {'center_x':.5, 'center_y':.7}
加入以下.kv程式碼:(再來是 canvas內容)
canvas:
Color:
rgb: (0.1, 0.2, 0.3)
Rectangle:
size: 300, 200
pos: 350, 420
▲說明:
1.rgb: 使用小數來表示深藍色碼
2.size:大小為(300, 200)
3.pos:位置在(350, 420)
▲說明:main.kv程式碼
這時執行python檔案，會出現錯誤訊息: canvas的加入必須在子部件(Label)之前宣告
5.修正.kv程式碼的順序
▲說明:修正後的 main.kv程式碼
再一次執行python檔案，雖然可以正常執行，但原本的 canvas被覆蓋掉了
▲說明:部件的宣告有先後順序，後面宣告的 canvas(深藍)覆蓋掉前面的 canvas(亮綠)，這個時候就該使用 canvas.before
6.加入 canvas.before
為了避免前面兩種情形發生，這邊分享兩種宣告的時機(方式):
1.改成在 Label部件裡面宣告
以下.kv程式碼:
canvas.before:
Color:
rgb: (0.1, 0.2, 0.3)
Rectangle:
size: 300, 200
pos: 350, 420
▲說明:修正後的 main.kv程式碼
2.也可以直接將第1個 canvas部件改成 canvas.before來宣告
7.執行python檔案
▲說明:前面的canvas(亮綠)沒有被覆蓋掉，這才是canvas.before 正常的呈現效果
本篇小結
經過以上宣告時機，可以發現 canvas.before的效果， 是在原有部件加入下一層的 canvas部件，增加層次感。
本篇結束:
在自學路上遇到困難是很正常的事，只要堅持到底，相信就會有所成果，期勉大家一同努力。
