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

我就是我 2022-06-04 04:15 239阅读 0赞

**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_empty_window.png][]

第 1 行 fromkivy.app importApp 导入 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_empty_button.png][]

第 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_button_blue_ipaomi.png][]

**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_scatter_init.png][]

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

![kivy_crash_scatter_init.png][]

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

![kivy_crash_scatter_rotate.png][]

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

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

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

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

第 10 行 returns 将 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/][http_www.ipaomi.com_2017_11_23_kivy-crash-_-_-1-_1_-kivy-app-making-a-simple-app]

[kivy_crash_empty_window.png]: http://www.ipaomi.com/wp-content/uploads/2017/11/kivy_crash_empty_window.png
[kivy_crash_empty_button.png]: http://www.ipaomi.com/wp-content/uploads/2017/11/kivy_crash_empty_button.png
[kivy_crash_button_blue_ipaomi.png]: http://www.ipaomi.com/wp-content/uploads/2017/11/kivy_crash_button_blue_ipaomi.png
[kivy_crash_scatter_init.png]: http://www.ipaomi.com/wp-content/uploads/2017/11/kivy_crash_scatter_init.png
[kivy_crash_scatter_rotate.png]: http://www.ipaomi.com/wp-content/uploads/2017/11/kivy_crash_scatter_rotate.png
[http_www.ipaomi.com_2017_11_23_kivy-crash-_-_-1-_1_-kivy-app-making-a-simple-app]: http://www.ipaomi.com/2017/11/23/kivy-crash-%e4%b8%ad%e6%96%87%e6%95%99%e7%a8%8b-%e5%ae%9e%e4%be%8b%e5%85%a5%e9%97%a8-1-%e7%ac%ac1%e4%b8%aa%e5%ba%94%e7%94%a8-kivy-app-making-a-simple-app/