Kivy - Box 佈局

---

---

Kivy 框架提供 BoxLayout 類，我們可以用它來依次排列元件。排列順序由 BoxLayout 物件的 orientation 屬性決定，可以是字串：'vertical' 或 'horizontal'。

BoxLayout 類在 "kivy.uix.boxlayout" 模組中定義。要宣告一個 BoxLayout 物件，請使用。

from kivy.uix.boxlayout import BoxLayout
blo = BoxLayout(**kwargs)

屬性

• orientation − 佈局方向。orientation 是一個 OptionProperty，預設為 'horizontal'。可以是 'vertical' 或 'horizontal'。

• padding − 佈局框與子元件之間的填充：[padding_left, padding_top, padding_right, padding_bottom]。padding 也接受兩個引數的形式 [padding_horizontal, padding_vertical] 和一個引數的形式 [padding]。

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

• minimum_size − 自動計算包含所有子元件所需的最小尺寸。minimum_size 是 (minimum_width, minimum_height) 屬性的 ReferenceListProperty。它是隻讀的。

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

BoxLayout 類還繼承了 add_widget() 和 remove_widget() 方法，我們之前已經討論過這些方法。

垂直 BoxLayout

此處顯示了 BoxLayout 的典型用法。我們在垂直 Box 佈局中添加了一個標籤、一個文字輸入框和一個按鈕。

示例

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.boxlayout import BoxLayout
from kivy.core.window import Window
Window.size = (720,200)

class DemoApp(App):
   def build(self):
      lo = BoxLayout(orientation = 'vertical')
      self.l1 = Label(text='Enter your name', font_size=20)
      self.t1 = TextInput(font_size = 30)
      self.b1 = Button(text = 'Submit', size_hint = (None, None),pos_hint={'x':.4, 'y':.2}, size = (200,75))
      lo.add_widget(self.l1)
      lo.add_widget(self.t1)
      lo.add_widget(self.b1)
      return lo

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

輸出

它將產生以下輸出：

您可以使用以下 "Demo.kv" 檔案構建上述 GUI：

BoxLayout:
   orientation : 'vertical'
   Label:
      id : l1
      text : 'Enter your name'
      font_size : '20pt'
   TextInput:
      id : t1
      font_size : 30
   Button:
      id : b1
      text : 'Submit'
      size_hint : (None, None)
      pos_hint : {'x':.4, 'y':.2}
      size : (200,75)

水平 BoxLayout

在以下程式中，我們將標籤、文字輸入框和按鈕放置在方向為水平的 Box 佈局中。

示例

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.boxlayout import BoxLayout
from kivy.clock import Clock
from kivy.core.window import Window

Window.size = (720,200)

class DemoApp(App):
   def build(self):
      self.lo = BoxLayout(orientation = 'horizontal')
      self.l1 = Label(text='Enter your name', font_size=20)
      self.t1 = TextInput(font_size = 30, pos_hint={'y':0.25}, pos = (0,100), size_hint = (None, None), size = (650,100))
      self.b1 = Button(text = 'Submit', size_hint = (None, None),pos_hint={'x':.4, 'y':.35}, size = (75, 40))
      self.lo.add_widget(self.l1)
      self.lo.add_widget(self.t1)
      self.lo.add_widget(self.b1)
      return self.lo

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

輸出

它將產生以下輸出：

您可以使用以下 "Demo.kv" 檔案獲得相同的 GUI 設計：

BoxLayout:
   orientation : 'horizontal'
   Label:
      text : 'Enter your name'
      font_size : '20pt'
   TextInput :
      font_size : '30pt'
      pos_hint : {'y':0.25}
      pos : (0,100)
      size_hint : (None, None)
      size : (650,100)
   Button :
      text : 'Submit'
      size_hint : (None, None)
      pos_hint : {'x':.4, 'y':.35}
      size : (75, 40)