2024-11-09|閱讀時間 ‧ 約 0 分鐘

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:


本篇結束:

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



分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.