如何使用复选框显示 javafx 中密码字段中的内容

Question

我是一名学习 java 和 javafx 的学生，如何使用复选框在密码字段中显示密码？我使用 gluon scenebuilder 作为我的 fxml 编辑器

Answer 1

上面列出了重复的正确但更复杂的方法。在这个答案中，我展示了两个例子。一个用a CheckBox，另一个用全视之眼。眼睛是用aStackPane来分层节点。对于CheckBox解决方案，把TextField然后PasswordField在StackPane。选中TextField toFront时带上CheckBox并使用 设置其文本PasswordField。未选中TextField时清除CheckBox并移动PasswordField toFront。对于All-seeing eye例如，使用相同的想法，但增加一个ImageView，并始终保持ImageView toFront。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class TestingGround extends Application
{
    Image image = new Image("https://previews.123rf.com/images/andrerosi/andrerosi1905/andrerosi190500216/123158287-eye-icon-vector-look-and-vision-icon-eye-vector-icon.jpg");

@Override
public void start(Stage primaryStage)
{
    HBox passwordControl1 = createPasswordFieldWithCheckBox();
    HBox passwordControl2 = createPasswordFieldWithCheckBox();
    StackPane passwordControl3 = createPasswordFieldWithEye();
    StackPane passwordControl4 = createPasswordFieldWithEye();

    VBox root = new VBox(passwordControl1, passwordControl2, passwordControl3, passwordControl4);

    Scene scene = new Scene(root, 300, 250);

    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

/**
 * @param args the command line arguments
 */
public static void main(String[] args)
{
    launch(args);
}

HBox createPasswordFieldWithCheckBox()
{
    PasswordField passwordField = new PasswordField();
    passwordField.setPrefHeight(50);
    TextField textField = new TextField();
    textField.setPrefHeight(50);
    passwordField.textProperty().bindBidirectional(textField.textProperty());

        StackPane stackPane = new StackPane(textField, passwordField);
        CheckBox checkBox = new CheckBox();
        checkBox.selectedProperty().addListener((observable, oldValue, newValue) -> {
            if (newValue) {
                textField.toFront();
            }
            else {
                passwordField.toFront();
            }
        });

        HBox root = new HBox(stackPane, checkBox);
        root.setSpacing(5);
        root.setAlignment(Pos.CENTER);

        return root;
    }

    StackPane createPasswordFieldWithEye()
    {
        PasswordField passwordField = new PasswordField();
        passwordField.setPrefHeight(50);
        TextField textField = new TextField();
        passwordField.textProperty().bindBidirectional(textField.textProperty());
        textField.setPrefHeight(50);
        ImageView imageView = new ImageView(image);
        imageView.setFitHeight(32);
        imageView.setFitWidth(32);
        StackPane.setMargin(imageView, new Insets(0, 10, 0, 0));
        StackPane.setAlignment(imageView, Pos.CENTER_RIGHT);
        imageView.setOnMousePressed((event) -> {
            textField.toFront();
            imageView.toFront();
        });

        imageView.setOnMouseReleased((event) -> {
            passwordField.toFront();
            imageView.toFront();
        });

        StackPane root = new StackPane(textField, passwordField, imageView);

        return root;
    }
}

Answer 2

您可以使用自定义Tooltip来显示密码：

import javafx.application.Application;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.beans.value.ChangeListener;
import javafx.geometry.Insets;
import javafx.geometry.Point2D;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;

public class FxMain extends Application {

    private SimpleBooleanProperty showPassword ;
    private CheckBox checkBox;
    private Tooltip toolTip;
    private PasswordField pF;

    private Stage stage;
    @Override
    public void start(Stage stage) {
        this.stage = stage;
        showPassword = new SimpleBooleanProperty();
        showPassword.addListener((ChangeListener<Boolean>) (observable, oldValue, newValue) -> {
            if(newValue){
                showPassword();
            }else{
                hidePassword();
            }
        });

        final Label message = new Label("");
        Label label = new Label("Password");

        toolTip = new Tooltip();
        toolTip.setShowDelay(Duration.ZERO);
        toolTip.setAutoHide(false);
        toolTip.setMinWidth(50);

        pF = new PasswordField();
        pF.setOnKeyTyped(e -> {
            if ( showPassword.get() ) {
                showPassword();
            }
        });

        HBox hb = new HBox(10, label, pF);
        hb.setAlignment(Pos.CENTER_LEFT);


        checkBox = new CheckBox("Show password");
        showPassword.bind(checkBox.selectedProperty());

        VBox vb = new VBox(10, hb, checkBox, message);
        vb.setPadding(new Insets(10));

        stage.setScene(new Scene(vb,300,100));
        stage.show();
    }

    private void showPassword(){
        Point2D p = pF.localToScene(pF.getBoundsInLocal().getMaxX(), pF.getBoundsInLocal().getMaxY());
        toolTip.setText(pF.getText());
        toolTip.show(pF,
                p.getX() + stage.getScene().getX() + stage.getX(),
                p.getY() + stage.getScene().getY() + stage.getY());
    }

    private void hidePassword(){
        toolTip.setText("");
        toolTip.hide();
    }
    public static void main(String[] args) {
        launch(args);
    }
}