Ewan
Ewan

Reputation: 109

How to make dropdown list in Kivy

I am trying to make a dropdown list in KivyMD. The documentation for this wasn't particuarly helpful - I've added a mockup of what I am trying to createenter image description here

Any Help would be massively appreciated. I've tried to look at tutorials but I am stuck. ...............................................................................


from kivy import Config
from kivy.app import App
from kivy.lang import Builder
from kivy.properties import StringProperty
from kivy.uix.image import Image
from kivy.uix.label import Label
from kivy.uix.popup import Popup
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition
from kivy.uix.textinput import TextInput
from kivymd.app import MDApp
from kivy.uix.boxlayout import BoxLayout
from kivymd.theming import ThemableBehavior
from kivymd.uix.navigationdrawer import MDNavigationLayout, MDNavigationDrawer
from kivymd.uix.list import MDList, OneLineAvatarListItem, ILeftBody
from kivy.properties import ObjectProperty
from kivymd.uix.menu import MDDropdownMenu

Config.set('input', 'mouse', 'mouse,disable_multitouch')


class DrawerList(ThemableBehavior, MDList, Screen):
    pass


class NavLayout(MDNavigationLayout):
    pass


class Login(Screen):
    nav_drawer = ObjectProperty()


class Nav(Screen):
    Login = ObjectProperty()
    ScreenManager = ObjectProperty


class Homepage(Screen):
    Login = ObjectProperty()
    nav_drawer = ObjectProperty()

    class Homepage(Screen):
        Login = ObjectProperty()
        nav_drawer = ObjectProperty()

        def submit(self):
            Popup(title='Submitted', content=Label(text='Case has been submitted and will be reviewed'), size_hint=(0.5, 0.5)).open()
            sm = self.ids.screen_manager
            scr = sm.get_screen('Create Case')
            for child in scr.children:
                if isinstance(child, TextInput):
                    child.text = ''

        def dropdown(self):
            self.menu_list = [
                {
                    "viewclass": "OneLineListItem",
                    "text": "Example 1",
                    "on_release": lambda x="Example 1": self.test1
                },
                {
                    "viewclass": "OneLineListItem",
                    "text": "Example 2",
                    "on_release": lambda x="Example 1": self.test2
                }
            ]

            self.menu = MDDropdownMenu(
                caller = self.ids.dropmenu,
                items = self.menu_list,
                width_mult = 4
            )
            self.dropmenu.open()




        def test1(self):
            print("test1")

        def test1(self):
            print("test2")


class AddNewCustomer(Screen):
    nav_drawer = ObjectProperty()


class AddNewStaff(Screen):
    pass


class ScreenManager(ScreenManager):
    Login = ObjectProperty()


class ContentNavigationDrawer(BoxLayout):
    pass


class MainApp(MDApp):
    def build(self):
        # Window.maximize()
        # self.theme_cls.theme_style = "Light"
        # self.theme_cls.primary_hue = "900"
        login = Builder.load_file("login.kv")
        return login


if __name__ == "__main__":
    MainApp().run()




ScreenManager:
    Login:
    Homepage:
    AddNewCustomer:
    Nav:
    DrawerList:

<Login>:
    name: "login"
    MDCard:
        size_hint: None, None
        size: 700, 800
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        elevation: 10
        padding: 25
        spacing: 25
        orientation: 'vertical'

        Image:
            source: 'images/asteria.png'
            size: 100, 200

        MDLabel:
            id: login
            font_size: 40
            halign: 'center'
            size_hint_y: None
            height: self.texture_size[1]
            padding_y: 15

        MDTextFieldRound:
            id: user
            hint_text: "username"
            icon_right: "account"
            size_hint_x: None
            width: 200
            font_size: 18
            pos_hint: {"center_x": 0.5}

        MDTextFieldRound:
            id: password
            hint_text: "password"
            icon_right: "eye-off"
            size_hint_x: None
            width: 200
            font_size: 18
            pos_hint: {"center_x": 0.5}
            password: True

        MDRoundFlatButton:
            text: "LOGIN"
            font_size: 12
            pos_hint: {"center_x": 0.5}

            on_release:
                root.manager.current = "homepage"
                root.manager.transition.direction = "left"

        MDRoundFlatButton:
            text: "CLEAR"
            font_size: 12
            pos_hint: {"center_x": 0.5}
            on_press: app.clear()


        Widget:
            size_hint_y: None
            height: 50


<Nav>:
    ScrollView:
        MDList:
            OneLineListItem:
                text: "Add New Customer"

                on_release:
                    root.nav_drawer.set_state("close")
                    root.screen_manager.current = "addNewCustomer"
                    root.screen_manager.transition.direction = "right"


            OneLineListItem:
                text: "Add New Staff"
                font_size: 15
                halign: "center"
                on_release:
                    root.nav_drawer.set_state("close")
                    root.screen_manager.current = "addNewStaff"

            OneLineListItem:
                text: "Case List"
                font_size: 15
                halign: "center"
                on_release:
                    root.nav_drawer.set_state("close")
                    root.screen_manager.current = "caseList"


            OneLineListItem:
                text: "Create Case"
                font_size: 15
                halign: "center"
                on_release:
                    root.nav_drawer.set_state("close")
                    root.screen_manager.transition.direction = "left"
                    root.screen_manager.current = "Create Case"


            OneLineListItem:
                text: "Log Out"
                font_size: 15
                halign: "center"
                on_release:
                    root.nav_drawer.set_state("close")

                    root.manager.current = "login"
                    root.manager.transition.direction = "right"



<Homepage>:
    name: "homepage"
    Screen:

        MDNavigationLayout:
            ScreenManager:
                id: screen_manager
                Screen:
                    name: "Homepage"
                    MDLabel:
                        text: "Welcome Home"
                        halign: "center"


                Screen:
                    name: "addNewCustomer"
                    MDLabel:
                        text: "Add New customer"
                        halign: "center"

                Screen:
                    name: "addNewStaff"
                    MDLabel:
                        text: "Add New Staff"
                        halign: "center"

                Screen:
                    name: "caseList"
                    MDLabel:
                        text: "Case List"
                        halign: "center"

                Screen:
                    name: "casePool"
                    MDLabel:
                        text: "Case Pool"
                        halign: "center"

                Screen:
                    name: "Create Case"


                    MDLabel:
                        text: "Case Title"
                        font_size: 15
                        size_hint_x: None
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.875, "center_x": 0.115}



                    MDTextFieldRound:
                        id: CaseTitle
                        hint_text: "Info Here"
                        icon_right: "Case Title"
                        size_hint_x: None
                        width: 275
                        font_size: 15
                        pos_hint: {"top": 0.863, "center_x": 0.155}



                    MDLabel:
                        text: "Customer"
                        font_size: 15
                        size_hint_x: None
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.791, "center_x": 0.115}



                    MDTextFieldRound:
                        id: Customer
                        hint_text: "Info Here"
                        mode:"rectangle"
                        icon_right: "Customer"
                        size_hint_x: None
                        width: 275
                        font_size: 14
                        pos_hint: {"top": 0.779, "center_x": 0.155}


                    MDLabel:
                        text: "Customer Forename"
                        font_size: 15
                        size_hint_x: None
                        multiline: False
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.707, "center_x": 0.115}


                    MDTextFieldRound:
                        id: Customer Forename
                        hint_text: "Info here"
                        mode:"rectangle"
                        icon_right: "Customer"
                        size_hint_x: None
                        width: 137.5
                        font_size: 14
                        pos_hint: {"top": 0.687, "center_x": 0.121}

                    MDLabel:
                        text: "Customer Surname"
                        font_size: 15
                        size_hint_x: None
                        multiline: False
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.707, "center_x": 0.210}


                    MDTextFieldRound:
                        id: Customer Forename
                        hint_text: "Info Here"
                        mode:"rectangle"
                        icon_right: "Customer"
                        size_hint_x: None
                        width: 137.5
                        font_size: 14
                        pos_hint: {"top": 0.687, "center_x": 0.210}

                    MDLabel:
                        text: "Alternative email"
                        font_size: 15
                        size_hint_x: None
                        multiline: False
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.620, "center_x": 0.115}


                    MDTextFieldRound:
                        id: Alternative Email
                        hint_text: "Info Here"
                        mode:"rectangle"
                        size_hint_x: None
                        width: 275
                        font_size: 15
                        pos_hint: {"top": 0.600, "center_x": 0.155}

                    MDLabel:
                        text: "Alternative Phone"
                        font_size: 15
                        size_hint_x: None
                        multiline: False
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.533, "center_x": 0.115}


                    MDTextFieldRound:
                        id: Alternative phone
                        hint_text: "Info Here"
                        mode:"rectangle"
                        size_hint_x: None
                        width: 275
                        font_size: 15
                        pos_hint: {"top": 0.513, "center_x": 0.155}



                    MDLabel:
                        text: "Case Source"
                        font_size: 15
                        size_hint_x: None
                        multiline: False
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.449, "center_x": 0.115}

                    MDTextFieldRound:
                        id: Case Source
                        hint_text: "Info Here"
                        mode:"rectangle"
                        size_hint_x: None
                        width: 275
                        font_size: 15
                        pos_hint: {"top": 0.437, "center_x": 0.155}








                    MDLabel:
                        text: "Case Priority"
                        font_size: 15
                        size_hint_x: None
                        multiline: False
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.365, "center_x": 0.115}

                    MDTextFieldRound:
                        id: Case Priority
                        hint_text: "Info Here"
                        mode:"rectangle"
                        size_hint_x: None
                        width: 275
                        font_size: 15
                        pos_hint: {"top": 0.353, "center_x": 0.155}




                    MDLabel:
                        text: "Case Category"
                        font_size: 15
                        size_hint_x: None
                        multiline: False
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.281, "center_x": 0.115}








                    MDLabel:
                        text: "Case Description"
                        font_size: 15
                        size_hint_x: None
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.883, "center_x": 0.360}


                    MDTextFieldRound:
                        id: CaseDescription
                        hint_text: "Info Here"
                        icon_right: "Case Title"
                        size_hint_x: None
                        width: 275
                        font_size: 15
                        pos_hint: {"top": 0.863, "center_x": 0.400}







                    MDLabel:
                        text: "Possible Cases"
                        font_size: 15
                        size_hint_x: None
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.799, "center_x": 0.360}



                    MDTextFieldRound:
                        id: PossibleCases
                        hint_text: "Info Here"
                        icon_right: "Case Title"
                        size_hint_x: None
                        width: 275
                        font_size: 15
                        pos_hint: {"top": 0.780, "center_x": 0.400}







                    MDLabel:
                        text: "Knowledge Helper"
                        font_size: 15
                        size_hint_x: None
                        bold: True
                        color: 0.204, 0.204, 0.204, 1
                        pos_hint: {"center_y": 0.715, "center_x": 0.360}



                    MDTextFieldRound:
                        id: KnowledgeHelper
                        hint_text: "Info Here"
                        icon_right: "Case Title"
                        size_hint_x: None
                        width: 275
                        font_size: 15
                        pos_hint: {"top": 0.697, "center_x": 0.400}




                    MDRoundFlatButton:
                        text: "Submit"
                        font_size: 12
                        pos_hint: {"center_y": 0.400,"center_x": 0.5}
                        on_release: root.submit()




        BoxLayout:
            orientation: 'vertical'
            MDToolbar:
                title: 'Navigation'

                left_action_items: [['menu', lambda x: nav_drawer.set_state('open')]]
                right_action_items: [["images/asteria.png", lambda x: None]]



                elevation:5


            Widget:


        MDNavigationDrawer:
            id: nav_drawer
            Nav:
                screen_manager: screen_manager
                nav_drawer: nav_drawer
                manager: root.manager




Upvotes: 1

Views: 1385

Answers (1)

Raed Ali
Raed Ali

Reputation: 577

I think you're looking for the KivyMD Menu widget. Here's an example from the docs:

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.menu import MDDropdownMenu

KV = '''
MDScreen:

    MDRaisedButton:
        id: button
        text: "PRESS ME"
        pos_hint: {"center_x": .5, "center_y": .5}
        on_release: app.menu.open()
'''


class Test(MDApp):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.screen = Builder.load_string(KV)
        menu_items = [
            {
                "text": f"Item {i}",
                "viewclass": "OneLineListItem",
                "on_release": lambda x=f"Item {i}": self.menu_callback(x),
            } for i in range(5)
        ]
        self.menu = MDDropdownMenu(
            caller=self.screen.ids.button,
            items=menu_items,
            width_mult=4,
        )

    def menu_callback(self, text_item):
        print(text_item)

    def build(self):
        return self.screen


Test().run()

Upvotes: 1

Related Questions