【Kivy】布局 FloatLayout、BoxLayout [学习分享]（二）_Sea-Whales的博客

本篇文章只是个人学习的时候的一些笔记，如果有什么错误的地方还请各位勿喷，手下留情，期待您的指正。
定期会更新文章到www.sea-whales.cn我的个人网站中，有兴趣的小伙伴可以进来看看、

布局

FloatLayout

py文件

# !/usr/bin/env python3
# -*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout


class FloatLayoutWidget(FloatLayout):
    def __init__(self):
        super(FloatLayoutWidget, self).__init__()


class FloatLayoutApp(App):
    def build(self):
        return FloatLayoutWidget()


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

kv文件

# 自定义按钮
<Button>
    font_size: 40       # 字体大小
    size_hint: .3, .4   # 按钮大小

<FloatLayoutWidget>     # 定义页面
    canvas:             # 设置背景颜色
        Color:
            rgba: [.2, .4, .5, .6]

        Rectangle:
            size: self.size
            pos: self.pos

    Button:             # 使用自定义按钮
        text: "BT1"     # 按钮显示文本
        background_color: 1, 0, 0, 1 # 按钮背景颜色
        pos_hint: {'x': 0, 'top': 1} # 按钮位置

    Button:
        text: "BT2"
        background_color: .2, .3, .4, .5
        pos_hint: {'x': .35, 'y': .3}

    Button:
        text: "BT3"
        background_color: .5, .4, .3, .2
        pos_hint: {'x': .7, 'bottom': 0}

    Button:
        text: "BT4"
        background_color: 1, 0, 0, 1
        pos_hint: {'x': 0.7, 'top': 1}

    Button:
        text: "BT5"
        background_color: 1, 0, 0, 1
        pos_hint: {'x': 0, 'bottom': 1}

BoxLayout

盒子布局，可以将部件水平或者垂直排列的布局。类似于安卓的线性布局。如果没有限制任何大小，部件将会以10px间距平分父窗口大小。

只用Python进行布局的话如下：

# !/usr/bin/env python3
# -*- coding: utf8 -*-


from kivy.app import App
from kivy.graphics import Rectangle, Color
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button


class BoxLayoutWidget(BoxLayout):
    def __init__(self):
        super(BoxLayoutWidget, self).__init__()

        # 设置背景颜色
        with self.canvas:
            Color(.4, .5, .02, .3)
            self.rect = Rectangle(pos=self.pos, size=self.size)
            self.bind(pos=self.update_rect, size=self.update_rect)

        # 新建一个指定尺寸的按钮
        button1 = Button(text='Hello BoxLayout1', size_hint=(.3, .2), pos=(200, 40), background_color=(1, 1, 1, 1))
        button2 = Button(text='Hello BoxLayout2', size_hint=(.2, .2), pos=(200, 40), background_color=(.6, .5, .8, .3))

        # 将按钮加到布局内
        self.add_widget(button1)
        self.add_widget(button2)

    def update_rect(self, *args):
        self.rect.pos = self.pos
        self.rect.size = self.size


class BoxLayoutApp(App):
    def build(self):
        return BoxLayoutWidget()


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

或者配合kv文件进行布局：

python代码如下

# !/usr/bin/env python3
# -*- coding: utf-8 -*-


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


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


class BoxLayoutTApp(App):
    def build(self):
        return BoxLayoutWidget()


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

kv文件如下：（kv文件创建遵守kv命名规则）

<Button>
    font_size: 50

<BoxLayoutWidget>
    
    canvas:
        Color:
            rgba: [.2, .4, .5, .6]

    Button:
        text: "BT1"
        background_color: 1, 0, 0, 1

    Button:
        text: "BT2"
        background_color: 1, 1, 1, 1

    Button:
        text: "BT3"
        background_color: 0, 1, 0, 1

    Button:
        text: "BT4"
        background_color: 1, 0, 1, 1

    Button:
        text: "BT5"
        background_color: 0, 1, 1, 1

默认BoxLayout排版是纵向排版，若需要改为横向排版则可在KV文件里添加参数orientation: "vertical" 若是使用python实现则可以将实例化BoxLayout时，添加参数BoxLayout(orientation="vertical")

BoxLayout间距

BoxLayout布局中间距有两种形式：

• 布局和子级之间填充是需要使用padding，默认为[0, 0, 0, 0] ,四个参数分别为 [padding_left, padding_top, padding_right, padding_bottom] 从右下脚开始顺时针一一对应。（左，上，右，下）；同时padding还接受两个参数形式[padding_horizontal, padding_vertical] 分别是水平边距和竖直边距；或者一个参数形式[padding]代表周围边距。
• 子级和子级之间填充需要使用spacing, 默认为 0

<Button>
    font_size: 10

<BoxLayoutWidget>
    orientation: "vertical"    # 横向排版
    padding: [10, 20, 30, 40]  # 设置间距
    canvas:
        Color:
            rgba: [.2, .4, .5, .6]

    Button:
        text: "BT1"  # 显示文本，.KV默认是不支持中文
        background_color: 1, 0, 0, 1

    Button:
        text: "BT2"
        background_color: 1, 1, 1, 1
    BoxLayout:
        orientation: "vertical" # 设置间距
        spacing: 20
        Button:
            text: "BT3"
            background_color: 0, 1, 0, 1
    
        Button:
            text: "BT4"
            background_color: 1, 0, 1, 1
    
        Button:
            text: "BT5"
            size_hint_y: .15  # 设置按钮大小
            background_color: 0, 1, 1, 1