본문 바로가기

개발하자

Python Transparent KivyMD Navigation Drawer

반응형

Python Transparent KivyMD Navigation Drawer

I'm trying to apply some changes to my app (digital planner), one of which is being able to switch screens within MDNavigationDrawer, but I have two problems:

  1. The nav. drawer is transparent. I tried setting its opacity equal to 1 - didn't work.
  2. The nav. drawer seems to be "under" the screen. If positions of a button on the nav. drawer and a button on the screen match, button being pressed is the one that's one the screen, not the one that's on the nav. drawer.

Here's what the MDNavigationDrawer looks like

Here's a bit of my Kivy code:

BoxLayout:
    orientation: "vertical"

    manager: manager
    nav_drawer: nav_drawer

    MDToolbar:
        id: tb
        type: "top"
        title: "VPlanner"
        left_action_items: [["menu", lambda x: nav_drawer.set_state()]]
        right_action_items: [["settings", lambda x: app.open_settings()]]

    NavigationLayout:
        x: tb.height
    
        MDNavigationDrawer:
            id: nav_drawer

            ContentNavigationDrawer:    

        ScreenManager:
            id: manager

            menu_window: menu_window
            stats_window: stats_window
            history_window: history_window

            MenuWindow:
                id: menu_window

            StatsWindow:
                id: stats_window

            HistoryWindow:
                id: history_window


<ContentNavigationDrawer>:
    cols: 1
    orientation: "vertical"

    OneLineListItem:
        text: "Menu"

        size_hint: 1, None
        on_release: 
            app.root.nav_drawer.set_state("close")
            app.root.manager.current = "menu"

    OneLineListItem:
        text: "Statistics"

        size_hint: 1, None
        on_release: 
            app.root.nav_drawer.set_state("close")
            app.root.manager.current = "stats"

    OneLineListItem:
        text: "History"

        size_hint: 1, None
        on_release: 
            app.root.nav_drawer.set_state("close")
            app.root.manager.current = "history"

And here's a tiny bit of my Python code:

# there were lots of lines in each class representing screens,
# so I only left the ContentNavigationDrawer class, which is,
# as you already figured it out, supposed to represent content
# displayed in the MDNavigationDrawer.


class ContentNavigationDrawer(GridLayout):
    pass

Thanks in advance!




Problem

The Navigation Drawer appears transparent because it was placed before the ScreenManager.

Solution

Place MDNavigationDrawer: after ScreenManager:

Snippets

NavigationLayout:
    x: tb.height

    ScreenManager:
        id: manager

        ...
        HistoryWindow:
            id: history_window

    MDNavigationDrawer:
        id: nav_drawer

        ContentNavigationDrawer:

Output

KivyMD MDNavigationDrawer




This is the closest I've come to a multiple screen example having the MDNavigationLayout and a separate .kv file.

If there is any possible way you could share the git code for this or additional code I would greatly appreciate it.


반응형