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
打印页面
上一页
下一页
广告