kivy八種佈局:FloatLayout、BoxLayout、AnchorLayout、GridLayout、PageLayout、RelativeLayout、ScatterLayout、StackLayout。
FloatLayout:浮動佈局,它允許將子部件通過位置引數(pos_hint)和尺寸引數(size_hint)放置在視窗的任意位置.我們用此佈局可按視窗大小高度來放置小部件,並且當在不同解析度的移動裝置中,視窗的大小改變時,放置在視窗內的小部件也會相應的調整大小與位置,而不會產生因視窗的大小變化而使佈局亂成一團。
from kivy.app import App #匯入kivy的app類,它是所有kivy應用的基類
from kivy.uix.button import Button #引入控制元件
from kivy.uix.floatlayout import FloatLayout #引入佈局
from kivy.graphics import Rectangle,Color class FloatLayoutApp(App): #繼承app類
def build(self): #實現app類的build()方法
def update_rect(layout,*args):
#設定背景尺寸,可忽略
layout.rect.pos=layout.pos
layout.rect.size=layout.size float_layout=FloatLayout() #設定背景顏色(可忽略)
with float_layout.canvas:
Color(1,1,1,1)
float_layout.rect=Rectangle(pos=float_layout.pos,size=float_layout.size)
float_layout.bind(pos=update_rect,size=update_rect) #在佈局內的【300,200】處新增一個尺寸為0.3,0.2的按鈕
button=Button(text='FloatLayout',size_hint=(.3,.2),pos=(300,200))
#這裡的pos引數不會因視窗改變而改變位置,這個是固定位置,要隨視窗變化而動態變化的要用pos_hint #將按鈕新增到佈局內
float_layout.add_widget(button)
#返回佈局
return float_layout if __name__=='__main__': #程式入口
FloatLayoutApp().run() #啟動應用程式
BoxLayout:盒子佈局,是可以將子部件水平或垂直進行排列的佈局,類似Android中的線性佈局,如果不設定任何大小,子部件將會以10px的間距平分父視窗的大小。
from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
from kivy.graphics import Rectangle,Color 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) self.add_widget(Button(text='hello'))
self.add_widget(Button(text='BoxLayout')) def update_rect(self,*args):
#設定背景尺寸,可忽略
self.rect.pos=self.pos
self.rect.size=self.size class BoxApp(App):
def build(self):
return BoxLayoutWidget() if __name__ =='__main__':
BoxApp().run()
AnchorLayout:錨點佈局,此佈局可以將子部件放置在左上、上中、右上、左中、正中,右中、左下,下中,右下共9個位置處。
from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.button import Button
from kivy.graphics import Rectangle,Color class AnchorLayoutWidget(AnchorLayout):
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) #巢狀第一個佈局
anchor_first=AnchorLayout(anchor_x='left',anchor_y='top')
#新增按鈕
anchor_first.add_widget(Button(text='hello',size_hint=[.3,.2],background_color=[0,1,1,1]))
anchor_first.add_widget(Button(text='hello1',size_hint=[.3,.2],background_color=[1,0,1,1])) #巢狀第二個佈局
anchor_second=AnchorLayout(anchor_x='right',anchor_y='bottom')
#新增按鈕
anchor_second.add_widget(Button(text='anchor',size_hint=[.3,.2])) #新增到父佈局中
self.add_widget(anchor_first)
self.add_widget(anchor_second) def update_rect(self,*args):
#設定背景尺寸
self.rect.pos=self.pos
self.rect.size=self.size class AnchorApp(App):
def build(self):
return AnchorLayoutWidget() if __name__ =='__main__':
AnchorApp().run()
GridLayout:網格佈局,使用此佈局可以將子部件排列成多行多列的矩陣佈局。當設定了列數cols或者行數rows後,子部件大小尺寸與子部件個數多少發生變化時,此佈局會根據該值進行擴充套件,但不會超過界限值。
from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
from kivy.graphics import Rectangle,Color class GridLayoutWidget(GridLayout):
def __init__(self,**kwargs):
super(GridLayoutWidget, 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) self.padding = 20
self.spacing = 20 self.cols=3
for i in range(6):
btn=Button(text=str(i),background_color=[0,1,1,1],size_hint=[.3,.2]) self.add_widget(btn) def update_rect(self,*args):
self.rect.pos=self.pos
self.rect.size=self.size class GridApp(App):
def build(self):
return GridLayoutWidget() if __name__ == '__main__':
GridApp().run()
PageLayout:與其它佈局不司,這是個多頁動態佈局。此佈局可以在視窗內建立多個頁面的佈局,這些頁面可以翻轉,每個頁面子部件均可作為單獨的視窗頁面進行開發。
from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.pagelayout import PageLayout
class PageLayoutWidget(PageLayout):
def __init__(self,**kwargs):
super(PageLayoutWidget, self).__init__(**kwargs)
bt0=Button(text='bt0',background_color=[.3,.9,.3,1])
bt1=Button(text='bt1',background_color=[.9,.3,.3,1])
self.add_widget(bt0)
self.add_widget(bt1)
class PageApp(App):
def build(self):
return PageLayoutWidget()
if __name__ =='__main__':
PageApp().run()
RelativeLayout:相對佈局,與FloatLayout基本一致,但它定位屬性x、center_x、right、y、center_y、top是相對於上級父佈局大小而言的,不是針對視窗的大小。
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,Color class MyButton(Button): #自定義控制元件類
#自定義一個按鈕,提出公共屬性
def __init__(self,**kwargs):
super(MyButton, self).__init__(**kwargs) self.font_size=20
self.size_hint=[0.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) #建立一個RelativeLayout佈局
relative_layout=RelativeLayoutWidget() #使用自定義按鈕
bt0=MyButton(text='按鈕0',pos_hint={'right':1,'top':1},background_color=(.1,.5,.6,1))
bt1=MyButton(text='按鈕1',pos_hint={'x':0,'top':1},background_color=(1,0,0,1))
bt_relative=MyButton(text='按鈕relative',pos_hint={'center_x':0.5,'center_y':0.5},background_color=(.4,.5,.6,1))
bt2=MyButton(text='按鈕2',pos_hint={'x':0,'y':0},background_color=(0,0,1,1))
bt3=MyButton(text='按鈕3',pos_hint={'right':1,'y':0},background_color=(.8,.9,.2,1)) #向RelativeLayout佈局內迴圈新增元素
for i in [bt0,bt1,bt_relative,bt2,bt3]:
relative_layout.add_widget(i) #放一個空的BoxLayout佔位
self.add_widget(BoxLayout())
#將RelativeLayout新增到佈局中
self.add_widget(relative_layout) def update_rect(self,*args):
#設定背景尺寸,可忽略
self.rect.pos=self.pos
self.rect.size=self.size class RelativeApp(App):
def build(self):
return BoxLayoutWidget() if __name__ =='__main__':
RelativeApp().run()
ScatterLayout:分散佈局,與RelativeLayout類似。當佈局更改位置時,佈局內的小部件也會跟著父佈局一起變動,並且子部件的位置及大小會相對於父佈局自動調整,並且此佈局還可以進行平移、旋轉、縮放佈局。
from kivy.app import App
from kivy.uix.image import AsyncImage
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.scatterlayout import ScatterLayout
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) #建立一個ScatterLayout佈局
scatter_layout=ScatterLayoutWidget()
#非同步載入圖片
image=AsyncImage(source='https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png') #http://sck.rjkflm.com/images/logo1.png
#將圖片新增到ScatterLayout佈局中
scatter_layout.add_widget(image)
#將ScatterLayout佈局巢狀在BoxLayout佈局中
self.add_widget(scatter_layout) def update_rect(self,*args):
#設定背景尺寸,可忽略
self.rect.pos=self.pos
self.rect.size=self.size class ScatterApp(App):
def build(self):
return BoxLayoutWidget() if __name__ =='__main__':
ScatterApp().run()
StackLayout:堆疊佈局,在此佈局中,可以進行垂直或水平的排列子部件,並且各個小部件可以不必相同,排列的方向由orientation屬性進行指定。
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(StackLayoutWidget, 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) #遍歷新增按鈕
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()
以上每種佈局都有程式碼示例,多對程式碼進行除錯修改,將會更有心得。