Kivy - 語言

本章解釋了 Kivy 設計語言的重要功能、語法和用法。Kivy 語言（也稱為“kv”語言）主要描述 Kivy 應用程式的使用者介面。它類似於 Qt 的 QML。 “kv”語言中的規則定義類似於 CSS 規則。

目的

Kivy 應用程式中元件的佈局和放置編碼在 Kivy 的 App 類的 build() 方法中。對於使用者介面較簡單的應用程式，這可能效果很好。但是，隨著佈局設計的複雜性增加，它很快就會變得過於冗長，難以維護。因此，需要將應用程式的設計部分與處理邏輯分開。“kv”語言有助於實現這種關注點分離。

使用“kv”語言指令碼，您可以以宣告方式建立元件樹，並以更自然的方式將元件屬性繫結到回撥。以程式設計方式設計介面的缺點之一是，在應用程式執行之前無法檢視外觀。另一方面，kviewer 實用程式提供了設計和元件放置的互動式檢視，而無需在應用程式中載入指令碼。

載入“kv”指令碼

一旦元件的設計確定，它就會載入到 App 類中。這可以透過兩種方式完成。

使用命名約定

將“kv”指令碼儲存為“.kv”副檔名，其名稱對應於 App 類的名稱。如果 App 類名稱以 app 關鍵字結尾，則必須省略它。例如，如果 App 類名為 DemoApp，如下所示：

Class DemoApp(App):
   ...
   ...

那麼 kv 檔案應命名為 demo.kv。Kivy 會自動將設計載入到 App 類的 build() 方法中。如果 kv 檔案定義了一個根元件，它將附加到 App 的 root 屬性，並用作應用程式元件樹的基礎。

使用 Builder 類

如果“kv”檔案的名稱不遵循上述約定，則可以使用“kivy.lang”模組中可用的 Loader 類的 load_file() 方法將指令碼載入到應用程式中。

from kivy.app import App
from kivy.lang import Builder

Builder.load_file('mykv.kv')

MydemoApp(App):
   def build(self):
      pass
      
MydemoApp().run()

您還可以將整個“kv”語言指令碼作為字串嵌入到 Python 程式碼中，並使用 Builder.load_string() 方法在 App 類中載入它。

from kivy.app import App
from kivy.lang import Builder

kv="""
#kv script goes here
"""

MydemoApp(App):
   def build(self):
      Builder.load_string(kv)
      
MydemoApp().run()

“kv”語言具有以下重要元素：

規則 - “kv”中的規則類似於 CSS 規則。它應用於特定元件或繼承指定元件類的類。“kv”規則可以指定互動行為或使用它們新增應用於它們的元件的圖形表示。
根元件 - 您可以使用該語言建立整個使用者介面。“kv”檔案最多隻能包含一個根元件。
動態類 - 動態類允許您在執行時建立新的元件和規則，而無需任何 Python 宣告。

kv 指令碼描述了元件的內容。您可以擁有一個根規則和任意數量的類或模板規則。根規則透過宣告根元件的類來宣告，不縮排，後跟“:”符號。它設定 App 例項的 root 屬性。

Widget:

要宣告類規則，請將元件類名稱放在“< >”之間，後跟“:”符號。它定義該類任何例項的外觀和行為：

<MyWidget>:

Kv 語言規則使用縮排進行分隔，與 Python 原始碼相同。要記住的經驗法則是，帶尖括號的是規則，不帶尖括號的是根元件。

示意圖示例 -

<MyClass>:
   prop1: value1
   prop2: value2
   
   canvas:
      CanvasInstruction1:
         canvasprop1: value1
      CanvasInstruction2:
         canvasprop2: value2
   AnotherClass:
      prop3: value1

有三個特定於“kv”語言的關鍵字：

self - 始終引用當前元件。

Button:
text: 'My state is %s' % self.state

root - 指當前規則中的基本元件，並表示規則的根元件（規則的第一個例項） -

<MyWidget>:
   custom: 'Hello world'
   Button:
      text: root.custom

app - 始終引用應用程式的例項。

Label:
   text: app.name

Kivy 應用程式視窗只能包含一個元件作為其根物件。但是，如果您需要使用多個控制元件來組合應用程式介面，則必須使用佈局元件，並將多個 UX 元件放置在其中，然後將佈局作為根元件放置在應用程式視窗上。

以下“kv”檔案指令碼定義了一個網格佈局，然後可以將其與 App 類一起使用：

GridLayout:
   cols:1
   Label:
      text:'Hello'
      font_size:100
      color:(1,0,0,1)
   Button:
      text='Ok'
      font_size:100

在上述情況下，Label 元件和 Button 元件放置在一個單列 GridLayout 中。但是，無法從 Python 程式碼中訪問物件及其屬性。要能夠做到這一點，請在“kv”指令碼中定義 id 屬性。

GridLayout:
   cols:1
   Label:
      id:l1
      text:'Hello'
      font_size:60
      color:(1,0,0,1)
   Button:
   id:b1
      text='Ok'
      font_size:60

當此佈局載入到 build() 方法中時，App 類可以透過此 id 訪問元件屬性。它有一個 ids 屬性，它是一個包含 id:value 鍵值對的字典。

print (self.ids.l1.text)

讓我們從以下 kv 指令碼開始，它包含網格佈局中的標籤和按鈕。

GridLayout:
   cols:1
   Label:
      text:'Hello'
      font_size:60
      color:(1,0,0,1)
   TextInput:
      text:'Hello'
      font_size:60
   Button:
      text:'Ok'
         font_size:60

Kivy 應用程式程式碼載入上述“kvdemo.kv”指令碼：

from kivy.app import App
from kivy.core.window import Window

Window.size = (720,400)
class KvDemoApp(App):
   def build(self):
      pass
      
KvDemoApp().run()

讓我們在 Kivy 應用程式中新增一個事件處理程式。要訪問元件屬性，我們在標籤、文字輸入和按鈕中定義 id 屬性。我們在“kv”指令碼中定義了一個類規則，並在頂部用尖括號將 MyWidget 放入其中。

<MyWidget>:
   cols:1
   size:root.size
   Label:
      id:l1
      text:'Hello'
      font_size:60
      color:(1,0,0,1)
   TextInput:
      id:t1
      text:'Hello'
      font_size:60
   Button:
      id:b1
      text:'Ok'
      font_size:60
      on_press:root.callback(*args)

請注意，按鈕的 on_press 屬性繫結到我們將在根類（即 MyWidget 類）中編寫的 callback() 方法。

MyWidget 類繼承 GridLayout 元件。在類內部，提供了 callback() 方法。當按下按鈕時，它會將標籤標題更新為文字框中輸入的文字。

在“kvdemoapp.py”程式碼中新增以下類：

from kivy.uix.gridlayout import GridLayout
class MyWidget(GridLayout):
def callback(self, *args):
print ("hello")
self.ids.l1.text=self.ids.t1.text

執行程式後，在文字框中輸入一些文字，然後按按鈕。標籤上的文字將相應更改。

我們也可以只在“kv”指令碼中提供整個邏輯。我們不需要在 Python 類中定義回撥。從“kv”程式碼內部使用標籤和文字輸入的 id 屬性。

<MyWidget>:
   cols:1
   size:root.size
   Label:
      id:l1
      text:'Hello'
      font_size:60
      color:(1,0,0,1)
   TextInput:
      id:t1
      text:'Hello'
      font_size:60
   Button:
      id:b1
      text:'Ok'
      font_size:60
      on_press: l1.text=t1.text

在這裡，on_press 事件將標籤（id 為 l1）的文字設定為 id 為“t1”的文字框中的文字。在 Python 程式碼端，MyWidget 類將只有一個 pass 語句。

因此，我們可以看到“kv”設計語言的使用使應用程式開發變得非常方便，因為程式設計部分和設計部分是隔離的。

列印頁面