Kivy UIX篇 widget篇 Bubble類 attribute篇 講解

簡述

根據官方解釋:

1.The Bubble widget is a form of menu or a small popup with an arrow arranged on one side of it’s content.

2.The Bubble contains an arrow attached to the content (e.g., BubbleContent) pointing in the direction you choose. It can be placed either at a predefined location or flexibly by specifying a relative position on the border of the widget.

3.The BubbleContent is a styled BoxLayout and is thought to be added to the Bubble as a child widget. The Bubble will then arrange an arrow around the content as desired. 

4.The BubbleButton is a styled Button. It suits to the style of :class:Bubble and BubbleContent. Feel free to place other Widgets inside the ‘content’ of the Bubble.

意思是:

1.Bubble是一種菜單形式或一個小彈出窗口，其內容的一側有一個箭頭。

2.Bubble包含一個附加到內容（例如 BubbleContent）的箭頭，指向您選擇的方向。 它可以放置在指定的位置，也可以通過指定子部件邊框上的相對位置來靈活放置。

3.BubbleContent是一個的 BoxLayout，被當作子部件添加到 Bubble 中。Bubble將根據需要在BubbleContent周圍排列一個箭頭。

4.BubbleButton 是一個按鈕。可隨意將其他子部件放置在BubbleContent內。

示意圖如下:

基本範例

首先在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__':
    from kivy.core.window import Window
    #添加這行程式碼是為了呈現Bubble的"箭頭"，若不添加會看不到
    Window.clearcolor = 0.47, 0.76, 0.61, 1
    Myapp().run()

在以上程式碼中，我讓MyLayout類繼承GridLayout類，使得在my.kv中的<MyLayout>:可以繼承GridLayout類的特性。(注意!!與之前不同的是，我們使用Bubble時必須要import，否則會出錯。)

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

<MyLayout>:

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

    Bubble: #添加一個Bubble到GridLayout的單元格內

        BubbleContent: #添加一個BubbleContent到Bubble內(也只能添加一個)

            #添加BubbleButton到BubbleContent
            BubbleButton:
                text: 'Cut'

            BubbleButton:
                text: 'Copy'

    Label:
        text: 'ABC'

執行結果如下:

Bubble使用技巧:

1.更改Bubble的長與寬

程式碼如下:

<MyLayout>:

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

    Bubble:
    
        #更改長與寬
        size_hint: (None, None) #指定長與寬時必須先宣告size_hint: (None, None)
        size: (100, 400) #填入長與寬

        BubbleContent:

            BubbleButton:
                text: 'Cut'

            BubbleButton:
                text: 'Copy'

    Label:
        text: 'ABC'

執行結果如下:

2.更改箭頭的位置、背景顏色與圖案

程式碼如下:

<MyLayout>:

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

    Bubble:

        arrow_image: 'dog2.jpg' #指定箭頭圖片
        #arrow_color: (0, 0, 0, .2) #指定箭頭背景顏色(這邊為了更好呈現圖片因此沒有設定顏色)
        arrow_pos:'bottom_left'

        BubbleContent:

            BubbleButton:
                text: 'Cut'

            BubbleButton:
                text: 'Copy'

    Label:
        text: 'ABC'

關於arrow_pos的更多選項請參考https://kivy.org/doc/stable/api-kivy.uix.bubble.html#kivy.uix.bubble.Bubble.arrow_pos

執行結果如下:

(注意:當作箭頭的圖片必須是適當的大小，Kivy不會自動調整，上面範例中圖片的大小看似非常適合，實際上那是我自己在其他地方先將大小調整好後才放上去的。)

BubbleContent使用技巧:

1.BubbleContent內可以加任何widget

程式碼如下:

<MyLayout>:

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

    Bubble:

        BubbleContent:

            BubbleButton:
                text: 'Cut'

            Image: #添加Image
                source: 'dog.jpg'

            Label: #添加Label
                text: 'KIVY'

    Label:
        text: 'ABC'

執行結果如下:

(注意!!此時的Image、Label與BubbleButton不同，無法被點選。由於BubbleContent繼承自kivy.uix.boxlayout.BoxLayout，因此圖片不需手動調整大小，會自動剛好塞滿到單元格內)

2.更改BubbleContent的背景顏色與圖案

程式碼如下:

<MyLayout>:

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

    Bubble:

        BubbleContent:

            background_image: 'dog.jpg' #指定BubbleContent的圖片
            background_color: 1, 1, 0, 0.5 #指定BubbleContent的背景顏色

            BubbleButton:
                text: 'Cut'

            BubbleButton:
                text: 'Copy'

    Label:
        text: 'ABC'

執行結果如下: