【Kivy】布局 ScatterLayout 、StackLayout [学习分享]（五）

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

ScatterLayout 分散布局

ScatterLayout布局与RelativeLayout布局相似，当变更位置的时候，布局内的小部件也会随着父布局一起相对更改，因为这个布局主要由Scatter小部件实现，所以是可以实现自由的平移，旋转，缩放等布局的。我们来看下，使用Python是如何实现的。


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

from kivy.uix.boxlayout import BoxLayout
from kivy.app import App
from kivy.uix.scatterlayout import ScatterLayout
from kivy.uix.image import AsyncImage
from kivy.graphics import Rectangle, Color


class ScatterLayoutWidget(ScatterLayout):
    pass


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

        with self.canvas:
            Color(1, 1, 1, 1)
            self.rect = Rectangle(pos=self.pos, size=self.size)
            self.bind(pos=self.update_rect, size=self.update_rect)

        scatter_layout = ScatterLayoutWidget()

        image = AsyncImage(source='https://blogcdn.sea-whales.cn/blog/typecho/11.jpg')

        scatter_layout.add_widget(image)

        self.add_widget(scatter_layout)

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


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


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

运行以上python代码，将会出现一个图片，且在窗体中间加载，我们可以使用鼠标单击图片，模拟手指点击进行图片的拖动和缩放、旋转操作。

kv配合python实现如下：

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 ScatterLayoutApp(App):
    def build(self):
        return BoxLayoutWidget()


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

kv文件


<BoxLayoutWidget>
    canvas:
        Color:
            rgba: 1,1,1,1

    ScatterLayout:
        AsyncImage:
            source: 'https://blogcdn.sea-whales.cn/blog/typecho/11.jpg'

    ScatterLayout:
        Image:
            source: 'scatter_image.jpg'

StackLayout 堆栈布局

堆栈布局中只要不超过布局的范围，就可以进行垂直或者水平的排列子项，并且各个小部件的大小可以不需要相同，StackLayout布局可以通过orientation属性进行指定布局方向，默认值为lr-tb。我们看看堆栈排列有哪些排序排列。

按行排列：lr-tb,lr-bt,rl-tb,rl-bt
按列排序：tb-lr,bt-lr,tb-rl,bt-rl

我们看看上面的l、r、t、b 分别代表什么。

l 代表的是'left'的缩写，代表左
r 代表的是'right'的缩写，代表右
t 代表的是'top'的缩写，代表上
b 代表的是'bottom'的缩写，代表下

那么我们就可以将'lr'理解为从左到右，'tb'理解为从上到下，以此类推。 'lr-tb'可以看成先按行从左到右，当前窗口行满后再按列从上到下，那么'tb-lr'则可以看成先按列从上到下，当前窗口列满后，按从左到右排列。其他方式，以此类推。

接下来我们来写一个'lr-tb'排列，不同大小的布局，且按照'lr-tb'方式布局长度递增。

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


from kivy.uix.button import Button
from kivy.uix.stacklayout import StackLayout
from kivy.app import App
from kivy.graphics import Rectangle, Color


class StackLayoutWidget(StackLayout):
    def __init__(self, **kwargs):
        self.orientation = 'lr-tb'

        super(StackLayoutWidget, self).__init__(**kwargs)

        with self.canvas:
            Color(1, 1, 1, 1)  # 设置底色为白色

            self.rect = Rectangle(size=self.size, pos=self.pos)
            self.bind(size=self.update_rect, pos=self.update_rect)

        for i in range(30):
            # 将按钮的高度控制在20%，长度初始为50，随着按钮越多按钮越大递增。
            btn = Button(text=f'Btn_f{i}', width=50 + i * 8, size_hint=(None, 0.20))  
            self.add_widget(btn)

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


class StackLayoutApp(App):
    def build(self):
        return StackLayoutWidget()


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

前面已经写了很多从Python 文件改为Python和kv文件配合的情况了，这个我就不单独写了。我们来看看StackLayout有哪些属性。

orientation: 前面我们说过，这个属性是用于决定布局内子部件的排列方式，也说明了具体有哪些属性。
padding：这个属性有看前面的也不陌生，是用于控制布局和部件之间的间距的参数。接受的是一个list,可以是四个和两个和一个。四个时分别是[padding_left, padding_top, padding_right, padding_bottom] 左、上、右、下。两个时分别是[padding_horizontal,padding_vertical] 水平、垂直两个方向。一个时代表控件四个方向的间距。他们的默认值都为0
spacing: 这属性和前面的属性也是一样的用于控制部件和部件之间间距。他可以接受两个和一个参数，也是list。不同数量参数和padding表示的一致。

以上三个参数StackLayout常用的属性，还有几个就是布局会根据子部件自动设置一些属性。我们来看下分别是哪些（顾名思义即可）：

minimum_height：最低高度。
minimum_width: 最小宽度
minimum_size：最小尺寸（可同时设置最低高度和最小宽度）

以上就是StackLayout参见的属性，就不做例子进行解释了。如果是按照前面一步步看过来的，也能很快理解意思。

目录

ScatterLayout 分散布局

StackLayout 堆栈布局