KivyMD：屏幕内容与工具栏重叠

Question

我正在使用KivyMD编写一个简单的应用程序。根据Kivy文档，我的.kv文件结构包含MDNavigationDrawer和MDToolbar是正确的，只要屏幕为空，一切都能正常工作。但当我向它们添加内容时，内容不是在工具栏下方，而是在其上方。我该如何修复它呢？

这是我的代码：

from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ObjectProperty

from kivymd.app import MDApp

KV = '''
<ContentNavigationDrawer>:

    ScrollView:

        MDList:

            OneLineListItem:
                text: "Screen 1"
                on_press:
                    root.nav_drawer.set_state("close")
                    root.screen_manager.current = "scr 1"

            OneLineListItem:
                text: "Screen 2"
                on_press:
                    root.nav_drawer.set_state("close")
                    root.screen_manager.current = "scr 2"


Screen:

    MDToolbar:
        id: toolbar
        pos_hint: {"top": 1}
        elevation: 10
        title: "Test"
        left_action_items: [["menu", lambda x: nav_drawer.set_state("open")]]

    NavigationLayout:
        x: toolbar.height

        ScreenManager:
            Screen:
                name: "scr 1"
                ScrollView:
                    BoxLayout:
                        orientation: "vertical"
                        Button:
                            text: "Hello"
                        Button:
                            text: "I wish"
                        Button:
                            text: "I could"
                        Button:
                            text: "Finally get"
                        Button:
                            text: "This to work"


            Screen:
                name: "scr 2"

                MDLabel:
                    text: "Screen 2"
                    halign: "center"

        MDNavigationDrawer:
            id: nav_drawer

            ContentNavigationDrawer:
                screen_manager: screen_manager
                nav_drawer: nav_drawer
'''


class ContentNavigationDrawer(BoxLayout):
    screen_manager = ObjectProperty()
    nav_drawer = ObjectProperty()


class TestNavigationDrawer(MDApp):
    def build(self):
        return Builder.load_string(KV)


TestNavigationDrawer().run()

以下代码的输出结果：

- GawronDev

Answer 1

Screen类是一个RelativeLayout，因此您必须像管理任何RelativeLayout一样位置其子级。每个Screen的子级都会获得默认的size_hint为(1,1)和pos的(0,0)，所以如果这不是您想要的，就必须进行调整。在您的情况下，NavigationLayout将基于这些默认值完全覆盖Screen。您可以通过添加size_hint_y来解决此问题，如下所示：

NavigationLayout:
    x: toolbar.height
    size_hint_y: 1.0 - toolbar.height/root.height

这将设置NavigationLayout的大小，使其仅与MDToolbar底部相接，而不是覆盖它。

- John Anderson

Answer 2

一个非常优雅的解决方案是将MDToolbar和NavigationLayout插入到一个BoxLayout中，其orientation: "vertical"，这样NavigationLayout就会从工具栏底部开始，而不需要计算相对位置。

Screen:
    BoxLayout:
        orientation: "vertical"

        MDToolbar:

        MDNavigationLayout:

- Simone

Answer 3

问题在于出现的顺序： 如果屏幕上有其他小部件，例如卡片和布局，则所有这些小部件都必须首先出现。

即将导航布局和相应的屏幕管理器放在底部。

最后出现的内容会显示在所有其他内容的顶部。

这对我很有效。

- Elvy Manun'Ebo