Kivy - 網格佈局



GridLayout是Kivy中最常用的佈局型別之一。GridLayout物件充當容器網格。它將視窗區域劃分為指定數量的行和列,並將其他小部件放在單元格中。

GridLayout類在kivy.uix.gridlayout模組中定義。該物件必須至少定義一個屬性 - rows和cols。如果您沒有指定這兩個屬性中的任何一個,Kivy將丟擲GridLayoutException。

from kivy.uix.gridlayout import GridLayout
grid = GridLayout(**kwargs)

GridLayout物件的屬性如下:

  • cols - 網格中的列數。您不能再將其設定為負值。cols是一個NumericProperty,預設為None。

  • rows - 網格中的行數。您不能再將其設定為負值。rows是一個NumericProperty,預設為None。

  • cols_minimum - 每列最小寬度的字典。字典鍵是列號(例如,0、1、2…)。它是一個DictProperty,預設為{}。

  • rows_minimum - 每行最小高度的字典。字典鍵是行號(例如,0、1、2…)。它是一個DictProperty,預設為{}。

  • minimum_width - 自動計算包含所有子項所需的最小寬度。它是一個NumericProperty,預設為0。它是隻讀的。

  • minimum_height - 自動計算包含所有子項所需的最小高度。它是一個NumericProperty,預設為0。它是隻讀的。

  • orientation - 佈局的方向。此屬性決定小部件如何放置在網格中的連續單元格中。"orientation" 是一個 OptionProperty。

    • 'lr-tb' - 單元格從左到右,從上到下填充。

    • 'tb-lr' - 單元格從上到下,從左到右填充。

    • 'rl-tb' - 單元格從右到左,從上到下填充。

    • 'tb-rl' - 單元格從上到下,從右到左填充。

    • 'lr-bt' - 單元格從左到右,從下到上填充。

    • 'bt-lr' - 單元格從下到上,從左到右填充。

    • 'rl-bt' - 單元格從右到左,從下到上填充。

    • 'bt-rl' - 單元格從下到上,從右到左填充。

orientation 屬性的預設值為 'lr-tb'。

  • row_default_height - 用於行的預設最小大小。row_default_height 是一個 NumericProperty,預設為 0。

  • row_force_default - 如果為 True,則忽略子項的高度和 size_hint_y 並使用預設行高。row_force_default 是一個 BooleanProperty,預設為 False。

  • spacing - 子項之間的間距:[spacing_horizontal, spacing_vertical]。spacing 是一個 VariableListProperty,預設為 [0, 0]。

  • padding - 佈局框與其子項之間的填充:[padding_left, padding_top, padding_right, padding_bottom]。padding 是一個 VariableListProperty,預設為 [0, 0, 0, 0]。

預設情況下,所有小部件的大小相同。這是因為預設的 size_hint 為 (1,1)。

def build(self):
   self.lo = GridLayout(cols=2)
   self.b1 = Button(text='Button 1', font_size=20)
   self.b2 = Button(text='Button 2', font_size=20)
   self.b3 = Button(text='Button 3', font_size=20)
   self.b4 = Button(text='Button 4', font_size=20)
   self.lo.add_widget(self.b1)
   self.lo.add_widget(self.b2)
   self.lo.add_widget(self.b3)
   self.lo.add_widget(self.b4)
   return self.lo

使用此程式碼,您將獲得以下佈局:

Kivy Grid Layouts

現在,讓我們將“Hello”按鈕的大小固定為 250px,而不是使用“size_hint_x=None”。

self.lo = GridLayout(cols = 2)

self.b1 = Button(
   text='Button 1', font_size=20,
   size_hint_x=None, width=250
)

self.b2 = Button(text='Button 2', font_size=20)

self.b3 = Button(
   text='Button 3', font_size=20,
   size_hint_x=None, width=250
)

self.b4 = Button(text='Button 4', font_size=20

應用程式視窗顯示如下:

Kivy Grid Layouts2

如果我們將 row_default_height 定義為 100 並設定 "row_force_default=True":

self.lo = GridLayout(
cols=2, row_force_default=True, row_default_height=100
)
self.b1 = Button(
text='Button 1', font_size=20, size_hint_x=None, width=250
)
self.b2 = Button(text='Button 2', font_size=20)
self.b3 = Button(
text='Button 3', font_size=20, size_hint_x=None, width=250
)
self.b4 = Button(text='Button 4', font_size=20)

現在視窗顯示如下:

Kivy Grid Layouts

示例 1

在此程式中,我們在網格佈局中添加了 15 個按鈕,共有四列。每個按鈕的標題都是一個唯一的隨機生成的數字(1 到 15 之間)。random 模組中的 randint() 函式用於此目的。

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.gridlayout import GridLayout
from kivy.config import Config
import random

Config.set('graphics', 'width', '720')
Config.set('graphics', 'height', '400')
Config.set('graphics', 'resizable', '1')

class MyApp(App):
   def build(self):
      self.grid = GridLayout(cols = 4)
      nums=[]
      for i in range(1,16):
         while True:
            num = random.randint(1,15)
            if num not in nums:
               nums.append(num)
               self.grid.add_widget(Button(text = str(num)))
               break
      return self.grid

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

輸出

執行此程式碼時,它將生成以下輸出視窗:

Kivy Grid Layouts

示例 2

Kivy 中的 GridLayout 沒有跨行和/或列擴充套件小部件的規定。也不可能按行號和列號放置小部件。

需要在一個兩列的網格中排列一些標籤和文字輸入框,但是下面的提交按鈕應該跨兩列。為此,我們將一個兩列的網格放在一個一列的網格內,並在其下方放置一個按鈕。

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.textinput import TextInput
from kivy.uix.gridlayout import GridLayout
from kivy.core.window import Window

Window.size = (720, 400)

class DemoApp(App):
   def build(self):
      self.grid = GridLayout(rows=2)
      self.top_grid = GridLayout(
         cols=2, row_force_default=True,
         row_default_height=100
      )
      self.top_grid.cols = 2
      self.top_grid.add_widget(
         Label(text="Name: ", size_hint_x=None, width=250)
      )
      self.fname = TextInput(
         multiline=False, size_hint_x=None, width=650
      )
      self.top_grid.add_widget(self.fname)
      self.top_grid.add_widget(Label(text="Address: "))
      self.address = TextInput(multiline=True)
      self.top_grid.add_widget(self.address)
      self.top_grid.add_widget(Label(text="College: "))
      self.college = TextInput(multiline=False)
      self.top_grid.add_widget(self.college)
      self.grid.add_widget(self.top_grid)
      self.b1 = Button(text='Submit', size_hint_y=None, height=200)
      self.grid.add_widget(self.b1)
      return self.grid
   
if __name__ == '__main__':
   DemoApp().run()

輸出

執行此程式碼時,它將生成以下輸出視窗:

Kivy Grid Layouts Submit
廣告
© . All rights reserved.