11【python kivy app 開發】導入ColorProperty，定義類別(顏色)變數

艾肯比

2025/03/28 更新2024/12/18 發佈閱讀 6 分鐘

本篇開始:

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

以我實際開發的APP為例，

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

命名app叫「CountInMind」。

前言:

製作app第2頁:繼續編寫countinmind.kv，在<Secondscreen>底下使用FloatLayout版面

1.接續上一篇內容，這邊說明一下，在第2頁繼續使用DegreeButton加入’易"中"難’三種程度可選擇，如下圖

2.再來參考前幾篇語法，設計出第3頁內容，這樣就能點擊難易程度後進入下一頁

2-1.新增screen類別，第3頁取名叫 Thirdscreen，並繼承類別 Screen

以下程式碼(.py)

class Thirdscreen(Screen):

     pass

2-2.在.kv，新增<Thirdscreen>底下使用FloatLayout版面

以下程式碼(.kv)

<Thirdscreen>:
    name: 'third'
    FloatLayout:
        canvas:
            Color:
                rgb: (117/255, 220/255, 141/255)
            Rectangle:
                size: self.size
                pos: self.pos
        Label:
            text:'這是app第3頁'
            font_name: './font/TW-Kai-98_1.ttf'
            bold: True
            font_size: 23
            color: (30/255, 30/255, 30/255)
            pos_hint: {'center_x':0.5, 'center_y':0.9}
        Label:
            text: '© farloveway ; version: 1.0'
            font_size: 10
            color: (0,0,0)
            pos_hint:{'center_x':0.5, 'center_y':0.04}

▲說明:加入name屬性為’third’，並參考首頁加入canvas及Label

2-3.在.kv，<SM>:新增 Thirdscreen:


<SM>:
    transition:

    Firstscreen:

    Secondscreen:

    Thirdscreen:

▲說明:SM才能使用預設的"向左"轉換畫面，轉換方式後面文章再來介紹

3.調用類別中屬性(class property)

3-1.發現很多Label及Button color在.kv有太多重複，每當要改顏色就會覺得麻煩

3-2.建議把通用的color寫在class類別裡面，這樣就可以統一調用，但要先導入類別ColorProperty

以下程式碼(.py)

from kivy.properties import ColorProperty

3-3.如首頁，我在class Firstscreen下命名為text_color以及btn_bg_color兩種屬性

以下程式碼(.py)

class Firstscreen(Screen):
    # 設定顏色
    text_color = ColorProperty([30/255, 30/255, 30/255])  # 深灰
    btn_bg_color = ColorProperty([252/255, 236/255, 231/255])  # 米色
    pass

3-4.在.kv調用Firstscreen類別中兩個屬性

以下展示部分程式碼(.kv)

Label:
            text: '作品說明:...abcdef...123456789**++--//'
            text_size: 230, 250
            valign: 'center'
            font_name: './font/TW-Kai-98_1.ttf'
            font_size: 23
            color: root.text_color
Button:
            text:'加法'
            font_name: './font/TW-Kai-98_1.ttf'  
            font_size: 23
            color: root.text_color
            size_hint:0.3, 0.1
            pos_hint: {'center_x':0.5, 'center_y':0.36}
            background_normal: ''
            background_color: root.btn_bg_color
            on_release: root.manager.current = 'second'