10.學習Kivy:改變Button形狀(使用DegreeButton)

本篇開始:

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

以我實際開發的APP為例，

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

命名app叫 「CountInMind」。

前言:

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

1.接續上一篇內容，這邊說明一下，我將首頁添增一些Label物件，如下圖

2.再來參考前幾篇語法，設計出第2頁內容，如下圖

▲說明:有新增一個"上一頁"的Button，需在<Firstscreen>下新增name屬性為'first'，語法同上一篇的on_release，這樣點擊後才能回到上一頁

3.改變Button形狀(預設為方形的):使用DegreeButton 物件

4.先編寫DegreeButton基本功能:需與Button同段落，程式語法也與Button類似，並加入on_release可轉換至下一頁

以下程式碼(.kv):

DegreeButton:
            text: '易'    
            font_name: './font/TW-Kai-98_1.ttf'
            font_size: 23
            color: (30/255, 30/255, 30/255)
            size_hint: 0.2, 0.15
            pos_hint: {'center_x':0.27, 'center_y':0.3}
	          on_release: root.manager.current = 'third'  #先取名下一頁name屬性為'third'

5.接下來需要編寫<DegreeButton@Button>類別:需與<Secondscreen>同段落

以下程式碼(.kv):

<DegreeButton@Button>
    background_normal: ''
    background_color: (0,0,0,0)
    canvas.before:
        Color:
            rgb: (252/255, 236/255, 231/255)
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius: [65]

▲說明:radius為調整圓形弧度，讓DegreeButton變成有點橢圓形了

這邊補充說明一下，background這兩行須寫在<DegreeButton@Button>下，而不是DegreeButton下，否則無法改變Button形狀。

6.本篇小結

加入DegreeButton改變形狀，並加入上一篇所說on_release可轉換至下一頁。

為精簡篇幅，本篇所使用完整(.py)(.kv)程式碼，請接續這篇內容:09.學習Kivy:設置Button按下(release)觸發功能

本篇結束:

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