【Kivy】布局 FloatLayout、BoxLayout [學習分享]（二）

本篇文章只是個人學習的時候的一些筆記，如果有什么錯誤的地方還請各位勿噴，手下留情，期待您的指正，
定期會更新文章到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