本篇開始:
- 我的開發環境是win11
- python是3.10.7版本
- kivy我設定在2.1.0版本
- 編碼的工具是Visual Studio Code(VS Code)
【本篇說明】在 Kivy裡面有很多用於佈局(版面)的類別，像是常見的 FloatLayout、 BoxLayout、 GridLayout...等，今天要來介紹的是 GridLayout，中文翻譯是"網格佈局"，是以二維行列方式來佈局，使用效果可以達到多欄多行的排列內容。
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版面佈局上的差異性，如果還有不清楚的部分可以再回頭去複習一下~
本篇結束:
在自學路上遇到困難是很正常的事，只要堅持到底，相信就會有所成果，期勉大家一同努力。
