眨眼睛查看密码工具类

"眨眼睛查看密码"工具类实现思路：

一、核心功能

实现点击眼睛图标切换密码明文/星号显示，提升表单输入体验。包含以下关键功能：

• 初始状态：密码框显示为星号，闭眼图标可见。

• 点击闭眼图标：切换为明文显示，睁眼图标可见。

• 点击睁眼图标：恢复星号显示，闭眼图标可见。

二、组件准备

两个输入框
• PasswordField：默认显示星号的密码输入框。
• TextField：显示明文的文本框（初始隐藏）。
两个图标控件
• ImageView openEye：睁眼图标（初始隐藏）。
• ImageView closeEye：闭眼图标（初始显示）。

三、实现步骤

1. 初始化状态

• 隐藏明文框 ：visiblePasswordField.setVisible(false)

• 显示密码框 ：passwordField.setVisible(true)

• 图标状态：显示闭眼图标，隐藏睁眼图标。

2. 事件绑定

• 监听两个图标的点击事件：无论点击哪个图标，触发切换逻辑。

java 复制代码

openEye.setOnMouseClicked(e -> handleOpenEye());
closeEye.setOnMouseClicked(e -> handleOpenEye());

3. 切换逻辑实现

• 判断当前显示状态：根据明文框是否可见决定下一步动作。

java 复制代码

boolean isPasswordVisible = visiblePasswordField.isVisible();

• 切换到明文显示 ：

• 将密码框内容复制到明文框：visiblePasswordField.setText(passwordField.getText())

• 显示明文框，隐藏密码框。

• 切换图标状态：显示睁眼，隐藏闭眼。

• 切换到星号显示 ：

• 将明文内容复制回密码框：passwordField.setText(visiblePasswordField.getText())

• 显示密码框，隐藏明文框。

• 切换图标状态：显示闭眼，隐藏睁眼。

四、关键问题处理

• 文本同步 ：切换时同步内容，避免切换后数据不一致。

• 焦点管理 ：切换时保持输入焦点，避免用户需要重新点击输入框。

• 空值处理 ：确保null或空字符串时不会抛出异常。

五、优化建议

• 双向绑定 （可选）：

使用JavaFX属性绑定，实现两个输入框内容实时同步，避免手动复制。

java 复制代码

visiblePasswordField.textProperty().bindBidirectional(passwordField.textProperty());

• 图标样式 ：

添加CSS悬浮效果（如手指光标），提升用户体验。

• 输入监听 ：

限制明文框的输入类型（如仅允许特定字符）。

六、使用示例

java 复制代码

// 在FXML控制器中初始化工具类
ExchangeEyeTUtil eyeUtil = new ExchangeEyeTUtil(
    visiblePwdField, 
    passwordField, 
    openEyeIcon, 
    closeEyeIcon
);

总结：该工具类通过状态切换和事件监听，实现密码可见性控制，核心在于正确处理组件显示/隐藏状态及内容同步。开发者可结合具体需求进行扩展优化。

java 复制代码

package com.example.demo6.util;

import javafx.fxml.FXML;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.image.ImageView;

public class ExchangeEyeTUtil {
    private final TextField visiblePasswordField;
    private final PasswordField passwordField;
    private final ImageView openEye;
    private final ImageView closeEye;

    public ExchangeEyeTUtil(TextField visiblePasswordField, PasswordField passwordField, ImageView openEye, ImageView closeEye) {
        this.visiblePasswordField = visiblePasswordField;
        this.passwordField = passwordField;
        this.openEye = openEye;
        this.closeEye = closeEye;
        // 初始状态设置
        initialize();
    }


    @FXML
    private void initialize() {
        // 初始化时隐藏明文输入框和睁眼图标
        visiblePasswordField.setVisible(false);
        openEye.setVisible(false);
        closeEye.setVisible(true);
    }

    @FXML
    public void handleOpenEye() {
        // 判断当前是否显示明文
        boolean isPasswordVisible = visiblePasswordField.isVisible();

        if (isPasswordVisible) {
            // 切换到密码隐藏状态
            passwordField.setText(visiblePasswordField.getText());
            passwordField.setVisible(true);
            visiblePasswordField.setVisible(false);
            openEye.setVisible(false);
            closeEye.setVisible(true);
        } else {
            // 切换到明文显示状态
            visiblePasswordField.setText(passwordField.getText());
            visiblePasswordField.setVisible(true);
            passwordField.setVisible(false);
            openEye.setVisible(true);
            closeEye.setVisible(false);
        }
    }
}