如何在 KivyMD 中隐藏 MDcard 并切换到另一个？

Question

您好，我正在尝试在 KivyMD 框架中制作一个简单的身份验证应用程序。于是，我做了两张MDcard，一张代表登录窗口，一张代表登录后的内容。代码如下：

#kv file
Screen:

    MDCard:
        id: login_card
        size_hint: None, None
        size: 300, 400
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        elevation: 10
        padding: 25
        spacing: 25
        orientation: 'vertical'

        MDLabel:
            text: "WELCOME"
            font_size: 40
            halign: 'center'
            size_hint_y: None
            height: self.texture_size[1]
            padding_y: 15

        MDTextFieldRound:
            id: username
            hint_text: "username"
            icon_right: "account"
            size_hint_x: None
            width: 200
            font_size: 18
            pos_hint: {"center_x": 0.5}

        MDTextFieldRound:
            id: password
            hint_text: "password"
            icon_right: "eye-off"
            size_hint_x: None
            width: 200
            font_size: 18
            pos_hint: {"center_x": 0.5}
            password: True

        MDLabel:
            id: response_label
            font_size: 12
            pos_hint: {"center_x": 0.5}

        MDRoundFlatButton:
            text: "LOG IN"
            font_size: 12
            pos_hint: {"center_x": 0.5}
            on_press: app.logger()


    MDCard:
        id: user_card
        size_hint: None, None
        size: 1100, 650
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        elevation: 10
        padding: 25
        spacing: 25
        orientation: 'vertical'
        opacity: 0

        MDLabel:
            id: hello_user
            font_size: 40
            halign: 'center'
            size_hint_y: None
            height: self.texture_size[1]
            padding_y: 5

        MDLabel:
            id: user_website
            font_size: 25
            halign: 'center'
            size_hint_y: None
            height: self.texture_size[1]
            padding_y: 1

        MDRoundFlatButton:
            text: "Start Testing"
            font_size: 20
            pos_hint: {"center_x": 0.5}

        MDCard:
            size_hint: None, None
            size: 1000, 300
            pos_hint: {"center_x": 0.5, "center_y": 0.5}
            padding: 25
            spacing: 25
            orientation: 'vertical'

            MDLabel:
                text: "Website tests result will be printed here in next version of PEN-TEST-TOOL"
                font_size: 20
                halign: 'center'

        MDRoundFlatButton:
            text: "Log out"
            font_size: 20
            pos_hint: {"center_x": 0.5}
            on_press: app.logout()

# py file
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.core.window import Window

Window.size = (1280, 720)


class MainApp(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        self.theme_cls.primary_palette = "BlueGray"
        return Builder.load_file('login.kv')

    def logger(self):
        self.root.ids.login_card.opacity = 0
        self.root.ids.hello_user.text = f"Hello {self.root.ids.username.text}"
        self.root.ids.user_card.opacity = 1

    def logout(self):
        self.root.ids.user_card.opacity = 0
        self.root.ids.login_card.opacity = 1


MainApp().run()

所以我尝试玩一下 opacity，按下登录按钮后，我将 login_card opacity 设置为 0，并将 user_card opacity 设置为 1。但这显然是一个不好的解决方案，因为它会隐藏元素但不会停用它们，并且仍然可以单击上一页中的文本输入和按钮。这很糟糕，这不是我想要的。

隐藏一张卡片并展示另一张卡片的正确方法是什么？

Answer 1

这正是ScreenManager 和Screen 的用途。这是使用ScreenManager的代码的修改版本：

kv:

#kv file
ScreenManager
    MDScreen:
        name: 'login'

        MDCard:
            id: login_card
            size_hint: None, None
            size: 300, 400
            pos_hint: {"center_x": 0.5, "center_y": 0.5}
            elevation: 10
            padding: 25
            spacing: 25
            orientation: 'vertical'
    
            MDLabel:
                text: "WELCOME"
                font_size: 40
                halign: 'center'
                size_hint_y: None
                height: self.texture_size[1]
                padding_y: 15
    
            MDTextFieldRound:
                id: username
                hint_text: "username"
                icon_right: "account"
                size_hint_x: None
                width: 200
                font_size: 18
                pos_hint: {"center_x": 0.5}
    
            MDTextFieldRound:
                id: password
                hint_text: "password"
                icon_right: "eye-off"
                size_hint_x: None
                width: 200
                font_size: 18
                pos_hint: {"center_x": 0.5}
                password: True
    
            MDLabel:
                id: response_label
                font_size: 12
                pos_hint: {"center_x": 0.5}
    
            MDRoundFlatButton:
                text: "LOG IN"
                font_size: 12
                pos_hint: {"center_x": 0.5}
                on_press: app.logger()

    MDScreen:
        name: 'user'
        
        MDCard:
            id: user_card
            size_hint: None, None
            size: 1100, 650
            pos_hint: {"center_x": 0.5, "center_y": 0.5}
            elevation: 10
            padding: 25
            spacing: 25
            orientation: 'vertical'
            # opacity: 0 # no longer needed
    
            MDLabel:
                id: hello_user
                font_size: 40
                halign: 'center'
                size_hint_y: None
                height: self.texture_size[1]
                padding_y: 5
    
            MDLabel:
                id: user_website
                font_size: 25
                halign: 'center'
                size_hint_y: None
                height: self.texture_size[1]
                padding_y: 1
    
            MDRoundFlatButton:
                text: "Start Testing"
                font_size: 20
                pos_hint: {"center_x": 0.5}
    
            MDCard:
                size_hint: None, None
                size: 1000, 300
                pos_hint: {"center_x": 0.5, "center_y": 0.5}
                padding: 25
                spacing: 25
                orientation: 'vertical'
    
                MDLabel:
                    text: "Website tests result will be printed here in next version of PEN-TEST-TOOL"
                    font_size: 20
                    halign: 'center'
    
            MDRoundFlatButton:
                text: "Log out"
                font_size: 20
                pos_hint: {"center_x": 0.5}
                on_press: app.logout()

.py:

# py file
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.core.window import Window

Window.size = (1280, 720)


class MainApp(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        self.theme_cls.primary_palette = "BlueGray"
        return Builder.load_file('login.kv')

    def logger(self):
        self.root.current = 'user'  # just switch to the other Screen
        self.root.ids.hello_user.text = f"Hello {self.root.ids.username.text}"

    def logout(self):
        self.root.current = 'login'  # switch back to the login Screen


MainApp().run()