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

1. 空白窗口

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

1 from kivy.app import App
2
3 class TutorialApp(App):
4     pass
5
6 if __name__ == "__main__":
7     TutorialApp().run()

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

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



第 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)。

1 from kivy.app import App
2 from kivy.uix.button import Button
3
4 class TutorialApp(App):
5     def build(self):
6         return Button()
7
8 if __name__ == "__main__":
9     TutorialApp().run()

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



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

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

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

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

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



3. 多点触控

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

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

Scatter 是实现多点触控的关键，它可以方便地实现移动、缩放，以及旋转的操作

Label 是用来显示文字的，我们将它放在 Scatter 上，从而实现对文字的移动、缩放和旋转的操作

最终，我们修改后的代码如下：

1 from kivy.app import App
2 from kivy.uix.scatter import Scatter
3 from kivy.uix.label import Label
4
5 class TutorialApp(App):
6     def build(self):
7         s = Scatter()
8         l = Label(text='iPaoMi', font_size=150)
9         s.add_widget(l)
10         return s
11
12 if __name__ == "__main__":
13     TutorialApp().run()

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



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



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



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

第 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/