Kivy UIX篇 widget篇 Drop-Down List類 attribute篇 講解

簡述

根據官方解釋:

1.A versatile drop-down list that can be used with custom widgets. It allows you to display a list of widgets under a displayed widget. 

2.The positioning of the drop-down list is fully automatic: we will always try to place the dropdown list in a way that the user can select an item in the list.

意思是:

1.可與自定義小部件一起使用的多功能下拉列表。 它允許您在顯示的小部件下顯示小部件列表。

2.下拉列表的定位是完全自動的：我們將始終嘗試以用戶可以選擇列表中的項目的方式放置下拉列表。

示意圖如下:

基本範例

首先在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

    #以下程式碼中的size_hint與height主要是為了更好呈現結果
    DropDown:

        Button:
            text: 'A1'
            size_hint_y: None
            height: 44

        Label:
            text: 'B2'
            size_hint_y: None
            height: 44

        Image:
            source: 'dog.jpg'
            size_hint_y: None
            height: 44

    Label:
        text: 'abc'

執行結果如下:

在基本範例中，你也許會懷疑為什麼與官方的範例動圖的結果差這麼多(人家官方範例還可以按下Button然後彈出Drop-Down List)，原因是因為本篇尚未將複雜的method與event加入，這邊只單純呈現Drop-Down List的外觀，更多method與event請參考

Drop-Down List使用技巧:

1.Drop-Down List的寬預設是依內部widget自動調整，可以依照需求更改。

程式碼如下:

<MyLayout>:

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

    DropDown:

        auto_width: False #此行程式碼可有可無
        size_hint_x: .6 #指定Drop-Down List的寬

        Button:
            text: 'A1'
            size_hint_y: None
            height: 44

        Label:
            text: 'B2'
            size_hint_y: None
            height: 44

        Image:
            source: 'dog.jpg'
            size_hint_y: None
            height: 44

    Label:
        text: 'abc'

執行結果如下:

2.Drop-Down List預設點擊別處會把list收起來(可以試試最前面的範例)，若要改成點擊別處list依然繼續呈現，可以添加參數auto_dismiss

程式碼如下:

<MyLayout>:

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

    DropDown:

        auto_dismiss: False #添加此行程式碼

        Button:
            text: 'A1'
            size_hint_y: None
            height: 44

        Label:
            text: 'B2'
            size_hint_y: None
            height: 44

        Image:
            source: 'dog.jpg'
            size_hint_y: None
            height: 44

    Label:
        text: 'abc'

執行結果如下: