Kivy 简明教程

Kivy - Float Layout

在 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()。

下面显示 basic usage of FloatLayout −

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

还可以使用 “kv” 文件来填充应用程序窗口，如下所示 −

FloatLayout:
   Label:
      text : 'TutorialsPoint'

Example

让我们设计一个由三个标签、三个文本输入框（一个多行文本框）和一个提交按钮组成的表单。

为此目的，使用了 FloatLayout 对象。标签放置在 200 px 作为 x 坐标值，文本框放置在 400 px 作为 x 坐标值。标签和文本框的宽度是布局的 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()

Output

运行此代码后，将生成如下所示的输出窗口 −

请注意，通过在标签画布上绘制矩形并使用 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}