kivy八種布局方式學習

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

以上每種布局都有代碼示例，多對代碼進行調試修改，將會更有心得。

因有同學問到我的kivy學習資料里支持中文的方法是怎么解決的，我將解決中文的方法鏈接貼在這里，大家去照着做就可以了，很簡單點擊這個鏈接進入：kivy全局中文支持最簡單的解決方法。