Kivy开发中Screen内容重叠覆盖MDNavigationDrawer导航栏问题

运行后Screen页面内所有内容重叠覆盖在导航栏之上，原实现代码如下：

MDNavigationLayout:
    ScreenManager:
        Screen:
            BoxLayout:
                orientation: "vertical"
                MDToolbar:
                    title: "My App"
                    left_action_items: [["menu",lambda x: nav_drawer.set_state("open")]]
                    
                    right_action_items: [["login",lambda x: app.login()]]
                    elevation: 10
                Widget:
                MDBottomAppBar:
                    MDToolbar:
                        left_action_items: [["white-balance-sunny",lambda x: app.dark()]]
                        mode: 'end'    
                        type: 'bottom'
                        icon: 'plus'
                        on_action_button: app.new()
    MDNavigationDrawer:
        id: nav_drawer
        BoxLayout:
            orientation: 'vertical'
            spacing: '8dp'
            padding: '8dp'
            Image:
                source: 'no_pfp.jpg'
            MDLabel:
                text: '         Naitik'
                font_style: 'Subtitle1'
                size_hint_y: None
                height: self.texture_size[1]
            MDLabel:
                text: '            contact@foxex.xyz'
                font_style: 'Caption'
                size_hint_y: None
                height: self.texture_size[1]
            ScrollView:
                MDList:
                    OneLineIconListItem:
                        text: 'Profile'
                        IconLeftWidget: 
                            icon: 'face-profile'
                    OneLineIconListItem:
                        text: 'Login'
                        IconLeftWidget: 
                            icon: 'login'

此前尝试将MDNavigationDrawer及其内部组件放置在ScreenManager上层，调整后导航栏变为透明，需要修复该问题。

问题原因 #

两个异常均为布局结构不符合KivyMD组件规范导致：

• MDNavigationLayout的官方固定子元素顺序为**[页面内容容器, 导航抽屉]**，调换二者顺序会破坏组件内置的层级、背景渲染逻辑，直接触发导航栏透明、抽屉层级错乱问题。
• 当前Screen下的BoxLayout仅预留了顶部栏、空占位区、底部栏三个位置，如果后续往Screen节点下直接添加页面内容、而非放在中间的占位容器内，新增内容会默认浮动在BoxLayout之上，直接覆盖上下导航栏。
• 新版本KivyMD中，未显式配置背景色的容器会默认使用透明背景，叠加elevation渲染逻辑时会出现视觉透传问题。

修复方案 #

1. 保留MDNavigationLayout下「ScreenManager在前，MDNavigationDrawer在后」的顺序，不要调换二者位置。
2. 给Screen内的根BoxLayout显式设置主题背景色，给MDNavigationDrawer添加elevation属性确保层级高于页面内容。
3. 将中间的空Widget替换为实际承载页面内容的容器，所有Screen内的业务组件都放在该容器内部，不要直接挂载在Screen节点下，避免浮动覆盖导航栏。
4. 给上下MDToolbar显式指定主题背景色，避免透明渲染异常。

修复后的可运行代码参考：

MDNavigationLayout:
    ScreenManager:
        Screen:
            BoxLayout:
                orientation: "vertical"
                # 显式设置页面背景色避免透传
                md_bg_color: app.theme_cls.bg_normal
                MDToolbar:
                    title: "My App"
                    left_action_items: [["menu",lambda x: nav_drawer.set_state("open")]]
                    right_action_items: [["login",lambda x: app.login()]]
                    elevation: 10
                    # 显式设置顶部栏背景色
                    md_bg_color: app.theme_cls.primary_color
                # 页面内容统一放在该容器内
                BoxLayout:
                    id: content_area
                    orientation: "vertical"
                    # 后续新增的页面组件全部放在这下面
                MDBottomAppBar:
                    MDToolbar:
                        left_action_items: [["white-balance-sunny",lambda x: app.dark()]]
                        mode: 'end'    
                        type: 'bottom'
                        icon: 'plus'
                        on_action_button: app.new()
                        # 显式设置底部栏背景色
                        md_bg_color: app.theme_cls.primary_color
    MDNavigationDrawer:
        id: nav_drawer
        # 设置抽屉海拔，确保层级高于页面内容
        elevation: 10
        BoxLayout:
            orientation: 'vertical'
            spacing: '8dp'
            padding: '8dp'
            Image:
                source: 'no_pfp.jpg'
            MDLabel:
                text: '         Naitik'
                font_style: 'Subtitle1'
                size_hint_y: None
                height: self.texture_size[1]
            MDLabel:
                text: '            contact@foxex.xyz'
                font_style: 'Caption'
                size_hint_y: None
                height: self.texture_size[1]
            ScrollView:
                MDList:
                    OneLineIconListItem:
                        text: 'Profile'
                        IconLeftWidget: 
                            icon: 'face-profile'
                    OneLineIconListItem:
                        text: 'Login'
                        IconLeftWidget: 
                            icon: 'login'

内容的提问来源于stack exchange，提问作者Rick astley