本篇文章只是个人学习的时候的一些笔记,如果有什么错误的地方还请各位勿喷,手下留情,期待您的指正。
定期会更新文章到www.sea-whales.cn我的个人网站中,有兴趣的小伙伴可以进来看看、
PageLayout 布局
PageLayou布局和前面几种布局方式是有差异的,他更倾向与动态布局,使用这个布局可以创建一个简单的多页面布局。可以在这些布局之间随意跳转,此布局每个子部件都作为一个单独的页面,所以此布局并不支持size_hint
和pos_hint
:
例如如下:
会生成一个可以自由左右拉的按钮。
# !/usr/bin/env python3
# -*- coding: utf-8 -*-
from kivy.uix.pagelayout import PageLayout
from kivy.app import App
from kivy.uix.button import Button
class PageLayoutWidget(PageLayout):
def __init__(self, **kwargs):
super(PageLayoutWidget, self).__init__()
btn = Button(text='btn1', background_color=[0.3,.9,.2,1])
btn2 = Button(text='btn2', background_color=[.1,.5,.4,1])
self.add_widget(btn)
self.add_widget(btn2)
class PageLayoutPyApp(App):
def build(self):
return PageLayoutWidget()
if __name__ == '__main__':
PageLayoutPyApp().run()
KV实现布局
# pagelayout.kv
<PageLayoutWidget>
border: '100dp' # 设置边界,如果不设置默认为50dp
Button:
text:'Page0'
background_color: 0.3, .2, .5, 1
Button:
text:'Page1'
background_color: 0.4, .4, .6, 1
Button:
text:'Page2'
background_color: 0.6, .6, .8, 1
Button:
text:'Page3'
background_color: 0.8, .8, 1, 1
Python配合
# !/usr/bin/env python3
# -*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.pagelayout import PageLayout
class PageLayoutWidget(PageLayout):
def __init__(self):
super(PageLayoutWidget, self).__init__()
class PageLayoutApp(App):
def build(self):
return PageLayoutWidget()
if __name__ == '__main__':
PageLayoutApp().run()
PageLayout布局基本属性
border
: 指定两边边界大小,如果我们没有指定的话默认是50dp
.前面的kv中也对这进行写入,测试时可以将对应行去掉后进行测试。page
: 设置默认显示哪一页、swipe_threshold
: 设置翻页灵敏度 例如:swipe_threshold: .8
anim_kwargs
: 属性设置’t‘翻页动画和’d‘持续时间,例如:anim_kwargs: {'d':10, 't': 'linear'}
。 这边t中有哪些参数暂时不做过多说明,后期会细说。
可以尝试下,当以上属性都设置了,页面之间切换的动画被延长到10秒了,并且翻页的灵敏度也要滑动到80%时以上才会被判定为翻页的动作。
RelativeLayout布局
相对布局,此布局的操作方式与前面的FloatLayout基本是相同的,只是在定位的时候我们使用的x,center_x,right,y,center_y,top
这些属性是想对于他的父布局的,而不是相对于窗口。
其实任何布局,当布局的位置属性更改时,小部件都会移动。
接下来我们看看如何初始化一个RelativeLayou布局。
老样子,使用python代码和kv代码文件两种方式实现。
# !/usr/bin/env python3
# -*- coding: utf-8 -*-
from kivy.uix.relativelayout import RelativeLayout
from kivy.uix.button import Button
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.graphics import Color, Rectangle
class MyButton(Button):
# 自定义按钮属性,将公共属性提出来
def __init__(self, **kwargs):
super(MyButton, self).__init__(**kwargs)
self.font_size = 20
self.size_hint = [.2, .2]
class RelativelayoutWidget(RelativeLayout):
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)
box_relative = RelativelayoutWidget()
btn1 = MyButton(text='btn1', pos_hint={'right': 1, 'top': 1}, background_color=(.1, .2, .3, 1))
btn2 = MyButton(text='btn2', pos_hint={'x': 0, 'top': 1}, background_color=(.1, .2, .3, 1))
RelativeBtn3 = MyButton(text='RelativeBtn3', pos_hint={'center_x': .5, 'center_y': .5},
background_color=(.1, .2, .3, 1))
RelativeBtn4 = MyButton(text='RelativeBtn4', pos_hint={'x': 0, 'y': 0}, background_color=(.1, .2, .3, 1))
RelativeBtn5 = MyButton(text='RelativeBtn5', pos_hint={'right': 1, 'y': 0},
background_color=(.1, .2, .3, 1))
for i in [btn1, btn2, RelativeBtn3, RelativeBtn4, RelativeBtn5]:
box_relative.add_widget(i)
self.add_widget(BoxLayout())
self.add_widget(box_relative)
def update_rect(self, *args):
# 设置背景尺寸, 可忽略
self.rect.pos = self.pos
self.rect.size = self.size
class RelativeLayoutApp(App):
def build(self):
return BoxLayoutWidget()
if __name__ == '__main__':
RelativeLayoutApp().run()
以上代码运行后,会出现半边是空白,另外半边是有在四个角落和中间五个按钮,那是因为我们把按钮在第42行的时候,全部加在了Relativelayout
布局内了,然后右边放空一个BoxLayout
布局进行占位,不加任何控件,因为Relativelayout
布局里面的控件是按照Relativelayout
布局的位置和大小进行定位的,并非按照我们最开始初始化的大的那个BoxLayout
布局进行定位的,所以里面的控件都是相对于Relativelayout
布局的位置进行放置。
接下一样,我们用kv文件配合python 的方式去实现上面的样子。
# !/usr/bin/env python3
# -*- coding: utf-8 -*-
from kivy.uix.boxlayout import BoxLayout
from kivy.app import App
class BoxLayoutWidget(BoxLayout):
def __init__(self, **kwargs):
super(BoxLayoutWidget, self).__init__(**kwargs)
class RelativeLayoutApp(App):
def build(self):
return BoxLayoutWidget()
if __name__ == '__main__':
RelativeLayoutApp().run()
kv代码
<Button>
font_size:20
size_hint: .2,.3
<BoxLayoutWidget>
canvas:
Color:
rgba: 1,1,1,1
Rectangle:
size: self.size
pos: self.pos
BoxLayout:
RelativeLayout:
Button:
text:"btn1"
background_color: .1,.2,.3,1
pos_hint:{'right':1, 'top':1}
Button:
text:"btn2"
background_color: .1,.2,.3,1
pos_hint:{'x': 0, 'top': 1}
Button:
text:"RelativeBtn3"
background_color: .1,.2,.3,1
pos_hint:{'center_x': .5, 'center_y': .5}
Button:
text:"RelativeBtn4"
background_color: .1,.2,.3,1
pos_hint:{'x': 0, 'y': 0}
Button:
text:"RelativeBtn5"
background_color: .1,.2,.3,1
pos_hint:{'right': 1, 'y': 0}