06.以Python和Kivy開發APP|Kivy-Label|Label內加入canvas.before(帆布背景)

本篇開始:

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

以我實際開發的APP為例，

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

命名app叫 「CountInMind」。

前言:

繼續製作app首頁，編寫countinmind.kv，在底下使用FloatLayout版面。

1.在 Label內增加canvas來凸顯說明文字

請參照03篇來新增canvas，03.以Python和Kivy開發APP|Kivy-canvas|設定canvas(帆布、背景)大小、顏色、位置

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

3.設定顏色(Color字首大寫)

使用白色背景框 (rgb數值可以參考其他網站說明)

4.設定矩形(Rectangle字首大寫)

4-1.矩形大小

self.width0.9(寬度為視窗寬的0.9倍)、self.height0.3(長度為視窗長的0.3倍)

4-2.矩形位置

self.width0.05(橫軸位置在視窗寬的0.05倍)、self.height0.3(縱軸位置在視窗長的0.5倍)

以下程式碼(.kv):

canvas:        
                Color: 
                    rgb: (255/255, 255/255, 255/255)
                Rectangle:    
                    size: self.width*0.9, self.height*0.3   
                    pos:  self.width*0.05, self.height*0.5

▲矩形位置是以左下角為原點起算。有沒有發現原本的說明文字不見了!

5.使用 canvas屬性before調整順序:將 canvas移至 text文字底下

6.以下為本篇完整程式碼(.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:'歡迎使用心算高手'
            font_name: './font/TW-Kai-98_1.ttf'
            bold: True   
            font_size: 30
            color: 'black'
            pos_hint: {'center_x':0.5, 'center_y':0.9}

        Label:
            text: '作品說明:...abcdef...123456789**++--//'
            text_size: 230, 250
            valign: 'center'
            font_name: './font/TW-Kai-98_1.ttf'
            font_size: 23
            color: (30/255, 30/255, 30/255)   # 'white'
            pos_hint: {'center_x':0.5, 'center_y':0.65}
            canvas.before:         
                Color: 
                    rgb: (255/255, 255/255, 255/255)
                Rectangle:    
                    size: self.width*0.9, self.height*0.3   
                    pos:  self.width*0.05, self.height*0.5
            
<SM>:
    transition:

    Firstscreen:

▲有點像在ppt移至下一層概念

7.本篇小結

加入 canvas.before，使 Label有個白色底框來凸顯文字說明。

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

本篇結束:

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