Kivy 简明教程

Kivy - Relative Layout

RelativeLayout 的行为与 FloatLayout 的行为非常相似。两者之间的主要区别在于相对布局中子小部件的定位坐标与布局大小相关，而不是像浮动布局那样的窗口大小。

要理解它的含义，请考虑用 FloatLayout 设计的以下 UI。

kivy relative layout

调整窗口大小时，由于浮动布局中的绝对定位，小部件的放置与调整大小的窗口不成比例。因此，界面设计不一致。

kivy resize window

相对布局没有这样的效果，因为小部件的大小和位置与布局相关。

当将具有位置 (0,0) 的小部件添加到 RelativeLayout 时，当 RelativeLayout 的位置更改时，子小部件也会随之移动。子小部件的坐标始终相对于父布局。

RelativeLayout 类在“kivy.uix.relativelayout”模块中定义。

from kivy.uix.relativelayout import RelativeLayout
rlo = RelativeLayout(**kwargs)

Example

以下代码将标签、文本框和提交按钮组装在 RelativeLayout 中。

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.relativelayout import RelativeLayout
from kivy.core.window import Window

Window.size = (720, 400)

class RelDemoApp(App):
   def build(self):
      rlo = RelativeLayout()

      l1 = Label(
         text="Name", size_hint=(.2, .1),
         pos_hint={'x': .2, 'y': .75}
      )
      rlo.add_widget(l1)
      t1 = TextInput(
         size_hint=(.4, .1), pos_hint={'x': .3, 'y': .65}
      )
      rlo.add_widget(t1)
      l2 = Label(
         text="Address", size_hint=(.2, .1),
         pos_hint={'x': .2, 'y': .55}
      )
      rlo.add_widget(l2)
      t2 = TextInput(
         multiline=True, size_hint=(.4, .1),
         pos_hint={'x': .3, 'y': .45}
      )
      rlo.add_widget(t2)
      l3 = Label(
         text="College", size_hint=(.2, .1),
         pos_hint={'x': .2, 'y': .35}
      )
      rlo.add_widget(l3)
      t3 = TextInput(
         size_hint=(.4, .1), pos=(400, 150),
         pos_hint={'x': .3, 'y': .25}
      )
      rlo.add_widget(t3)
      b1 = Button(
         text='Submit', size_hint=(.2, .1),
         pos_hint={'center_x': .5, 'center_y': .09}
      )
      rlo.add_widget(b1)
      return rlo

RelDemoApp().run()

Output

执行上述代码后，应用程序窗口会显示如下 UI −

kivy relative layout ui

请注意，与 FloatLayout 的情况不同，调整窗口大小不会改变小部件的按比例调整大小和定位。

kivy college form

"kv" design language script

用于在 App 类的 build() 方法中生成上述 UI 的“kv”文件如下 −

RelativeLayout:
   Label:
      text:"Name"
      size_hint:(.2, .1)
      pos_hint:{'x':.2, 'y':.75}

   TextInput:
      size_hint:(.4, .1)
      pos_hint:{'x':.3, 'y':.65}

   Label:
      text:"Address"
      size_hint:(.2, .1)
      pos_hint:{'x':.2, 'y':.55}

   TextInput:
      multiline:True
      size_hint:(.4, .1)
      pos_hint:{'x':.3, 'y':.45}

   Label:
      text:"College"
      size_hint:(.2, .1)
      pos_hint:{'x':.2, 'y':.35}

   TextInput:
      size_hint:(.4, .1)
      pos:(400, 150)
      pos_hint:{'x':.3, 'y':.25}

   Button:
      text:'Submit'
      size_hint : (.2, .1)
      pos_hint : {'center_x':.5, 'center_y':.09}