《Python+Kivy(App开发)从入门到实践》自学笔记：StackLayout布局

静候光阴

已于 2023-08-12 20:24:32 修改

阅读量611

点赞数

分类专栏： Kivy基本使用学习专栏文章标签： python 前端 1024程序员节

于 2022-10-20 10:38:44 首次发布

本文链接：https://blog.csdn.net/lstef/article/details/127421638

版权

Kivy基本使用学习专栏专栏收录该内容

64 篇文章 69 订阅

订阅专栏

章节目录与知识点总揽

2.9 StackLayout布局

StackLayout布局——堆栈布局

在此布局中，只要不超过布局的范围，就可以进行垂直或水平地排列子项，且各个小部件的大小可以不必相同。StackLayout布局可以通过orentation属性制定布局方向。默认为“lr-tb”。

解释：

l、r、t、b都为单词首字母：

l ——left 表示左

r ——right 表示右

t ——top 表示上

b ——bottom 表示下

‘lr’表示从左到右，'rl'表示从右到左；‘tb’表示自上到下，'bt'表示自下而上。因此orientation属性共有8个属性：

按行排列：‘lr-tb’、‘lr-bt’、‘rl-tb’、‘rl-bt’；

按列排列：‘tb-lr’、‘bt-lr’、‘tb-rl’、‘bt-rl’。

2.9.1 使用步骤

１．新建一个main.py文件。

２．导入App类以及相关的包，例如：StackLayout、Button

３．创建一个类让它继承App类。

４．在该类内实现build()方法

５．编写具体的布局或布局类，让其继承StackLayout类。

６．在build()方法结尾返回具体的布局或布局类。

７．通过run()方法运行实例。

2.9.2 在py内引用StackLayout布局

新建main.py文件，使用for循环生成25个按钮，内容如下：

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


class StackLayoutWidget(StackLayout):
    def __init__(self,**kwargs):
        super().__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)

        #自动生成25个按钮，分别以0-24命名，每一个按钮间隔5
        for i in range(25):
            btn = Button(text=str(i),width=40+i*5,size_hint=(None,0.15))
            self.add_widget(btn)

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

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


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

运行main.py，一次排列生成了25个按钮，结果如下图：

2.9.3 在kv内使用StackLayout布局

更改main.py文件内容如下：

from kivy.app import App
from kivy.uix.stacklayout import StackLayout


class StackLayoutWidget(StackLayout):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)

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

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

根据StackApp类名，新建一个stack.kv文件，内容如下：

<StackLayoutWidget>:
	orientation:'lr-tb'

	canvas:
		Color:
			rgba:[1,1,1,1]
		Rectangle:
			size:self.size
			pos:self.pos
	Button:
		text:'B1'
		size_hint:[.2,.1]
	Button:
		text:'B2'
		size_hint:[.2,.1]
	Button:
		text:'B3'
		size_hint:[.2,.1]
	Button:
		text:'B4'
		size_hint:[.2,.1]
	Button:
		text:'B5'
		size_hint:[.2,.1]
	Button:
		text:'B6'
		size_hint:[.2,.1]
	Button:
		text:'B7'
		size_hint:[.2,.1]
	Button:
		text:'B8'
		size_hint:[.2,.1]
	Button:
		text:'B9'
		size_hint:[.2,.1]

运行结果如下图：

2.9.4 布局的基本属性

除去布局方向orientation外，StackLayout还可以使用padding和spacing属性来控制布局和部件、部件和部件之间的距离。StackLayout布局还会根据子部件来自动设置一些属性，例如：minimum_height最低高度、minimum_width最小宽度、minimum_size最小尺寸(同时设置最低高度和最小宽度)

padding属性可以接受以下三种参属形式：

        [padding_left,padding_top,padidng_right,padidng_bottom],例如默认的[0,0,0,0]，分别代表着与左、上、右、下四个方向的边距都为0。
        [padding_horizontl,padding_vertical]分别代表水平和垂直两个方向的间距。
        [padding]代表四周的间距

Spacing属性可以接受以下两种参数形式：
[spacing_horizontal,spacing_vertical]分表代表水平和垂直两个方向的间距。
[spacing]代表四周的间距。

在stack.kv文件中加入spacing和padding属性，具体代码如下：

<StackLayoutWidget>:
	orientation:'lr-tb'

	padding:[20,10]
	spacing:[20,10]

	canvas:
		Color:
			rgba:[1,1,1,1]
		Rectangle:
			size:self.size
			pos:self.pos
	Button:
		text:'B1'
		size_hint:[.2,.1]
	Button:
		text:'B2'
		size_hint:[.2,.1]
	Button:
		text:'B3'
		size_hint:[.2,.1]
	Button:
		text:'B4'
		size_hint:[.2,.1]
	Button:
		text:'B5'
		size_hint:[.2,.1]
	Button:
		text:'B6'
		size_hint:[.2,.1]
	Button:
		text:'B7'
		size_hint:[.2,.1]
	Button:
		text:'B8'
		size_hint:[.2,.1]
	Button:
		text:'B9'
		size_hint:[.2,.1]

运行结果如下：