Kivy UIX篇 widget篇 Popup類 attribute篇 講解

簡述

根據官方解釋:

The Popup widget is used to create modal popups. By default, the popup will cover the whole “parent” window. When you are creating a popup, you must at least set a Popup.title and Popup.content.

意思是Popup用於創建彈出視窗。 預設下，彈出窗口將覆蓋整個“父”窗口。 創建彈出窗口時，至少必須設置 Popup.title 和 Popup.content。

示意圖如下:

基本範例

首先在main.py中寫上起手式:

from kivy.app import App
from kivy.uix.gridlayout import GridLayout


class MyLayout(GridLayout):
    pass


class Myapp(App):
    
    def build(self):
        return MyLayout()


if __name__ == '__main__':
    Myapp().run()

在以上程式碼中，我讓MyLayout類繼承GridLayout類，使得在my.kv中的<MyLayout>:可以繼承GridLayout類的特性。

在my.kv中寫上此段程式碼:

<MyLayout>:

    rows: 2
    size_hint: (None, None)
    size: (400, 300)
    pos_hint: {'center_x': .5, 'y': .2}
    #以上程式碼主要是為了更好呈現結果而調整GridLayout

    Popup:
        title: 'Hello' #分隔線上面的標題
        #分隔線下面的內容
        Label:
            text: 'world'

    Label:
        text: 'abc'

執行結果如下:

Popup使用技巧:

1.Popup分隔線底下只能加入一個widget

程式碼如下:

<MyLayout>:

    rows: 2
    size_hint: (None, None)
    size: (400, 300)
    pos_hint: {'center_x': .5, 'y': .2}

    Popup:

        title: 'Hello'

        Label:
            text: 'world'
            
        Button: #多加了一個Button
            text: 'Close me!'

    Label:
        text: 'abc'

執行結果如下:

2.改變分隔的長與顏色

程式碼如下:

<MyLayout>:

    rows: 2
    size_hint: (None, None)
    size: (400, 300)
    pos_hint: {'center_x': .5, 'y': .2}

    Popup:
        separator_height: 20 #改變分隔的長
        separator_color: 1, 0, 1, 1 #改變分隔的顏色

        title: 'Hello'

        Label:
            text: 'world'

    Label:
        text: 'abc'

執行結果如下:

3.改變title的相關設定

程式碼如下:

<MyLayout>:

    rows: 2
    size_hint: (None, None)
    size: (400, 300)
    pos_hint: {'center_x': .5, 'y': .2}

    Popup:
        title_align: 'center' #決定標題對齊方式
        title_color: 1,0,1,1 #決定標題顏色
        #title_font: #決定標題字形，請自行研究
        title_size: 40 #決定標題字體大小

        title: 'Hello'

        Label:
            text: 'world'

    Label:
        text: 'abc'

執行結果如下: