JavaFX | 解决 PasswordField 不包含显示密码功能的问题

前言

由于 JavaFX 自带的 PasswordField 控件无法自己选择是否显示密码的功能，因此本文就介绍一种方式去实现这个功能，完整代码已同步到 GitHub，可到该链接进行查看。

效果

最终实现了类似如下的效果：

解决方案

在展示代码之前，我先来说一下总体的设计思路：如动态图里所示，首先先在 PassWordField 右侧通过设置设置背景图的方式在右侧放置图片，然后设置 PassWordField 的鼠标点击监听事件，当鼠标点击的区域位于闭眼图标附近时，就将面板里的 PassWordField 控件移除，并添加一个 TextField 控件，并在右侧放置一个 👁 图标，此外 PasswordField 控件与 TextField 控件均需对各自的textProperty()设置监听事件，实时更新password属性，以便两个控件可以同步password内容。

代码

由于代码已同步到链接，故本文只展示核心代码(以下代码中的password属性属于类中的成员变量)：

1. 鼠标点击监听事件

   private void setOnClickAction(AnchorPane root, TextField removeFiled, TextField addField) {
       // 设置点击 👁 时图标及输入框的切换，以便显示/隐藏密码
       // 此外还需要设置控件的 password 文本，以便同步
       removeFiled.setOnMouseClicked(event -> {
           // 粗略判断是否移动到 👁 附近的位置
           double x = removeFiled.getWidth() + 70;
           if (event.getSceneX() > x) {
               root.getChildren().remove(removeFiled);
               root.getChildren().add(addField);
               addField.setText(password);
           }
       });
   }
   
   

2. 控件的textProperty()监听事件

   field.textProperty().addListener((observable, oldValue, newValue) -> password = newValue);
   

3. 设置 👁 图标的 css 代码

   #hidPwd, #disPwd {
       -fx-cursor: text;
       -fx-padding: 5 32 5 5;
       -fx-background-repeat: no-repeat;
       -fx-background-position: right 10 center;
   }
   

总结

本文简略地介绍了 JavaFX 如何解决 PasswordField 无法显示密码问题地一种解决方式，当然还有通过checkbox控件来进行切换的各种方式，大家都可以分享一下自己的解决方式，如何本文或者代码代码有错误或者不当之处，也请您能够和我交流。