如何在 kivy 图表上显示 kivy 上下文菜单？

Question

I am still figuring out kivy, so forgive me if this is a silly question. Essentially, I have an application that uses a graph to show data to the user. In addition, I would like to have an application menu at the top of the window with nested menus. This file does almost everything I want:

import kivy
from kivy.app import App
from kivy.lang import Builder
import kivy_garden.contextmenu
import kivy_garden.graph

kv = """
BoxLayout:
    orientation: 'vertical'
    id: layout
    AppMenu:
        id: app_menu
        top: root.height
        cancel_handler_widget: layout

        AppMenuTextItem:
            text: "Menu #1"
            ContextMenu:
                ContextMenuTextItem:
                    text: "Item #11"
                ContextMenuTextItem:
                    text: "Item #12"
        AppMenuTextItem:
            text: "Menu Menu Menu #2"
            ContextMenu:
                ContextMenuTextItem:
                    text: "Item #21"
                ContextMenuTextItem:
                    text: "Item #22"
                ContextMenuTextItem:
                    text: "ItemItemItem #23"
                ContextMenuTextItem:
                    text: "Item #24"
                    ContextMenu:
                        ContextMenuTextItem:
                            text: "Item #241"
                        ContextMenuTextItem:
                            text: "Hello, World!"
                            on_release: app.say_hello(self.text)
                        # ...
                ContextMenuTextItem:
                    text: "Item #5"
    Graph:
        border_color: [0, 0, 0, 0]
        #background_color: [0.25, 0.25, 0.25, 1]
"""

class MyApp(App):
    def build(self):
        self.title = 'Simple app menu example'
        return Builder.load_string(kv)

    def say_hello(self, text):
        print(text)
        self.root.ids['app_menu'].close_all()

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

You'll notice that when the menus appear, the white graph border covers them. If we uncomment the last line in the kivy builder string and give the graph a gray background color, the graph is drawn on top of the application menu and nothing appears when the menu is opened.

I know that kivy_garden.graph is using Canvas under the hood to draw itself. So, is there a way for widgets to draw on top of another widget's canvas? I have also tried using spinners and dropdowns to solve this issue, but to no avail.

Thanks for your help!

Answer 1

I think that is a result of the order in which children of the layout are drawn. With the Graph as the last item in the layout, it gets drawn last, over the menu. Here is a modified version of your kv that puts the menu last in the layout:

FloatLayout:
    id: layout
    Graph:
        size_hint: 1, None
        height: root.height - app_menu.height
        border_color: [0, 0, 0, 0]
        background_color: [0.25, 0.25, 0.25, 1]
    AppMenu:
        id: app_menu
        top: root.height
        cancel_handler_widget: layout

        AppMenuTextItem:
            text: "Menu #1"
            ContextMenu:
                ContextMenuTextItem:
                    text: "Item #11"
                ContextMenuTextItem:
                    text: "Item #12"
        AppMenuTextItem:
            text: "Menu Menu Menu #2"
            ContextMenu:
                ContextMenuTextItem:
                    text: "Item #21"
                ContextMenuTextItem:
                    text: "Item #22"
                ContextMenuTextItem:
                    text: "ItemItemItem #23"
                ContextMenuTextItem:
                    text: "Item #24"
                    ContextMenu:
                        ContextMenuTextItem:
                            text: "Item #241"
                        ContextMenuTextItem:
                            text: "Hello, World!"
                            on_release: app.say_hello(self.text)
                        # ...
                ContextMenuTextItem:
                    text: "Item #5"

I have used FloatLayout instead of BoxLayout in order to place the AppMenu last in the layout, and that required setting the height of the Graph (the height of the AppMenu is already fixed).