Kivy 布局之BoxLayout

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

BoxLayout：垂直或者水平方向布局

https://kivy.org/doc/stable/api-kivy.uix.boxlayout.html

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout

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

        # 设置方向（垂直或水平）
        self.orientation= kwargs['orientation']
        # 设置间距
        self.spacing= kwargs['spacing']

        # 创建部件
        btn1 = Button(text='Hello', size_hint=(.6, 1))
        btn2 = Button(text='Kivy', size_hint=(.3, 0.5))
        btn3 = Button(text='World', size_hint=(.1, 0.8))

        # 添加部件
        self.add_widget(btn1)
        self.add_widget(btn2)
        self.add_widget(btn3)

class MyApp(App):
    def build(self):
        return ExampleBoxLayout(orientation = 'horizontal', spacing = 20) # orientation = vertical or horizontal

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

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

代码解释：

写了一个 ExampleBoxLayout 类，该类继承了 BoxLayout 类
通过参数 orientation 设置了布局的方向（水平）
通过参数 spacing 设置了部件之间的间距

size_hint 参数：
这是一个表示控件大小相对性的参数，它允许按照父控件的剩余空间来调整控件的大小
第一个元素表示宽度相对于父控件剩余空间的提示（可以在0（不占据任何空间）和1（占据所有剩余空间）之间）
第二个元素表示高度相对于父控件剩余空间的提示

以上代码运行效果如下：

BoxLayout01.JPG

将上面的代码修改其中的4行代码如下：

return ExampleBoxLayout(orientation = 'vertical', spacing = 20) # orientation = vertical or horizontal

# 创建部件
btn1 = Button(text='Hello', size=(200, 100), size_hint=(None, None))
btn2 = Button(text='Kivy', size_hint=(.8, 0.5))
btn3 = Button(text='World', size_hint=(.8, 1))

代码解释：

通过参数 orientation 设置了布局的方向（垂直）

第一个按钮，通过参数 size 定义了宽高：200像素 * 100像素
第二个按钮和第三个按钮宽度相等，都是占窗口宽度的80%
第二个按钮和第三个按钮宽度的高度比例是 0.5 : 1

以上代码运行效果如下：

BoxLayout02.JPG

再次将创建三个按钮部件的代码修改如下：

# 创建部件
btn1 = Button(text='Hello', size=(200, 100), size_hint=(None, None), pos_hint={'right': 0.5})
btn2 = Button(text='Kivy', size=(100, 100), size_hint=(None, None), pos_hint={'x': 0.5})
btn3 = Button(text='World', size=(200, 200), size_hint=(None, None), pos_hint={'center_x': 0.5})

代码解释：

三个按钮都通过参数 size 定义可宽高

三个按钮都通过参数 pos_hint 定义了相对位置
第一个按钮通过 right 属性设置了部件的右边的位置（x方向的50%）
第二个按钮通过 x 属性设置了部件左边的位置（x方向的50%）
第三个按钮通过 center_x 属性设置了部件中心点的位置（x方向的50%）

垂直方向布局可以使用：right, x, center_x
水平方向布局可以使用：top, y, center_y

以上代码运行效果如下：

BoxLayout03.JPG