本篇開始:
- 我的開發環境是win11
- python是3.10.7版本
- kivy我設定在2.1.0版本
- 編碼的工具是Visual Studio Code(VS Code)
【本篇說明】在 Kivy裡面有很多用於佈局(版面)的類別，像是常見的 FloatLayout、 BoxLayout、 GridLayout..等，今天要來介紹的是 FloatLayout，在字面上翻譯是"浮點的佈局"，使用的效果像是可隨意指定子部件排列位置，所以在佈局版面上增加了許多彈性
1.首先在main.py寫下固定的程式碼
以下.py程式碼:(在vscode開啟python檔案，取名為main.py，以下簡稱.py)
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
class firstlayout(FloatLayout):
pass
class Mainapp(App):
def build(self):
return firstlayout()
if __name__ == "__main__":
Mainapp().run()
▲說明:
1.從 kivy.uix.floatlayout這個模組導入 FloatLayout類別
2.創建一個class 類別取名為 firstlayout(可自取無限定命名)，然後在()填入 FloatLayout，目的是為了繼承 FloatLayout類別所有屬性及方法
3.這邊 kivy language(kv)，我使用的是"相同命名方式"，如果不太懂我說的，可先參考這篇:【kivy language】如何使用 kivy language(kv)
▲說明:main.py程式碼
2.在vscode新增 kivy檔案，我取名 main.kv，並且放在同資料夾內
▲說明:我的是放在以下路徑:桌面-> python-> Kivy-> test
3.在.kv加入 Widget部件內容
先使用4個 Button部件來展示(可參考這篇:【kivy Button】經常使用的Button(按鈕)語法。)
以下.kv程式碼:(在vscode編輯 main.kv，簡稱.kv)
<firstlayout>:
Button:
text:'green light'
size_hint: 0.2, 0.2
pos_hint:{'x':0, 'y':0}
Button:
text:'yellow light'
size_hint: 0.2, 0.2
pos_hint:{'x':0.25, 'y':0.25}
Button:
text:'black light'
size_hint: 0.2, 0.2
pos_hint:{'x':0.5, 'y':0.5}
Button:
text:'red light'
size_hint: 0.2, 0.2
pos_hint:{'x':0.75, 'y':0.75}
▲說明:
1.先加入 <firstlayout>: (記得要使用角括號 < >)，為了使用 main.py裡面的 class firstlayout的屬性，也就是 FloatLayout類別屬性
2.在 firstlayout裡面，添加 Button部件，這邊呼叫 Button需要先縮排，其後面的屬性也要縮排
3.大小使用 size_hint屬性，讓部件依照layout的視窗大小調整長與寬(長:視窗水平大小0.2，寬:視窗垂直大小0.2)
4.位置使用 pos_hint屬性，讓部件以視窗左下角的點作為參考點(也就是原點(0,0))來訂定位置
▲說明:main.kv程式碼
▲說明:執行python檔案
【說明】因為是使用 FloatLayout類別，所以可以自由指定部件位置，不受佈局版面的影響。
以下.kv程式碼:(在vscode編輯 main.kv，簡稱.kv)
<firstlayout>:
Button:
text:'green light'
size_hint: 0.2, 0.2
pos_hint:{'x':0.75, 'y':0.75}
Button:
text:'yellow light'
size_hint: 0.2, 0.2
pos_hint:{'x':0.5, 'y':0.5}
Button:
text:'black light'
size_hint: 0.2, 0.2
pos_hint:{'x':0.25, 'y':0.25}
Button:
text:'red light'
size_hint: 0.2, 0.2
pos_hint:{'x':0, 'y':0}
▲說明:main.kv程式碼
▲說明:執行python檔案
本篇小結
對於 FloatLayout類別的基本使用，是否都了解了呢? 之後分享 BoxLayout、 GridLayout就會感覺在版面佈局上的差異。
本篇結束:
在自學路上遇到困難是很正常的事，只要堅持到底，相信就會有所成果，期勉大家一同努力。
