Kivy基础（二）Layouts Widgets 页面布局部件

Layouts Widgets是Kivy对界面布置进行控制的一些模块方法，相互组合可以快速实现页面布局。

一、AnchorLayout 锚点布局

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.anchorlayout import AnchorLayout

class AnchorApp(App):
    def build(self):
    	#anchor_x水平锚点，接受center，right，left三个位置输入
    	#anchor_y垂直锚点，接受center，top，bottom三个位置输入
        layout=AnchorLayout(anchor_x="center",anchor_y="center")
        btn=Button(text="hello",font_size=100,
        		color=(0,1,0.5,1),background_color=(0.2,0,0.5,1))
        layout.add_widget(btn)#把按钮button添加到锚点
        return layout

if __name__=="__main__":
    AnchorApp().run()

运行结果：

二、BoxLayout 盒式布局

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout

class BoxLayoutApp(App):
    def build(self):
    	#布局方向，vertical纵向布局，horizontal水平布局
        layout=BoxLayout(orientation="vertical")
        #添加小部件，可以添加多个相同或者不同的部件
        btn0=Button(text="hello",font_size=100)
        btn1=Button(text="kivy",font_size=50)
        btn2=Button(text="Cleck",font_size=200)
        #将上面的挂件添加到布局中
        layout.add_widget(btn0)
        layout.add_widget(btn1)
        layout.add_widget(btn2)
        return layout

if __name__=="__main__":
    BoxLayoutApp().run()

运行结果：

三、FloatLayout 浮动弹层

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.scatter import Scatter

class FloatLayoutApp(App):
    def build(self):
    	#创建浮动窗
        layout=FloatLayout()
        #离散点，可以创建多个
        scatter0=Scatter()
        scatter1 = Scatter()
        scatter2 = Scatter()
        #设置Label标签
        btn0=Label(text="hello",font_size=100)
        btn1=Label(text="kivy",font_size=50)
        btn2=Label(text="Cleck",font_size=200)
        #添加离散点到浮动窗
        layout.add_widget(scatter0)
        layout.add_widget(scatter1)
        layout.add_widget(scatter2)
        #添加标签到离散点
        #从上到下，层层堆叠的逻辑顺序
        scatter0.add_widget(btn0)
        scatter1.add_widget(btn1)
        scatter2.add_widget(btn2)
        return layout

if __name__=="__main__":
    FloatLayoutApp().run()

运行结果：
可以对标签进行旋转，缩放，移动

四、GridLayout 网状布局

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.gridlayout import GridLayout

class GridLayoutApp(App):
    def build(self):
    	#建立网格布局
    	#cols表示水平布局容纳的部件个数，超过总部件以后不会再增加网格格数
        layout=GridLayout(cols=2)
        btn=Button(text="hello",font_size=100)
        btn1=Button(text="kivy",font_size=50)
        btn2=Button(text="Cleck",font_size=150)
        btn3 = Button(text="again", font_size=50)
        layout.add_widget(btn)
        layout.add_widget(btn1)
        layout.add_widget(btn2)
        layout.add_widget(btn3)
        return layout

if __name__=="__main__":
    GridLayoutApp().run()

运行结果：
红点表示多点触控（鼠标右击可以添加多个触点）。

五、PageLayout 页状布局

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.pagelayout import PageLayout

class PageLayoutApp(App):
    def build(self):
    	#创建页布局
        layout=PageLayout()
        btn=Button(text="hello",color=(1,1,1,1),font_size=100,background_color=(0,0,0,1))
        btn1=Button(text="kivy",font_size=50,color=(1,0,0,1),background_color=(0,1,0,1))
        btn2=Button(text="Cleck",font_size=200,color=(1,1,0,1),background_color=(1,0,0,1))
        btn3 = Button(text="again", font_size=50,color=(0,0,0,1),background_color=(0,0,1,1))
        layout.add_widget(btn)
        layout.add_widget(btn1)
        layout.add_widget(btn2)
        layout.add_widget(btn3)
        return layout

if __name__=="__main__":
    PageLayoutApp().run()

运行结果：
左右拖动进入前后按钮所在界面，红点表示多点触控（鼠标右击可以添加多个触点）。

六、RelativeLayout 相对布局

它可以给出对每一个小部件操作的时候点击处的相对坐标。

from kivy.app import App
from kivy.uix.relativelayout import RelativeLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.lang import Builder

#用builder加载kv语言编写的脚本
#在脚本中定义相对布局
#on_touch_down表示按下去的时候会产生的动作，这里我们输出坐标
res=Builder.load_string('''BoxLayout:
    Label:
        text:"Left"
    Button:
        text:"Middle"
        on_touch_down:print("middle:{}".format(args[1].pos))
    RelativeLayout:
        on_touch_down:print("Relative:{}".format(args[1].pos))
        Button:
            text:"Right"
            on_touch_down:print("Right:{}".format(args[1].pos))''')

#调用脚本
class RelativeLayoutApp(App):
    def build(self):
        return res

if __name__=="__main__":
    RelativeLayoutApp().run()

运行结果：

七、ScatterLayout 散点布局

可以实现对小部件的旋转、缩放、平移

from kivy.app import App
from kivy.uix.scatterlayout import ScatterLayout
from kivy.uix.label import Label

class ScatterLayoutApp(App):
    def build(self):
        scatter=ScatterLayout()
        l=Label(text="hello",color=(0,1,1,1),font_size=100)
        scatter.add_widget(l)
        return scatter

if __name__=="__main__":
    ScatterLayoutApp().run()

运行结果：
红点表示多点触控（鼠标右击可以添加多个触点）。

八、StackLayout 堆叠布局

from kivy.app import App
from kivy.uix.stacklayout import StackLayout
from kivy.uix.button import Button
from random import random
class StackLayoutApp(App):
	#创建堆叠布局
    def build(self):
        Stack=StackLayout()
        for i in range(50):
        	#width单个按钮的长度，单位是像素
        	#size_hint按钮长宽，有width，长就可以写为None，取值范围为0-1
        	#color标签字体颜色
        	#background_color按钮背景颜色
            btn=Button(text=str(i),width=100,size_hint=(None,0.15),
                       color=(0,0,0,1),
                       background_color=(0.5,random(),random(),1))
            #添加到堆叠层
            Stack.add_widget(btn)
        return Stack

if __name__=="__main__":
    StackLayoutApp().run()

运行结果：
红点表示多点触控（鼠标右击可以添加多个触点）。

九、总结

kivy提供的这些布局基本可以满足创建一个简单的app，接下来我可能会提供几个组合案例，供大家参考。