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

本篇開始:

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

1.首先在main.py寫下固定的程式碼

以下.py程式碼:(在vscode開啟python檔案，取名為main.py，以下簡稱.py)

from kivy.app import App
from kivy.uix.floatlayout import BoxLayout

class firstlayout(BoxLayout):
    pass

class Mainapp(App):
    def build(self):
        return firstlayout()

if __name__ == "__main__":
    Mainapp().run()

▲說明:

1.從 kivy.uix.boxlayout這個模組導入 BoxLayout類別

2.創建一個class 類別取名為 firstlayout(可自取無限定命名)，然後在()填入 BoxLayout，目的是為了繼承 BoxLayout類別所有特性

3.這邊 kivy language(kv)，我使用的是"相同命名方式"，如果不太懂我說的，可先參考這篇:【kivy language】如何使用 kivy language(kv)

▲說明:main.py程式碼

2.在vscode新增 kivy檔案，我取名 main.kv，並且放在同資料夾內

▲說明:我的是放在以下路徑:桌面-> python-> Kivy-> test

3.在.kv加入 layout內容

先使用4個 Button部件來展示(可參考這篇:【kivy Button】經常使用的Button(按鈕)語法。)

以下.kv程式碼:(在vscode編輯 main.kv，簡稱.kv)

<firstlayout>:
    spacing: 5
    orientation: 'horizontal'

    Button:
        text:'green light'
        
    Button:
        text:'yellow light'

    Button:
        text:'black light'

    Button:
        text:'red light'

▲說明:

1.先加入<firstlayout> : (記得要使用角括號 < >)，目的使用 main.py裡面的類別 firstlayout，也就是 BoxLayout類別的特性

2.在 <firstlayout>裡面，需先縮排，然後加入 spacing及 orientation兩種屬性

3.spacing: 部件之間的間隔，數字越大代表間隔越大

4.orientation:代表排列方向，有區分水平(horizontal)及垂直(vertical)方向，這邊填入 'horizontal'，要記得加引號''

5.添加Widget部件，使用方式:為縮排後加上Widget部件名稱，再加上冒號:

▲說明:main.kv程式碼

▲說明:執行python檔案

【說明】因為是使用 BoxLayout類別，排列方向有其固定規則，像是水平是由左至右、垂直是由上至下，以下再展示垂直方向。

以下.kv程式碼:(在vscode編輯 main.kv，簡稱.kv)

<firstlayout>:
    spacing: 10
    orientation: 'vertical'

    Button:
        text:'green light'
        
    Button:
        text:'yellow light'

    Button:
        text:'black light'

    Button:
        text:'red light'

▲說明:main.kv程式碼

▲說明:執行python檔案

本篇小結

了解BoxLayout類別的基本使用方法後，之後會再分享 GridLayout類別，就會更清楚在版面佈局上的差異。

本篇結束:

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