02.以Python和Kivy開發APP|Kivy-Label|調整Label文字大小、顏色、位置

本篇開始:

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

以我實際開發的APP為例，

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

這個創意起源是我在國小高年級時，

每堂課導師都會依序念幾個數字考心算加總，

個人認為這樣方式有助於基礎運算能力，

這邊我先命名app叫 「CountInMind」。

1.構想app首頁:

首先我想要的首頁內容有包含app的中文標題、作品說明及可以選取(加法或減法)模式等功能。

2.開始編寫程式碼:

因為需要一個screen，所以先導入我需要的類別 Screen

以下程式碼:

from kivy.uix.screenmanager import Screen, ScreenManager

3.建立screen類別:

首頁取名叫 Firstscreen，並繼承類別 Screen

以下程式碼:

class Firstscreen(Screen):
		pass

4.建立首頁內容(app的中文標題、作品說明及可以選取模式):

這邊我開始引入kivy來當作圖形介面，另建立countinmind.kv檔案

注意!!! .kv有其命名規則，需為app名稱的小寫字母，且要與.py檔案在同一資料夾。

4-1.使用 Label建立標題:這邊先使用 FloatLayout版面，並加入 Label物件

4-1-1.Label文字內容 text:'77777'

4-1-2.字體大小 font_size: 30

4-1-3.字體顏色 color: 'blue'

4-1-4.加入粗體效果 bold: True

以下程式碼(.kv)

#: kivy 2.1.0

<Firstscreen>:    

    FloatLayout:

        Label:

            text:'77777'

            bold: True   

            font_size: 30

            color: 'blue'            

<SM>:

    transition:

    Firstscreen: 

可以發現'77777'位於螢幕寬跟長各*0.5的預設位置，這邊是以左下角為原點位置

4-2.改變 Label位置:讓其位置在寬*0.5、長*0.9

以下程式碼(.kv)

pos_hint: {'center_x':0.5, 'center_y':0.9}

可以發現從預設位置往上至長*0.9位置

5.本篇小結:

加入 Label，並改變其文字內容、字體大小、顏色、粗體以及位置。

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

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

#: kivy 2.1.0

<Firstscreen>:    

    FloatLayout:

        Label:

            text:'77777'

            bold: True   

            font_size: 30

            color: 'blue'

            pos_hint: {'center_x':0.5, 'center_y':0.9}            

<SM>:

    transition:

    Firstscreen:

本篇結束:

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