Kivy 布局之RelativeLayout

布局就是定义如何排列小部件

RelativeLayout：相对布局
https://kivy.org/doc/stable/api-kivy.uix.relativelayout.html

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.relativelayout import RelativeLayout

class ExampleBoxLayout(BoxLayout):
    def __init__(self, **kwargs):
        super(ExampleBoxLayout, self).__init__(**kwargs)

        # 创建子布局-左
        left_layout = BoxLayout()
        self.add_widget(left_layout)
        # 创建子布局-右
        right_layout = BoxLayout()
        self.add_widget(right_layout)

        # 添加小部件到子布局-右
        btn1 = Button(text='hello word', size_hint=(None, None), size=(200, 200), pos=(0, 0))
        btn2 = Button(text='hi kivy', size_hint=(None, None), size=(100, 50), pos_hint={'x': 0, 'y': 0})
        right_layout.add_widget(btn1)
        right_layout.add_widget(btn2)

class MyApp(App):
    def build(self):
        return ExampleBoxLayout()

    def on_stop(self):
        print('应用程序已关闭')

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

代码解释

在Box Layout不居中添加了两个子布局，两个子布局都是 Box Layout
left_layout = BoxLayout()
right_layout = BoxLayout()

在 子布局-右 中添加了两个按钮 btn1，btn2
两个按钮分别通过 pos 和 pos_hint 属性定位

Box Layout 布局是线性排序，运行效果如下图所示

relativelayout01.JPG

修改代码，将 子布局-右 改为 Float Layout 布局

right_layout = FloatLayout()

Float Layout 布局是浮动布局，运行效果如下图所示

relativelayout02.JPG

在 Float Layout 布局中，分别采用 pos 和 pos_hint 属性将按钮定位到左下角，但是他们的摆放位置却不一样。
这说明：
pos 属性对应的是窗口坐标系统
pos_hint 属性对应的是父容器坐标系统

修改代码，将 子布局-右 改为 Relative Layout 布局

right_layout = RelativeLayout()

Relative Layout 布局是相对布局，运行效果如下图所示

relativelayout03.JPG

Relative Layout 相对布局，其相对是指小部件相对于父容器 Relative Layout 进行定位。
如果需要针对窗口做绝对定位，建议使用 Float Layout 浮动布局，并采用 pos 属性进行绝对定位。