Kivy基礎筆記

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

環境配置

安裝Virtualenv

打開CMD

安裝virtualenv

pip install virtualenv

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

創建虛擬環境

virtualenv kv-demo-env

kv-demo-env是解釋器

為編譯器設置虛擬環境解釋器

安裝Kivy

(如需版本更替,只需將對應依賴項版本號更改為所需版本號即可)
安裝依賴項

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),可以將控件的大小設置為當前窗口的比值

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

位置

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

pos以對應數值(x,y)在當前窗口內尋找對應的點

八大布局

布局通用屬性

屬性說明值

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

FloatLayout布局

作為浮動布局,它允許子部件以位置和尺寸放在窗口的隨意位置,其優點是可以跟隨設置分辨率自動調整大小,不會使你的布局看起來亂七八糟.

代碼示例:

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)的布局,如不設置任何大小,子控件會以10像素的間距平分父控件

padding與spacing適用所有布局

布局與子控件之間填充需使用padding,默認為[0,0,0,0]
子級和子級之間填充需使用spacing,默認為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布局

錨點布局,可以(使用anchor_x和anchor_y設置位置)將子控件設置在
左上 中上 右上
左 中間 右
左下 中下 右下
九個位置上,注意:當設置位置后,同時添加兩個子控件,會使兩個子控件疊在一起

代碼示例:

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布局

網格布局

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

代碼示例:

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布局

分頁布局,該布局的每個子控件都視為一個單獨的界面,所以不支持使用size_hint和pos_hint
使用page可以設置默認先顯示哪一頁
swipe_threshold設置翻頁靈敏度
anim_kwargs設置翻頁動畫和持續時間

border可以指定兩邊邊界大小,默認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不可以直接作為窗口創建

代碼示例：
為了展示新技巧，單獨使用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布局

未完待續…
下班
有沒有一起學的

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。