Kivy - 根据 If 语句的结果显示/隐藏矩形

Question

我有一个“电子邮件”文本框，它接收用户输入，然后评估它是否是有效的电子邮件。如果电子邮件无效，我想在文本框周围显示一个红色矩形，如果相反，则隐藏它。我已经绘制了矩形，现在只需切换其可见性即可。

user.py

"""User-end software for signup/account data."""
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty
import re


class LoginScreen(Widget):
    """Class for signup screen contents."""

    email = StringProperty()
    password = StringProperty()

    def login(self):
        """Actions for when Login button is pressed."""
        if not re.fullmatch(r"[^@]+@[^@]+\.[^@]+", self.email):  # Check if email is valid
            print("Invalid email!")  # Hide rectangle instead of this


class UserApp(App):
    """Main app."""

    def build(self):
        """Build app."""
        return LoginScreen()


if __name__ == '__main__':
    UserApp().run()

user.kv

#:kivy 1.11.1

<LoginScreen>:
    email: email_input.text
    password: password_input.text
    canvas:
        Color:
            rgba: 1, 0, 0, 1
        Rectangle:  # show/hide this object
            size:  root.width * 5 / 7 + 6, 46
            pos: root.width * 1 / 7 - 3, root.top - 259
    Label:
        font_size: 20
        center_x: root.width / 2
        top: root.top + 20
        text: "Offbox Insurance"
    Label:
        font_size: 64
        center_x: root.width / 2
        top: root.top - 30
        text: "Log in"
    Label:
        font_size: 20
        center_x: root.width / 2
        top: root.top - 140
        text: "Email"
    TextInput:
        id: email_input
        font_size: 24
        height: 40
        width: root.width * 5 / 7
        center_x: root.width / 2
        top: root.top - 216
        multiline: False
    Label:
        font_size: 20
        center_x: root.width / 2
        top: root.top - 240
        text: "Password"
    TextInput:
        id: password_input
        font_size: 24
        height: 40
        width: root.width * 5 / 7
        center_x: root.width / 2
        top: root.top - 316
        multiline: False
        password: True
    Button:
        font_size: 20
        height: 50
        center_x: root.width / 2
        top: root.top - 380
        text: "Log in"
        on_press: root.login()
    Label:
        font_size: 16
        center_x: root.width / 2
        top: root.height / 12 + 75
        text: "Don't have an account?"
    Button:
        font_size: 16
        height: 36
        center_x: root.width / 2
        top: root.height / 12 + 5
        text: "Sign up"

Answer 1

好的。所以。这就是我会这样做的方式，这是一个工作示例。当您加载它时，我会将矩形保持黑色，然后如果无效则将其变为红色。所以我把画布放在一个小部件中，这样我就可以为它分配一个id，并将valid_color设置为黑色代码，然后将rgba设置为valid(color)。在登录函数内部，如果无效，我更改了有效颜色的值，如果有效，则将其保留为黑色，如果之前无效，则将其更改回黑色。代码如下：

user.py:

"""User-end software for signup/account data."""
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty
import re


class LoginScreen(Widget):
    """Class for signup screen contents."""

    email = StringProperty()
    password = StringProperty()

    def login(self):
        """Actions for when Login button is pressed."""
        if not re.fullmatch(r"[^@]+@[^@]+\.[^@]+", self.email):  # Check if email is valid
            print("Invalid email!")  # Hide rectangle instead of this
            self.ids.valid_login.valid_color = (1, 0, 0, 1)
        else:
            print('Valid Email!')
            self.ids.valid_login.valid_color = (0, 0, 0, 0)



class UserApp(App):
    """Main app."""

    def build(self):
        """Build app."""
        return LoginScreen()


if __name__ == '__main__':
    UserApp().run()

user.kv

#:kivy 1.11.1

<LoginScreen>:
    email: email_input.text
    password: password_input.text
    Widget:
        id: valid_login
        valid_color:(0, 0, 0, 0)
        canvas:
            Color:
                rgba: self.valid_color
            Rectangle:
                size:  root.width * 5 / 7 + 6, 46
                pos: root.width * 1 / 7 - 3, root.top - 259
    Label:
        font_size: 20
        center_x: root.width / 2
        top: root.top + 20
        text: "Offbox Insurance"
    Label:
        font_size: 64
        center_x: root.width / 2
        top: root.top - 30
        text: "Log in"
    Label:
        font_size: 20
        center_x: root.width / 2
        top: root.top - 140
        text: "Email"
    TextInput:
        id: email_input
        font_size: 24
        height: 40
        width: root.width * 5 / 7
        center_x: root.width / 2
        top: root.top - 216
        multiline: False
    Label:
        font_size: 20
        center_x: root.width / 2
        top: root.top - 240
        text: "Password"
    TextInput:
        id: password_input
        font_size: 24
        height: 40
        width: root.width * 5 / 7
        center_x: root.width / 2
        top: root.top - 316
        multiline: False
        password: True
    Button:
        font_size: 20
        height: 50
        center_x: root.width / 2
        top: root.top - 380
        text: "Log in"
        on_press:
            root.login()
    Label:
        font_size: 16
        center_x: root.width / 2
        top: root.height / 12 + 75
        text: "Don't have an account?"
    Button:
        font_size: 16
        height: 36
        center_x: root.width / 2
        top: root.height / 12 + 5
        text: "Sign up"

如果您计划制作多个页面，我还建议您继续实施屏幕管理器，但我给出的解决了验证问题。希望这会有所帮助！