如何创建与导航抽屉配合使用的导航栏？

Question

我正在 kivymd 内学习材料设计。看到材料设计网站，我注意到它使用带有悬停事件的导航栏来添加导航抽屉的一些按钮。图片：

所以我尝试使用 kivymd 在我的 python 程序中创建它，但我的问题是当我移动悬停时，导航抽屉位于导航栏上方，如下所示：

我尝试使用pos、padding和spacing，但不改变位置。 pos_hint 有效，但是导航栏有绝对大小，所以它没有解决。我恢复的kv语言：

MDNavigationRail:
    id: nav_rail
    selected_color_background: app.theme_cls.primary_color
    ripple_color_item: app.theme_cls.primary_color
    font_name: app.COMFORTAA
    on_item_release: root._item_clicked(*args)
    MDNavigationRailContent:

MDNavigationLayout:
    MDScreenManager:

MDNavigationDrawer:
    id: nav_drawer
    radius: 0, 16, 16, 0
    elevation: 0.5
    font_size: '16dp'
    font_name: app.COMFORTAA
    padding_x: '100dp'
    width: "240dp"

Answer 1

我明白了！在经过大量的工作和尝试之前，我找到了一种方法来做到这一点

pos_hint

：

<MyScreen>:
    MDFloatLayout:
        MDBoxLayout:
            size: root.size
            pos: root.pos
            MDNavigationRail:
                id: nav_rail
                [...]
            MDBoxLayout:
                MDScreenManager:
                    [...]
        MDNavigationDrawer:
            id: nav_drawer
            pos_hint: {'x': nav_rail.width / root.width}
            [...]

首先我创建了一个MDFloatLayout，让MDNavigationDrawer可以有一个浮动位置。

pos_hint 是 MDNavigationRail 的宽度除以根部的宽度，它将给出相对于根部宽度的导轨末端百分比位置。

Peraps 这些我需要将 ScreenManager 和导轨放入 Box Layout 中，就像文档中的指导一样，并从 MDBoxLayout 中给出 MDFloatLayout 中的根大小和位置。

谢谢大家！

Answer 2

好问题！我想知道同样的事情。如果我弄清楚了，我会在这里发布。

Answer 3

这似乎解决了问题。动画在这里运行得很好，我相信你能弄清楚剩下的事情。

KV = '''

 MDScreen:

    MDBoxLayout:

        Widget:

            size_hint_x: None
            width: nav_rail.width

        MDScreen:

            Button:

                id: button
                text: str(self.width)
                size_hint: (1, 0.1)
                pos_hint: {"center_x": .5, "center_y": .5}
                on_release: nav_drawer.set_state("toggle")

            MDNavigationDrawer:
                id: nav_drawer
                radius: 0, dp(16), dp(16), 0

    MDNavigationRail:
        id: nav_rail
        md_bg_color: (0,0,0,1)
    '''