【kivy layout】FloatLayout類別的使用方法｜Kivy基礎用法

2025/09/30 更新2025/09/30 發佈閱讀 7 分鐘

本篇開始:

我的開發環境是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}