Kivy基礎(chǔ)筆記

• 環(huán)境配置
• • 安裝Virtualenv
  • 安裝Kivy
• 大小與位置
• • 大小
  • 位置
• 八大布局
• • FloatLayout布局
  • BoxLayout布局
  • AnchorLayout布局
  • GridLayout布局
  • PageLayout布局
  • RelativeLayout布局
  • ScatterLayout布局

環(huán)境配置

安裝Virtualenv

打開CMD

安裝virtualenv

pip install virtualenv

切換目錄
切換到你的工作位置

創(chuàng)建虛擬環(huán)境

virtualenv kv-demo-env

kv-demo-env是解釋器

為編譯器設(shè)置虛擬環(huán)境解釋器

安裝Kivy

(如需版本更替,只需將對應(yīng)依賴項(xiàng)版本號(hào)更改為所需版本號(hào)即可)
安裝依賴項(xiàng)

python -m pip install docutils pygments pypiwin32 kivy_deps.sdl2==0.1.22 kivy_deps.glew==0.1.12

安裝gstreamer

python -m pip install kivy_deps.gstreamer==0.1.17

安裝angle

python -m pip install kivy_deps.angle==0.1.9

安裝Kivy

python -m pip install kivy==2.0.0

安裝示例

python -m pip install kivy_examples=1.11.1

大小與位置

大小

size_hint的值(0~1),可以將控件的大小設(shè)置為當(dāng)前窗口的比值

size用于將一個(gè)控件的大小固定,所以需要width,height的值
(注: 使用時(shí)需要將size_hint設(shè)置為[None,None])

位置

pos_hint可以將位置以一個(gè)字典比值(0~1)來設(shè)置(以窗口左下角作為起點(diǎn)(0,0)).
控件有三條線左邊界x線,正中間center_x線,右邊界right線,
y軸有上邊界top線,正中間center_y線,下邊界y線,
x,y線可以隨意組合
如:pos_hint:{‘center_x’:0.5, ‘y’:0.7}

pos以對應(yīng)數(shù)值(x,y)在當(dāng)前窗口內(nèi)尋找對應(yīng)的點(diǎn)

八大布局

布局通用屬性

屬性說明值

padding	布局與子控件之間各方向填充值	[value, value, value, value]
spacing	子控件與子控件之間填充值	Value
boder	可以指定邊界大小	Value
col_force_default	是否強(qiáng)制使用默認(rèn)列寬	Bool
col_default_width	設(shè)置默認(rèn)列寬	Value
row_force_default	是否強(qiáng)制使用默認(rèn)行高	Bool
row_default_width	設(shè)置默認(rèn)行高	Value

FloatLayout布局

作為浮動(dòng)布局,它允許子部件以位置和尺寸放在窗口的隨意位置,其優(yōu)點(diǎn)是可以跟隨設(shè)置分辨率自動(dòng)調(diào)整大小,不會(huì)使你的布局看起來亂七八糟.

代碼示例:

py文件

from kivy.app import Appfrom kivy.uix.floatlayout import FloatLayoutclass FloatLayoutWidget(FloatLayout):def __init__(self, **kwargs):super().__init__(**kwargs)class FloatApp(App):def build(self):return FloatLayoutWidget()if __name__ == "__main__":FloatApp().run()

kv文件:

<BoxLayoutWidget>:Button:text:'bt0'background_color:0,1,1,1font_size:40Button:text:'bt1'background_color:0,1,0,1font_size:35Button:text:'bt2'background_color:0,0,1,1font_size:30Button:text:'bt3'background_color:1,0,1,1font_size:25Button:text:'bt4'background_color:1,0,0,1font_size:20

BoxLayout布局

盒子布局,可以(使用orientation)將子控件排版成水平排列(horizental)或垂直排列(vertical)的布局,如不設(shè)置任何大小,子控件會(huì)以10像素的間距平分父控件

padding與spacing適用所有布局

布局與子控件之間填充需使用padding,默認(rèn)為[0,0,0,0]
子級(jí)和子級(jí)之間填充需使用spacing,默認(rèn)為0

代碼示例:

py文件:

from kivy.app import App from kivy.uix.boxlayout import BoxLayoutclass BoxLayoutWidget(BoxLayout):def __init__(self,**kwargs):super().__init__(**kwargs)class BoxApp(App):def build(self):return BoxLayoutWidget()if __name__=="__main__":BoxApp().run()

kv文件:

<BoxLayoutWidget>:orientation:'vertical'padding:[10,40,40,30]Button:text:'bt0'background_color:0,1,1,1font_size:40Button:text:'bt1'background_color:0,1,0,1font_size:35Button:text:'bt2'background_color:0,0,1,1font_size:30BoxLayout:orientation:'vertical'spacing:20Button:text:'bt3'background_color:1,0,1,1font_size:20Button:text:'bt4'background_color:1,0,0,1font_size:20

AnchorLayout布局

錨點(diǎn)布局,可以(使用anchor_x和anchor_y設(shè)置位置)將子控件設(shè)置在
左上 中上 右上
左 中間 右
左下 中下 右下
九個(gè)位置上,注意:當(dāng)設(shè)置位置后,同時(shí)添加兩個(gè)子控件,會(huì)使兩個(gè)子控件疊在一起

代碼示例:

py文件:

from kivy.app import App from kivy.uix.anchorlayout import AnchorLayoutclass AnchorLayoutWidget(AnchorLayout):def __init__(self, **kwargs):super().__init__(**kwargs)class AnchorApp(App):def build(self):return AnchorLayoutWidget()if __name__ == "__main__":AnchorApp().run()

kv文件:

<AnchorLayoutWidget>:AnchorLayout:anchor_x:'right'anchor_y:'top'Button:text:'right and top'size_hint:.2,.2AnchorLayout:anchor_x:'left'anchor_y:'bottom'Button:text:'left and bottom'size_hint:.2,.2

GridLayout布局

網(wǎng)格布局

,可以(使用列cols和行rows)將子控件設(shè)置成多行多列的矩陣,
注意:如果你不單一設(shè)置大小它們會(huì)很整齊

代碼示例:

py文件:

from kivy.app import App from kivy.uix.gridlayout import GridLayoutclass GridLayoutWidget(GridLayout):def __init__(self, **kwargs):super().__init__(**kwargs)class GridApp(App):def build(self):return GridLayoutWidget()if __name__=='__main__':GridApp().run()

kv文件:

<GridLayout>:padding:30spacing:30 # 可以將cols或rows的值修改查看效果cols:3col_force_default:Truecol_default_width:120row_force_default:Truerow_default_width:40 Button:text:'1'size_hint_x:Nonewidth:100pxButton:text:'2'Button:text:'3' Button:text:'4'

PageLayout布局

分頁布局,該布局的每個(gè)子控件都視為一個(gè)單獨(dú)的界面,所以不支持使用size_hint和pos_hint
使用page可以設(shè)置默認(rèn)先顯示哪一頁
swipe_threshold設(shè)置翻頁靈敏度
anim_kwargs設(shè)置翻頁動(dòng)畫和持續(xù)時(shí)間

border可以指定兩邊邊界大小,默認(rèn)50dp

代碼示例：

py文件:

from kivy.app import App from kivy.uix.pagelayout import PageLayoutclass PageLayoutWidget(PageLayout):def __init__(self, **kwargs):super().__init__(**kwargs)class PageApp(App):def build(self):return PageLayoutWidget()if __name__=='__main__':PageApp().run()

kv文件：

<PageLayoutWidget>:anim_kwargs:{'d':10,'t':'linear'}page:2border:'100dp'swipe_threshold:.8BoxLayout:Button:text:'page 1'background_color:(0.3,0.3,0.3,1)BoxLayout:Button:text:'page 2'background_color:(.9,.3,.3,1)BoxLayout:Button:text:'page 3'background_color:(.3,.9,.3,1)BoxLayout:Button:text:'page 4'background_color:(.3,.3,.9,1)

RelativeLayout布局

相對布局，它的定位屬(x,y,conter_x.conter_y,right,top)性是相對于父控件的大小，而不是窗口大小
注：RelativeLayout不可以直接作為窗口創(chuàng)建

代碼示例：
為了展示新技巧，單獨(dú)使用py完成
py文件:

from kivy.app import App from kivy.uix.button import Button from kivy.uix.relativelayout import RelativeLayout from kivy.uix.boxlayout import BoxLayout from kivy,graphics import Rectangle,Colorclass MyButton(Button):def __init__(self,**kwargs)super().__init__(**kwargs)self.font_size = 20self.size_hint = [0.2,.2]class BoxLayoutWidget(BoxLayout):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)relative = RelativeLayout()bt0 = MyButton(text='bt0',pos_hint={'right':1, 'top':1},background_color=(.2,.5,.4,1))bt1 = MyButton(text='bt1',pos_hint={'x':0,'top':1},background_color=(.5,.3,.2,1))bt2 = MyButton(text='bt2',pos_hint={'center_x':.5,'center_y':.5},background_color=(.4,.2,.2,1))bt3 = MyButton(text='bt3',pos_hint={'x':0,'y':0},background_color=(.8,.7,.2,1))bt4 = MyButton(text='bt4',pos_hint={'right':1,'y':0},background_color=(.4,.9,.3,1))for i in [bt0,bt1,bt2,bt3,bt4]:relative.add_widget(i)self.add_widget(BoxLayout())self.add_widget(relative)def update_rect(self,*args):self.rect.pos = self.posself.rect.size = self.sizeclass RelativeApp(App):def build(self):return BoxLayoutWidget()if __name__ == '__main__':RelativeApp().run()

ScatterLayout布局

未完待續(xù)…
下班
有沒有一起學(xué)的

總結(jié)

以上是生活随笔為你收集整理的【个人kivy学习笔记】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。