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

章节目录与知识点总揽

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]

        运行结果如下：

       

上一篇：ScatterLayout布局

下一篇：​ 动手实践——计时器：基本布局 ​