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

以上每种布局都有代码示例，多对代码进行调试修改，将会更有心得。