如何在MDScreenManager中为多屏幕共用一个MDTopAppBar？

要实现多个MDScreen共用一个MDTopAppBar，核心是将顶部栏从单个屏幕中剥离，放到所有屏幕的父容器层级中，避免重复编写组件。以下是修改后的完整代码：

from kivymd.app import MDApp
from kivy.lang import Builder
from kivymd.uix.screenmanager import MDScreenManager
from kivymd.uix.screen import MDScreen

c = '''
<BuildApp>:
    MDNavigationLayout:
        # 用垂直布局包裹顶部栏和屏幕管理器，实现共用顶部栏
        MDBoxLayout:
            orientation: 'vertical'
            pos_hint: {"top": 1}
            
            MDTopAppBar:
                id: top_bar
                title: "Title"
                elevation: 4
                pos_hint: {"top": 1}
                left_action_items: [["menu", lambda x: app.root.ids.nav_drawer.set_state("open")]]
            
            MDScreenManager:
                id: screener
                FirstScreen:
                SecondScreen:
        
        MDNavigationDrawer:
            id: nav_drawer
            radius: (0, 16, 16, 0)

            MDNavigationDrawerMenu:
                MDNavigationDrawerItem:
                    icon: "android"
                    text: "Phone"
                    on_press: screener.current = "page2"

                MDNavigationDrawerItem:
                    icon: "home"
                    text: "Home"
                    on_press: screener.current = "page1"

<FirstScreen>:
    name: "page1"
    MDBoxLayout:
        orientation: 'vertical'
        pos_hint: {"top": 1}
        
        MDFloatingActionButton:
            icon: "home"
            md_bg_color: app.theme_cls.primary_color
            pos_hint: {"center_x":.5}
        
        Widget:

<SecondScreen>:
    name: "page2"
    ScrollView:
        MDList:
            id: stuffs
            OneLineListItem:
                text: "Hi"
'''

class FirstScreen(MDScreen):
    pass

class SecondScreen(MDScreen):
    pass

class BuildApp(MDScreen):
    pass

class DemoApp(MDApp):
    def build(self):
        self.theme_cls.primary_palette = "Yellow"
        Builder.load_string(c)
        return BuildApp()
    
    def on_start(self):
        # 监听屏幕切换，动态更新顶部栏标题
        self.root.ids.screener.bind(current=self.update_top_bar_title)
    
    def update_top_bar_title(self, instance, current_screen):
        top_bar = self.root.ids.top_bar
        if current_screen == "page1":
            top_bar.title = "首页"
        elif current_screen == "page2":
            top_bar.title = "电话页"

DemoApp().run()

关键修改说明 #

• 布局重构：在MDNavigationLayout内部新增垂直MDBoxLayout，将MDTopAppBar与MDScreenManager作为子组件放入其中，确保顶部栏固定在所有屏幕的上方。
• 移除重复组件：删除每个MDScreen内部的MDTopAppBar，简化屏幕布局代码。
• 动态适配交互：通过监听屏幕管理器的current属性变化，可根据当前活跃屏幕动态修改顶部栏的标题、操作按钮等属性，满足不同页面的个性化需求。

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