Kivy - 模態檢視

Kivy 框架中的 ModalView 元件用於在父視窗上彈出對話方塊。ModalView 元件的行為類似於 Kivy 的 Popup 元件。事實上，Popup 類本身就是 ModalView 類的子類，具有一些額外的功能，例如具有標題和分隔符。

預設情況下，Modalview 的大小等於“主”視窗的大小。元件的 size_hint 預設值為 (1, 1)。如果您不希望您的檢視全屏顯示，可以使用小於 1 的 size_hint 值（例如 size_hint=(.8, .8)），或者將 size_hint 設定為 None 並使用固定大小屬性。

ModalView 類定義在 kivy.uix.modalview import ModalView 模組中。以下語句將生成一個 ModalView 對話方塊：

from kivy.uix.modalview import ModalView
view = ModalView(size_hint=(None, None), size=(300, 200))
view.add_widget(Label(text='ModalView Dialog'))

與 Popup 一樣，當您單擊 ModalView 對話方塊外部時，它將被關閉。要阻止此行為，請將 auto-dismiss 設定為 False。

要使 ModalView 對話框出現，您需要呼叫其 open() 方法。

view.open()

如果 auto_dismiss 為 False，則需要呼叫其 dismiss() 方法來關閉它。

view.dismiss()

通常，open() 和 dismiss() 方法都在某個事件（例如按鈕的 on_press 事件）上呼叫。您通常在單擊父視窗上的按鈕時開啟 ModalView，並在單擊 ModalView 佈局中的按鈕時關閉它。

ModalView 事件

ModalView 在檢視開啟和關閉之前以及檢視開啟和關閉時發出事件。

• on_pre_open - 在 ModalView 開啟之前觸發。當此事件觸發時，ModalView 尚未新增到視窗中。

• on_open - ModalView 開啟時觸發。

• on_pre_dismiss - 在 ModalView 關閉之前觸發。

• on_dismiss - ModalView 關閉時觸發。如果回撥返回 True，則關閉操作將被取消。

示例

以下程式碼展示了一個易於實現的 ModalView 對話方塊示例。主應用程式視窗顯示一個按鈕標題“點選此處”。單擊時，將彈出一個模態對話方塊。

ModalView 透過將標籤和按鈕放在網格佈局中構建。在彈出視窗中，我們有一個標題為“確定”的按鈕。它的 on_press 事件繫結到 ModalView 物件的 dismiss() 方法，使其消失。

示例的完整程式碼如下：

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.modalview import ModalView
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.gridlayout import GridLayout
from kivy.core.window import Window

Window.size = (720, 300)

class ModalViewDemoApp(App):
   def showmodal(self, obj):
      view = ModalView(
         auto_dismiss=False, size_hint=(None, None),
         size=(400, 100)
      )
      grid = GridLayout(cols=1, padding=10)
      grid.add_widget(Label(
         text='ModalView Popup', font_size=32,
         color=[1, 0, 0, 1]
      ))
      btn = Button(
         text='ok', font_size=32,
         on_press=view.dismiss
      )
      grid.add_widget(btn)
      view.add_widget(grid)
      view.open()

   def build(self):
      btn = Button(
         text='click here', font_size=32,
         on_press=self.showmodal,
         pos_hint={'center_x': .5, 'center_y': .1},
         size_hint=(.3, None), size=(200, 100)
      )
      return btn
ModalViewDemoApp().run()

輸出

當單擊主應用程式視窗上的按鈕時，將彈出 ModalView 對話方塊。