05.以Python和Kivy開發APP|Kivy-Label|增加Label文字框、調整文字(水平垂直)位置、調整顏色

本篇開始:

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

以我實際開發的APP為例，

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

命名app叫 「CountInMind」。

前言:

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

1.增加 Label來說明作品

如'作品說明:…abcdef…123456789**++--//'

以下程式碼(.kv):

Label:
          text: '作品說明:…abcdef…123456789**++--//'
          font_name: './font/TW-Kai-98_1.ttf'
          font_size: 23
          color: (255/255, 255/255, 255/255) # 'white'
          pos_hint: {'center_x':0.5, 'center_y':0.65}

▲作品說明文字較多，會無法全數呈現

2.增加 Label文字框

先建立一個230*250的文字框

以下程式碼(.kv):

text_size: 230, 250

▲有限定框大小，所以文字內容限縮進來

3.改變文字對齊方向

3-1.設定垂直位置:置上(top)、中(center)、低(bottom)

以下程式碼(.kv):

valign: 'center'

3-2.設定水平位置:靠左(left)、中(center)、右(right)

這邊為補充，請自行嘗試看看，不另外展示。

以下程式碼(.kv):

halign: 'center'

4.在 Label調整文字顏色語法

4-1.使用分數或小數(整數)表達

以下程式碼(.kv):

color: (255/255, 255/255, 255/255)

也可以下程式碼(.kv):

color: (1, 1, 1)

4-2.或使用英文表達

以下程式碼(.kv):

color: 'white'

注意!!! Label的顏色與 canvas的顏色語法(大小寫)有些不同，要留意。

忘記了可以複習03.以Python和Kivy開發APP|Kivy-canvas|設定canvas(帆布、背景)大小、顏色、位置這篇。

5.以下本篇程式碼(.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: (255/255, 255/255, 255/255)   # 'white'
            pos_hint: {'center_x':0.5, 'center_y':0.65}
            
<SM>:
    transition:
    Firstscreen: 

6.本篇小結

加入 text_size調整文字框長寬，並調整文字對齊方向，及改變顏色語法。

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

本篇結束:

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