Kivy MD密码输入框过长Helper Text适配问题求助

问题描述 #

在Kivy MD中为密码输入框添加验证提示文本（Helper Text），输入无效密码时触发显示，但因提示文本内容较长，无法完整适配显示区域。

相关Python代码片段 #

def AddToRecord(self, email, passw, name, cpass):
        email.error = False
        passw.error = False
        name.error = False
        cpass.error = False

        NewEmail = email.text
        NewName  = name.text
        NewPassword = passw.text
        ConfirmPassword = cpass.text
        if  len(NewName) and len(NewEmail) and len(NewPassword) and len(ConfirmPassword)> 0:
            if (len(NewPassword)>8 and any(char in (set(string.punctuation)) for char in (NewPassword)) and
                    any(char in (set(string.punctuation)) for char in (NewPassword)) and
                    any(char in (set(string.ascii_uppercase)) for char in (NewPassword)) and
                    any(char in (set(string.ascii_lowercase)) for char in (NewPassword)) and
                    any(char in (set(string.digits)) for char in (NewPassword))):
                if NewPassword == ConfirmPassword:
                    # Connect to or create a new database
                    conn = sqlite3.connect('UserRecords.db')
                    # Create a cursor object to execute SQL commands
                    cursor = conn.cursor()
                    # Create a table to store the records
                    cursor.execute('''CREATE TABLE IF NOT EXISTS users (name TEXT, email TEXT, password TEXT)''')
                    # Insert the user's information into the table
                    cursor.execute("INSERT INTO users (name, email, password) VALUES (?, ?, ?)", (NewName, NewEmail, NewPassword))
                    # Committing the changes and closing the connection to the database file
                    conn.commit()
                    conn.close()
                else:
                    cpass.helper_text = "The passwords you have entered do not match"
                    cpass.error = True
            else:
                passw.helper_text = """Your password needs to be a minium of 8 characters and must 
                contain a number, lowercase letter, upper case letter and special character (@!#$, ETC)"""
                passw.error = True
        else:
            if len(NewName) <1  and len(NewEmail) >0:
                name.error = True
            elif len(NewPassword) <1 and len(NewEmail) >0:
                passw.helper_text = "This is a required feild"
                passw.error = True
            elif len(ConfirmPassword) <1 and len(NewEmail) >0:
                cpass.helper_text = "This is required field"
                cpass.error = True

相关KV文件片段 #

<SignupScreen>:
    ScrollView:
        FloatLayout:
            size_hint: (1, 1.3)

            MDIconButton:
                icon: "keyboard-backspace"
                pos_hint: {"center_x": 0.35, "center_y": 0.97}
                on_release:
                    root.manager.current = "menu"

            Image:
                source: "Images/RegisterImage.png"
                size_hint_x: 0.4
                size_hint_y: 0.75
                allow_stretch: True
                pos_hint: {"center_x": 0.5, "center_y": 0.75}

            MDLabel:
                text: "Sign up"
                halign: "center"
                pos_hint: {"center_x": 0.387, "center_y": 0.54}
                font_size: 30
                font_style: "H5"

            EmailField:
                id: email_widget
                hint_text: "Email"
                pos_hint: {"center_x": 0.5, "center_y": 0.48}
                size_hint_x: None
                width: "250dp"

            NameField:
                id: name_widget
                hint_text: "Name"
                pos_hint: {"center_x": 0.5, "center_y": 0.39}
                size_hint_x: None
                width: "250dp"

            PasswordField:
                id: passw_widget
                size_hint_x: None
                width: "250dp"
                hint_text: "Password"
                pos_hint: {"center_x": 0.5, "center_y": 0.3}

            ConfirmPasswordField:
                id: cpass_widget
                size_hint_x: None
                width: "250dp"
                hint_text: "Confirm Password"
                pos_hint: {"center_x": 0.5, "center_y": 0.21}


            MDFillRoundFlatButton:
                text: "Sign up"
                pos_hint: {"center_x": 0.5, "center_y": 0.12}
                md_bg_color: 0.3607, 0.3882, 1
                size_hint: 0.3, 0
                on_release:
                    app.AddToRecord(root.ids.email_widget.ids.email_field, root.ids.passw_widget.ids.text_field, root.ids.name_widget.ids.name_field,
                    root.ids.cpass_widget.ids.text_field)

            MDLabel:
                text: "by continuing you agree to the"
                font_size: 15
                halign: 'center'
                pos_hint: {"center_y": 0.08}

            MDTextButton:
                text: "Terms and Conditions"
                font_size: 15
                pos_hint: {"center_x": 0.5, "center_y": 0.066}
                theme_text_color: "Custom"
                text_color: 0.3607, 0.3882, 1

#Custom buttons and text fields are located below

<PasswordField>:
    size_hint_y: None
    height: text_field.height

    MDTextField:
        id: text_field
        hint_text: root.hint_text
        text: root.text
        password: True
        icon_left: "lock"
        ##need to try and fix this helper text, attempt below. It is labeled attempt 1
        helper_text: "Your password needs to be a minium of 8 characters and must contain a number, lowercase letter, upper case letter and special character (@!#$, ETC)"
        helper_text_mode: "on_error"

    MDIconButton:
        icon: "eye-off"
        pos_hint: {"center_y": .5}
        pos: text_field.width - self.width + dp(8), 0
        theme_text_color: "Hint"
        on_release:
            self.icon = "eye" if self.icon == "eye-off" else "eye-off"
            text_field.password = False if text_field.password is True else True

##this label needs to be fixed or alternative solution's - attempt 1
    #MDLabel:
        #id: passw_helper
        #text: ""
        #font_size: 20
        #halign: 'left'
        #pos_hint: {"center_y": -0.1}

<ConfirmPasswordField>:
    size_hint_y: None
    height: text_field.height

    MDTextField:
        id: text_field
        hint_text: root.hint_text
        text: root.text
        password: True
        icon_left: "lock"
        helper_text: ""
        helper_text_mode: "on_error"

    MDIconButton:
        icon: "eye-off"
        pos_hint: {"center_y": .5}
        pos: text_field.width - self.width + dp(8), 0
        theme_text_color: "Hint"
        on_release:
            self.icon = "eye" if self.icon == "eye-off" else "eye-off"
            text_field.password = False if text_field.password is True else True

<EmailField>:
    size_hint_y: None
    height: email_field.height

    MDTextField:
        id: email_field
        hint_text: root.hint_text
        text: root.text
        icon_left: "email"
        helper_text: "Please enter a valid email"
        validator: "email"
        helper_text_mode: "on_error"

<NameField>:
    size_hint_y: None
    height: name_field.height

    MDTextField:
        id: name_field
        hint_text: root.hint_text
        text: root.text
        icon_left: "account"
        helper_text: "This is a required field"
        helper_text_mode: "on_error"

解决方案 #

方法1：手动换行+调整容器高度 #

MDTextField的helper text默认不自动换行，可手动拆分文本并增加容器高度：

1. 修改KV中PasswordField内MDTextField的helper_text，插入\n拆分长文本：

helper_text: "Your password needs to be a minimum of 8 characters\nand must contain a number, lowercase letter,\nupper case letter and special character (@!#$, ETC)"

2. 调整PasswordField的高度，预留多行文本空间：

<PasswordField>:
    size_hint_y: None
    height: text_field.height + dp(40)

方法2：自定义提示文本容器 #

替换默认helper text为独立的MDLabel，更灵活控制显示：

1. 启用KV中PasswordField里注释的MDLabel，移除默认helper text配置：

<PasswordField>:
    size_hint_y: None
    height: text_field.height + dp(40)

    MDTextField:
        id: text_field
        hint_text: root.hint_text
        text: root.text
        password: True
        icon_left: "lock"
        helper_text: ""
        helper_text_mode: "none"

    MDIconButton:
        # 保留原有按钮配置

    MDLabel:
        id: passw_helper
        text: ""
        font_size: 12
        halign: 'left'
        pos_hint: {"center_x": 0.5, "center_y": -0.3}
        size_hint_x: 1
        text_color: (1,0,0,1)

2. 在Python代码中触发错误时，设置自定义Label的文本：

else:
    passw.ids.passw_helper.text = "Your password needs to be a minimum of 8 characters and must contain a number, lowercase letter, upper case letter and special character (@!#$, ETC)"
    passw.error = True

方法3：调整输入框宽度与提示文本字号 #

• 增加PasswordField的宽度，给提示文本更多显示空间：

PasswordField:
    id: passw_widget
    size_hint_x: None
    width: "300dp"

• 减小提示文本字号，在MDTextField中添加配置：

helper_text_font_size: 12

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