Kivy UIX篇 layout篇 GridLayout類 講解

簡述

根據官方解釋:

The GridLayout arranges children in a matrix. It takes the available space and divides it into columns and rows, then adds widgets to the resulting “cells”.

意思是GridLayout將空間劃分為單元格，然後將子物件添加到單元格中。

示意圖如下:

基本範例

首先在main.py中寫上起手式:

from kivy.app import App
from kivy.uix.gridlayout import GridLayout


class MyLayout(GridLayout):
    pass


class Myapp(App):

    def build(self):
        return MyLayout()

if __name__ == '__main__':
    Myapp().run()

在以上程式碼中，我讓MyLayout類繼承GridLayout類，使得在my.kv中的<MyLayout>:可以繼承GridLayout類的特性。

在my.kv中寫上此段程式碼:

<MyLayout>:

    #設定layout中網格的列數
    rows: 3 #可依據需求將屬性改為cols

    #添加背景顏色(此段只是拿來呈現GridLayout的範圍，後面會有更詳細的解說)
    canvas:
        Color:
            rgb: [.112, .358, .132]
   
        Rectangle:
            pos:self.pos
            size: self.size

    #添加Button物件(此段只是拿來呈現Button的位置，後面會有更詳細的解說)
    Button:
        text: 'A1'
        #讓物件依照layout的視窗大小調整長與寬
        size_hint: .1, .1
  
    Button:
        text: 'B2'
        size_hint: .1, .1

    Button:
        text: 'C3'
        size_hint: .1, .1

    Button:
        text: 'D4'
        size_hint: .1, .1
   
    Button:
        text: 'E5'
        size_hint: .1, .1

執行結果如下:

GridLayout使用技巧:

1.每個單元格的垂直長度與水平長度由以下方式決定:

(1)若此單元格的水平長度的值是同一"行"單元格的水平長度的值中最大的，則此單元格單元格的水平長度的值即為所設定的值。

(2)若此單元格的水平長度的值"不"是同一"行"單元格的水平長度中最大的，則此單元格的水平長度的值為同一行單元格的水平長度中最大的值。

同理:

(1)若此單元格的垂直長度的值是同一"列"單元格的垂直長度的值中最大的，則此單元格的垂直長度的值即為所設定的值。

(2)若此單元格的垂直長度的值"不"是同一"列"單元格的垂直長度的值中最大的，則此單元格的垂直長度的值為同一列單元格的垂直長度中最大的值。

程式碼範例如下:

<MyLayout>:

    rows: 3 

    canvas:
        Color:
            rgb: [.112, .358, .132]
   
        Rectangle:
            pos:self.pos
            size: self.size

    Button:
        text: 'A1'
        size_hint: .6,.8

    Button:
        text: 'B2'
        size_hint:.4,.1

    Button:
        text:'C3'
        size_hint: .1,.1

    Button:
        text: 'D4'
        size_hint: .1,.1

    Button:
        text: 'E5'
        size_hint: .1,.1

執行結果如下:

由以上結果可以看出:

(1)B2的垂直長度由A1的垂直長度決定(因為A1與B2同列，且B2所設定的垂直長度<A1所設定的垂直長度)，B2的水平長度由自己設定的水平長度決定(因為B2與D4同行，且B2所設定的水平長度<D4所設定的水平長度)。

(2)D4的垂直長度由自己設定的垂直長度決定(或者說與C3相同，因為他們的值一樣)，D4的水平長度由B2的水平長度決定。(這邊我就不推理了，留給各位思考)

2.利用參數orientation決定子物件添加的方向，預設是'lr-tb'(l代表left、r代表right、t代表top、b代表bottom)，意思是添加順序先由左至右，在由上至下。關於參數orientation更多選項請參考https://kivy.org/doc/stable/api-kivy.uix.gridlayout.html#kivy.uix.gridlayout.GridLayout.orientation

程式碼範例如下:

<MyLayout>:

    orientation: 'bt-rl' #注意此行程式碼
    rows: 3


    canvas:
        Color:
            rgb: [.112, .358, .132]

        Rectangle:
            pos:self.pos
            size: self.size


    Button:
        text: 'A1'
        #讓物件依照layout的視窗大小調整長與寬
        size_hint: .1, .1

    Button:
        text: 'B2'
        size_hint: .1, .1

    Button:
        text: 'C3'
        size_hint: .1, .1

    Button:
        text: 'D4'
        size_hint: .1, .1

    Button:
        text: 'E5'
        size_hint: .1, .1

執行結果如下:

以上結果的邏輯順序為:由於orientation: 'bt-rl'，因此從GridLayout的右下開始向上添加子物件，當添加至D4 Button時，由於rows: 3，代表GridLayout每行的單元格最多三個，C4 Button無法添加至同一行，因此必須向左換行，直到添加完所有子物件。