Kivy - 浮動佈局

---

---

在 Kivy 中，FloatLayout 使您能夠完全控制組件的放置。它不對元件的定位和大小施加任何限制。FloatLayout 遵循其子元件的“pos_hint”和“size_hint”屬性。

FloatLayout 類在“kivy.uix.floatlayout”模組中定義。

from kivy.uix.floatlayout import FloatLayout
layout = FloatLayout(**kwargs)

您可以使用 size 引數指定佈局大小。它是一個以畫素為單位的寬度和高度的元組。

layout = FloatLayout(size=(300, 300))

當使用 add_widget() 方法將元件放置在 FloatLayout 物件中時，元件將採用與佈局相同的大小。

您可以指定“size_hint”、“pos_hint”、“pos”和“size”屬性來定義元件在 FloatLayout 中的大小和位置。

button = Button(
   text='TutorialsPoint',
   size_hint=(.4, .3),
   pos=(100, 100))

這將把一個按鈕定位在 100,100 座標處（從左下角測量），大小為佈局寬度的 40%，佈局高度的 30%。

FloatLayout 支援從 Widget 類繼承的兩種主要方法：add_widget() 和 remove_widget()。

下面顯示了FloatLayout 的基本用法：

class FloatApp(App):
   def build(self):
      flo = FloatLayout()
      l1 = Label(text="TutorialsPoint")
      flo.add_widget(l1)
      return flo

您還可以使用“kv”檔案填充應用程式視窗，如下所示：

FloatLayout:
   Label:
      text : 'TutorialsPoint'

示例

讓我們設計一個表單，其中包含三個標籤、三個文字輸入框（其中一個為多行文字框）和一個提交按鈕。

為此使用 FloatLayout 物件。標籤放置在 x 座標值為 200 px 的位置，文字框放置在 x 座標值為 400 px 的位置。標籤和文字框的寬度為佈局的 10%。單個按鈕水平放置在中心。

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.floatlayout import FloatLayout
from kivy.graphics import Color, Rectangle
from kivy.core.window import Window

Window.size = (720,350)

class FloatApp(App):
   def build(self):
      flo = FloatLayout()
      l1 = Label(
         text="Name", size_hint=(.2, .1),
         pos=(200, 350), color = [1,1,1,1]
      )
      with l1.canvas:
         Color(0, 1, 0, 0.25)
         Rectangle(pos=l1.pos, size=(350, 50))
      flo.add_widget(l1)
      t1 = TextInput(size_hint=(.4, .1), pos=(400, 350))
      flo.add_widget(t1)
      
      l2 = Label(
         text="Address", size_hint=(.2, .1),
         pos=(200, 250),color = [1,1,1,1]
      )
      with l2.canvas:
         Color(0, 1, 0, 0.25)
         Rectangle(pos=l2.pos, size=(350, 50))
      flo.add_widget(l2)
      t2 = TextInput(
         multiline=True, size_hint=(.4, .1), pos=(400, 250)
      )
      flo.add_widget(t2)
      
      l3 = Label(
         text="College", size_hint=(.2, .1),
         pos=(200, 150), color = [1,1,1,1]
      )
      with l3.canvas:
         Color(0, 1, 0, 0.25)
         Rectangle(pos=l3.pos, size=(350, 50))
      flo.add_widget(l3)
      t3 = TextInput(size_hint=(.4, .1), pos=(400, 150))
      flo.add_widget(t3)

      b1 = Button(
         text='Submit', size_hint = (.2, .1),
         pos_hint = {'center_x':.5, 'center_y':.09}
      )
      flo.add_widget(b1)
      
      return flo
      
FloatApp().run()

輸出

執行此程式碼時，它將生成如下所示的輸出視窗：

請注意，透過在標籤畫布上繪製具有 RGBA 顏色值 (0, 1, 0, 0.25) 的矩形，為標籤提供了背景顏色。

如果您希望使用“kv”檔案而不是在 build() 方法中設計 UI，則以下是“kv”語言指令碼：

FloatLayout:
   Label:
      id:l1
      text:"Name"
      size_hint:(.2, .1)
      pos:(200, 350)
      color : [1,1,1,1]
      canvas:
         Color :
            rgba: 0, 1, 0, 0.25
         Rectangle:
            pos:self.pos
            size : (350, 50)

   Label:
      id:l2
      text:"Address"
      size_hint:(.2, .1)
      pos:(200, 250)
      color : [1,1,1,1]
      canvas:
         Color :
            rgba: 0, 1, 0, 0.25
         Rectangle:
            pos:self.pos
            size : (350, 50)
      
   Label:
      id:l3
      text:"College"
      size_hint:(.2, .1)
      pos:(200, 150)
      color : [1,1,1,1]
      canvas:
         Color :
            rgba: 0, 1, 0, 0.25
         Rectangle:
            pos:self.pos
            size : (350, 50)
      
   TextInput:
      id:t1
      size_hint:(.4, .1)
      pos:(400, 350)
   TextInput:
      id:t2
      multiline:True
      size_hint:(.4, .1)
      pos:(400, 250)
   TextInput:
      id:t3
      size_hint:(.4, .1)
      pos:(400, 150)
   Button:
      id:b1
      text:'Submit'
      size_hint : (.2, .1)
      pos_hint : {'center_x':.5, 'center_y':.09}