Python Kivy学习笔记2 – 布局

Kivy的布局

Kivy的布局可以简单理解为：屏幕（Screen） – 布局（Layouts） – 控件（Widgets）

屏幕控制各种屏幕之间的切换。

布局定义各种控件的摆放方式，布局包括：

• Anchor Layout（锚点布局）
• Box Layout（盒子布局）
• Float Layout（浮动布局）
• Grid Layout（网格布局）
• PageLayout（页面布局）
• Relative Layout（相对布局）
• Scatter Layout（分散布局）
• Stack Layout（堆栈布局）

控件就是各种功能组件，构成APP界面和各种功能，控件包括：

• Label（标签）
• Button（按钮）
• Checkbox（复选框）
• Image（图片）
• Slider（滑块）
• Progress Bar（进度条）
• Text Input（文本输入）
• Toggle Button（切换按钮）
• Switch（转变）
• Video（视频）

一般示例：

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


class SimpleApp(App):
    def build(self):
       l = Label(text="Hello World!",font_size=150)
       return l


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

简单的APP界面例子

下面是一个简单注册登录App的界面例子，包括Grid Layout布局，几种常用的控件，文本输入和按钮触发事件，其中界面如下：

实现的代码如下：

import kivy
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.textinput import TextInput
from kivy.uix.button import Button


class MyGrid(GridLayout):
    def __init__(self, **kwargs):
        super(MyGrid, self).__init__(**kwargs)
        self.cols = 1

        self.inside = GridLayout()
        self.inside.cols = 2

        self.inside.add_widget(Label(text="First Name: "))
        self.name = TextInput(multiline=False)
        self.inside.add_widget(self.name)

        self.inside.add_widget(Label(text="Last Name: "))
        self.lastName = TextInput(multiline=False)
        self.inside.add_widget(self.lastName)

        self.inside.add_widget(Label(text="Email: "))
        self.email = TextInput(multiline=False)
        self.inside.add_widget(self.email)

        self.add_widget(self.inside)

        self.submit = Button(text="Submit", font_size=40)
        self.submit.bind(on_press=self.pressed)
        self.add_widget(self.submit)

    def pressed(self, instance):
        name = self.name.text
        last = self.lastName.text
        email = self.email.text

        print("Name:", name, "Last Name:", last, "Email:", email)
        self.name.text = ""
        self.lastName.text = ""
        self.email.text = ""

class MyApp(App):
    def build(self):
        return MyGrid()


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

布局设计：外部网格布局有1列，包含了的内部网格布局（inside）和提交按钮（submit），内部网格布局（inside）有2列，分别的文本标签和文本输入框。

布局和控件通过add_widget()属性添加各种布局和控件。

self.submit.bind(on_press=self.pressed)绑定了按钮按下时触发的事件，其中on_press是按下时触发，on_release是释放时触发。