我如何在 KivyMD 中隐藏 MDcard 并切换到另一个?
How do i hide MDcard and switch to another one in KivyMD?
您好,我正在尝试在 KivyMD
框架中制作一个简单的身份验证应用程序。于是,我做了两张MDcards,一张代表登录window,一张代表登录后的内容,代码如下:
#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()
所以我尝试使用不透明度,在按下登录按钮后,我将 login_card 不透明度设置为 0,将 user_card 不透明度设置为 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()
您好,我正在尝试在 KivyMD
框架中制作一个简单的身份验证应用程序。于是,我做了两张MDcards,一张代表登录window,一张代表登录后的内容,代码如下:
#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()
所以我尝试使用不透明度,在按下登录按钮后,我将 login_card 不透明度设置为 0,将 user_card 不透明度设置为 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()