Kivy crash 中文教程 实例入门 1. 第1个应用 Kivy App (Making a simple App)

1. 空白窗口

在 PyCharm 中创建一个名为 TutorialApp 的项目,然后在该项目中新建了个名为 tutorial_app.py 的 Python 源文件,在 PyCharm 的代码编辑器中,输入下面的代码:

from kivy.app import App
 
class TutorialApp(App):
    pass
 
if __name__ == "__main__":
    TutorialApp().run()

虽然只有寥寥数行代码,但这已经是一个可以运行的 Kivy 应用了!

运行这段代码,将显示出一个黑色的窗口。虽然简单,但已经是一个标准的窗口了。你可以移动窗口、改变窗口大小、最大化、最小化,以及关闭窗口。

Kivy crash 中文教程 实例入门 1. 第1个应用 Kivy App (Making a simple App)_第1张图片
image

第 1 行 from kivy.app import App 导入 kivy 的 App 类,它是所有 kivy 应用的基类。

我们继承 App 类,派生出TutorialApp 类(第 3, 4 行)。我们还没有给 TutorialApp 添加任何方法,但它从 App 类中继承了 kivy 应用最基本的方法,如创建窗口、设置窗口的大小和位置等。

最后,要让 kivy 应用真正跑起来,我们需要创建 TutorialApp 对象,并调用它的 run 方法(第 7 行)。

2. 添加控件 (widget)

一个光秃秃的窗口是没啥用的,我们还得在窗口上放置一些控件(widget)。Kivy 内置了丰富的控件,如按钮 (button), 复选框 (checkbox), 标签 (label), 输入框 (textinput), 滚动容器 (scrollable container) 等。

这里咱们不妨先试试比较简单的按钮控件 (button)。

from kivy.app import App
from kivy.uix.button import Button
 
class TutorialApp(App):
    def build(self):
        return Button()
 
if __name__ == "__main__":
    TutorialApp().run()

运行修改后的程序,乍看上去,似乎是窗口的背景从黑色变成了灰色。实际上是整个窗口被一个巨大的按钮填满了,不信你用鼠标点击试试?看到背景颜色变化了吗?这表明,你点击的是一个巨大的按钮,而不是窗口本身。

Kivy crash 中文教程 实例入门 1. 第1个应用 Kivy App (Making a simple App)_第2张图片
image

第 2 行 from kivy.uix.button import Button 导入 kivy 的按钮控件 Button。

第 5, 6 行,我们实现了 TutorialApp 类的 build 方法(继承自 App 类)。build 方法返回一个按钮 (Button) 对象。build 方法返回的控件,在 Kivy 中,称之为“根控件” (root widget)。Kivy 将自动缩放根控件,让它填满整个窗口。这就是为什么我们会得到一个充满整个窗口的巨型按钮。

我们还可以在创建按钮时传递参数,让它变得更生动一些。

from kivy.app import App
from kivy.uix.button import Button
 
class TutorialApp(App):
    def build(self):
        return Button(text='iPaoMi', background_color=(0, 0, 1, 1), font_size=150)
 
if __name__ == "__main__":
    TutorialApp().run()

例如,我们可以将按钮的背景色设置为蓝色,并在按钮上以 150 的字号,显示文字 iPaoMi (第 6 行)。其中,参数 background_color 接受的 4 元组,分别表示 RGBA 颜色的 4 个分量。

Kivy crash 中文教程 实例入门 1. 第1个应用 Kivy App (Making a simple App)_第3张图片
image

3. 多点触控

现在,我们的应用还非常地简单,几乎没有什么交互。而且,其他许多 GUI 库,例如 QT, GTK 等也可以很容易地做出类似的效果,实在看不出 Kivy 究竟有何过人之处。接下来,咪博士将向大家展示如何快速实现多点触控的操作,你将看到为什么我们说 Kivy 是为移动应用而生。

这一节中,我们将会用到 2 个 Kivy 控件:Scatter 和 Label。

  • Scatter 是实现多点触控的关键,它可以方便地实现移动、缩放,以及旋转的操作
  • Label 是用来显示文字的,我们将它放在 Scatter 上,从而实现对文字的移动、缩放和旋转的操作

最终,我们修改后的代码如下:

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
 
class TutorialApp(App):
    def build(self):
        s = Scatter()
        l = Label(text='iPaoMi', font_size=150)
        s.add_widget(l)
        return s
 
if __name__ == "__main__":
    TutorialApp().run()

运行程序,我们看到窗口左下角显示了一些字符串。

Kivy crash 中文教程 实例入门 1. 第1个应用 Kivy App (Making a simple App)_第4张图片
image

我们可以用鼠标左键把左下角的字符串拖动到窗口中央。

Kivy crash 中文教程 实例入门 1. 第1个应用 Kivy App (Making a simple App)_第5张图片
image

我们可以用鼠标右键来模拟手机屏幕上多点触控的操作。用鼠标右键在字符串上点击,会显示一个红色的小圆点,表示一个触控点的位置。我们在字符串的 2 个不同位置,用鼠标右键点击,形成 2 个触控点。然后,尝试用鼠标左键去拖动字符串,你会发现字符串发生了旋转和缩放!

Kivy crash 中文教程 实例入门 1. 第1个应用 Kivy App (Making a simple App)_第6张图片
image

最后,让咪博士为大家讲解一下代码吧。

第 2, 3, 4 行分别导入 Scatter 和 Label 控件

第 7, 8 行分别创建了 Scatter 和 Label 控件实例

第 9 行 s.add_widget(l) 将 Label 控件实例添加到 Scatter 控件实例中。这样用户的操作直接影响 Scatter 控件,再由 Scatter 自动将这些影响作用到它内部的子控件(即 Label 控件)上。

第 10 行 return s 将 Scatter 实例作为根控件返回。Kivy 会自动用根控件(Scatter 实例)填充整个窗口。

Kivy 的设计中充分考虑了移动应用的交互,这是 Kivy 与其他 GUI 库 (如 QT, GTK) 最重要的区别。当然,用鼠标来模拟多点触控的操作显得很不自然。后面的教程中,咪博士将教大家,如何将 Kivy 应用打包并运行在手机上。届时,大家将真正见识到 Kivy 在移动应用开发中的威力。

原文链接:http://www.ipaomi.com/2017/11/23/kivy-crash-中文教程-实例入门-1-第1个应用-kivy-app-making-a-simple-app/

你可能感兴趣的:(Kivy crash 中文教程 实例入门 1. 第1个应用 Kivy App (Making a simple App))