首页 > 解决方案 > 为 KivyMD 中的图标赋予功能

问题描述

我想为在 TextField 中输入的图标提供一个功能,我想为它提供一个典型的功能,该功能具有密码的“眼睛离开”图标,当您按下图标时,将功能“密码”更改为 False,图标更改为'eye-on',如果我再次按下它,更改为True并且图标返回'eye-off',让我解释一下,这是我的主要代码:

from kivymd.app import MDApp
from kivymd.uix.screen import Screen
from kivymd.uix.button import MDRectangleFlatButton, MDIconButton
from kivy.lang import Builder
from helpers import *



class DemoApp(MDApp):

    def build(self):
        screen = Screen()
        self.theme_cls.primary_palette = 'Yellow'
        self.theme_cls.theme_style = 'Dark'

        btn = MDRectangleFlatButton(text='Confirmar', pos_hint= {'center_x': 0.5, 'center_y': 0.35},
                                    on_release= self.show_data)

        self.username = Builder.load_string(username_helper)
        self.contraseña = Builder.load_string(contraseña_helper)

        screen.add_widget(self.username)
        screen.add_widget(self.contraseña)
        screen.add_widget(btn)
        return screen

    def show_data(self, obj):
        print(f'Usuario: {self.username.text}\nContraseña: {self.contraseña.text}')

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

在这里,我的文件处于字符串模式,这是我导入的助手模块:

username_helper = '''
MDTextField:
    hint_text: 'Usuario'
    required: True
    helper_text: 'Enter text'
    helper_text_mode: 'on_error'
    pos_hint: {'center_x': 0.5, 'center_y': 0.5}
    size_hint_x: None
    width: 200
'''

contraseña_helper = '''
MDTextField:
    hint_text: 'Contraseña'
    password: True
    icon_right: "eye-off"
    pos_hint: {'center_x': 0.5, 'center_y':0.43}
    size_hint_x: None
    width: 200
'''

使用此配置,在输入密码时,一些字符串会出现星号,但我希望通过按下右侧的“眼睛离开”图标,我可以看到我正在输入的字符串,如果我再次按下它用'*'再次隐藏,依此类推。

标签: pythonkivyiconstextfieldkivy-language

解决方案


您可以通过这样的扩展来做到这MDTextField一点:

class MyMDTextField(MDTextField):
    password_mode = BooleanProperty(True)

    def on_touch_down(self, touch):
        if self.collide_point(*touch.pos):
            if self.icon_right:
                # icon position based on the KV code for MDTextField
                icon_x = (self.width + self.x) - (self._lbl_icon_right.texture_size[1]) - dp(8)
                icon_y = self.center[1] - self._lbl_icon_right.texture_size[1] / 2
                if self.mode == "rectangle":
                    icon_y -= dp(4)
                elif self.mode != 'fill':
                    icon_y += dp(8)

                # not a complete bounding box test, but should be sufficient
                if touch.pos[0] > icon_x and touch.pos[1] > icon_y:
                    if self.password_mode:
                        self.icon_right = 'eye'
                        self.password_mode = False
                        self.password = self.password_mode
                    else:
                        self.icon_right = 'eye-off'
                        self.password_mode = True
                        self.password = self.password_mode

                    # try to adjust cursor position
                    cursor = self.cursor
                    self.cursor = (0,0)
                    Clock.schedule_once(partial(self.set_cursor, cursor))
        return super(MyMDTextField, self).on_touch_down(touch)

    def set_cursor(self, pos, dt):
        self.cursor = pos

这会覆盖并检查是否on_touch_down()MDTextField图标附近发生触摸。如果是这样,它会切换图标passwordMDTextField.

你可以在你的kvas 中使用它:

contraseña_helper = '''
MyMDTextField:
    hint_text: 'Contraseña'
    password: True
    icon_right: "eye-off"
    pos_hint: {'center_x': 0.5, 'center_y':0.43}
    size_hint_x: None
    width: 200
'''

推荐阅读