kivy八種佈局方式學習

michaelxguo發表於2021-08-09

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()

以上每種佈局都有程式碼示例，多對程式碼進行除錯修改，將會更有心得。

相關文章