本篇文章只是个人学习的时候的一些笔记,如果有什么错误的地方还请各位勿喷,手下留情,期待您的指正。
定期会更新文章到www.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实现如下:
# !/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’方式布局长度递增。
# !/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
参见的属性,就不做例子进行解释了。如果是按照前面一步步看过来的,也能很快理解意思。