03【python kivy app 開發】canvas基本用法

本篇開始:

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

以我實際開發的APP為例，

我想做的是可以訓練基本加(減)法的心算工具。

1.在首頁內容加入綠色的背景

2.開始編寫countinmind.kv，在<Firstscreen>底下使用FloatLayout版面

2-1.加入帆布(canvas要小寫，語法要求):

2-2.設定顏色(Color字首大寫):

rgb為(117/255, 220/255, 141/255)

(rgb數值可以參考其他網站https://svc.011.idv.tw/CodeHelper/html/KeyWord/Color-%E4%B8%AD%E8%8B%B1%E6%96%87%E5%90%8D%E7%A8%B1.htm)

2-3.設定矩形(Rectangle字首大寫):

2-3.1矩形大小:self.size(這邊self代表視窗本身)

2-3.2矩形位置:self.pos(這邊self代表視窗本身)

以下本篇程式碼(.kv):

#: kivy 2.1.0

<Firstscreen>:    
    FloatLayout:
        canvas:          
            Color: 
                rgb: (117/255, 220/255, 141/255)
            Rectangle:
                size: self.size
                pos: self.pos

        Label:
            text:'123456'
            bold: True   
            font_size: 30
            color: 'black'
            pos_hint: {'center_x':0.5, 'center_y':0.9}            

<SM>:
    transition:

    Firstscreen:

▲可以看到我設定的帆布覆蓋著整個視窗，且在最下層。

3.本篇小結:

加入 canvas，並設定其顏色、大小以及位置。

本篇所使用程式碼(.py):請參考這篇內容，01.以Python和Kivy開發APP|Kivy-Window|調整APP視窗大小

本篇結束:

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