【kivy layout】GridLayout類別的使用方法｜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 GridLayout

class firstlayout(GridLayout):
    pass

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

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

▲說明:

1.從 kivy.uix.gridlayout這個模組導入 GridLayout類別

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

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

▲說明:main.py程式碼

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

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

3.在.kv加入 layout內容

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

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

<firstlayout>:
    spacing: 10
    rows:2
    cols:3

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

    Button:
        text:'black light'

    Button:
        text:'red light'

    Button:
        text:'blue light'

    Button:
        text:'white light'

▲說明:

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

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

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

4.rows:可填數字，代表列數幾列

5.cols:可填數字，代表行數幾行

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

▲說明:main.kv程式碼

▲說明:執行python檔案，部件呈現2x3(2列3行)的網格排列

【說明】要改變部件排列方向，可以添加屬性 orientation:''，預設排列方向是'lr-tb'(l代表left、r代表right、t代表top、b代表bottom)，也就是說排列的順序由左至右，再由上至下。如果改成orientation:'bt-rl'，則排列順序為由下至上，然後再由右至左

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

<firstlayout>:
    spacing: 10
    orientation:'bt-rl'
    rows:3
    cols:2

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

    Button:
        text:'black light'

    Button:   
        text:'red light'

    Button:
        text:'blue light'

    Button:
        text:'white light'

▲說明:main.kv程式碼，裡面加入 orientation屬性

▲說明:執行python檔案，部件改成3x2(3列2行)的網格排列

4.本篇小結

GridLayout跟 FloatLayout、 BoxLayout版面佈局上的差異性，如果還有不清楚的部分可以再回頭去複習一下~

本篇結束:

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