1.  空白視窗

在 PyCharm 中建立一個名為 TutorialApp 的專案，然後在該專案中新建了個名為 tutorial_app.py 的 Python 原始檔，在 PyCharm 的程式碼編輯器中，輸入下面的程式碼：

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

雖然只有寥寥數行程式碼，但這已經是一個可以執行的 Kivy 應用了！

執行這段程式碼，將顯示出一個黑色的視窗。雖然簡單，但已經是一個標準的視窗了。你可以移動視窗、改變視窗大小、最大化、最小化，以及關閉視窗。

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

執行修改後的程式，乍看上去，似乎是視窗的背景從黑色變成了灰色。實際上是整個視窗被一個巨大的按鈕填滿了，不信你用滑鼠點選試試？看到背景顏色變化了嗎？這表明，你點選的是一個巨大的按鈕，而不是視窗本身。

第 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 個分量。

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()

執行程式，我們看到視窗左下角顯示了一些字串。

我們可以用滑鼠左鍵把左下角的字串拖動到視窗中央。

我們可以用滑鼠右鍵來模擬手機螢幕上多點觸控的操作。用滑鼠右鍵在字串上點選，會顯示一個紅色的小圓點，表示一個觸控點的位置。我們在字串的 2 個不同位置，用滑鼠右鍵點選，形成 2 個觸控點。然後，嘗試用滑鼠左鍵去拖動字串，你會發現字串發生了旋轉和縮放！

最後，讓咪博士為大家講解一下程式碼吧。

第 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 在移動應用開發中的威力。