本篇開始:
- 我的開發環境是win11
- python是3.10.7版本
- kivy我設定在2.1.0版本
- 編碼的工具是Visual Studio Code(VS Code)
以我實際開發的APP為例，
我想做的是可以訓練基本加(減)法的心算工具。
命名app叫 「CountInMind」。前言:
繼續製作app首頁，編寫countinmind.kv，在底下使用FloatLayout版面。
1.在 Label內增加canvas來凸顯說明文字
請參照03篇來新增canvas，03.以Python和Kivy開發APP|Kivy-canvas|設定canvas(帆布、背景)大小、顏色、位置
2.加入帆布(canvas要小寫，語法要求)
3.設定顏色(Color字首大寫)
使用白色背景框 (rgb數值可以參考其他網站說明)
4.設定矩形(Rectangle字首大寫)
4-1.矩形大小
self.width0.9(寬度為視窗寬的0.9倍)、self.height0.3(長度為視窗長的0.3倍)
4-2.矩形位置
self.width0.05(橫軸位置在視窗寬的0.05倍)、self.height0.3(縱軸位置在視窗長的0.5倍)
以下程式碼(.kv):
canvas:
Color:
rgb: (255/255, 255/255, 255/255)
Rectangle:
size: self.width*0.9, self.height*0.3
pos: self.width*0.05, self.height*0.5
▲矩形位置是以左下角為原點起算。有沒有發現原本的說明文字不見了!
5.使用 canvas屬性before調整順序:將 canvas移至 text文字底下
6.以下為本篇完整程式碼(.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: (30/255, 30/255, 30/255) # 'white'
pos_hint: {'center_x':0.5, 'center_y':0.65}
canvas.before:
Color:
rgb: (255/255, 255/255, 255/255)
Rectangle:
size: self.width*0.9, self.height*0.3
pos: self.width*0.05, self.height*0.5
<SM>:
transition:
Firstscreen:
▲有點像在ppt移至下一層概念
7.本篇小結
加入 canvas.before，使 Label有個白色底框來凸顯文字說明。
本篇所使用程式碼(.py):請參考這篇內容，01.以Python和Kivy開發APP|Kivy-Window|調整APP視窗大小
本篇結束:
在自學路上遇到困難是很正常的事，只要堅持到底，相信就會有所成果，期勉大家一同努力。
