鼠标悬停时显示下拉菜单

Question

我想创建这样的下拉菜单：

我希望当我将鼠标放在文本上以查看可用于选择值的组合框时。当我删除鼠标时，我想看到简单的标签。我怎么能这样做？

Answer 1

Unhovered：

悬停：

点击并选择：

选择完成：

import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class Hoverboard extends Application {

    public class TextChooser extends StackPane {
        private Label label = new Label();
        private ComboBox<String> combo = new ComboBox<>();

        public TextChooser(String... options) {
            StackPane.setAlignment(label, Pos.CENTER_LEFT);
            StackPane.setAlignment(combo, Pos.CENTER_LEFT);

            label.textProperty().bind(
                combo.getSelectionModel().selectedItemProperty()
            );
            label.visibleProperty().bind(
                combo.visibleProperty().not()
            );
            label.setPadding(new Insets(0, 0, 0, 9));

            combo.getItems().setAll(options);
            combo.getSelectionModel().select(0);
            combo.setVisible(false);

            label.setOnMouseEntered(event -> combo.setVisible(true));
            combo.showingProperty().addListener(observable -> {
                if (!combo.isShowing()) {
                    combo.setVisible(false);
                }
            });
            combo.setOnMouseExited(event -> {
                if (!combo.isShowing()) {
                    combo.setVisible(false);
                }
            });

            getChildren().setAll(label, combo);
        }
    }

    @Override
    public void start(Stage stage) throws Exception {
        TextChooser textChooser = new TextChooser(
            "xyzzy", "frobozz", "foobar"
        );

        VBox layout = new VBox(textChooser);
        layout.setPadding(new Insets(10));

        stage.setScene(new Scene(layout));
        stage.show();
    }

    public static void main(String[] args) {
        launch(Hoverboard.class);
    }

}

Answer 2

这里也是css样式版本：https://github.com/varren/JavaFX-CSS-Styled-ComboBox-Demo

与默认版本略有不同，但您可以使用css来获得所需内容。默认样式可在 jxrt.jar！/com/sun/javafx/scene/control/skin/caspian/caspian.css

中找到

<强> CSS

#changed{
    -fx-background-color: transparent;
}
#changed .arrow,
#changed .arrow-button{
    -fx-background-color: transparent;
}


/* this part is from  default stiles fxrt.jar!/com/sun/javafx/scene/control/skin/caspian/caspian.css */
#changed:hover{
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-radius: 5, 5, 4, 3;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-padding: 0;
}

#changed:showing > .arrow-button {
    -fx-color: -fx-pressed-base;
}

#changed:hover > .arrow-button > .arrow{
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}

<强> JAVA

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        HBox root = new HBox();
        primaryStage.setTitle("Combo Box Style From Css");


        ComboBox combobox = new ComboBox<String>(FXCollections.observableArrayList("One", "Two", "Three"));
        combobox.getSelectionModel().select(0);
        combobox.setId("changed");

        ComboBox normalCombobox = new ComboBox<String>(FXCollections.observableArrayList("One", "Two", "Three"));
        normalCombobox.getSelectionModel().select(0);

        root.getChildren().addAll(combobox, normalCombobox);
        Scene scene = new Scene(root, 300, 275);
        scene.setFill(Color.WHITE);
        String css = Main.class.getResource("styles.css").toExternalForm();
        scene.getStylesheets().clear();
        scene.getStylesheets().add(css);

        primaryStage.setScene(scene);
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

<强>样本

Answer 3

两种可能的方法：

1. 尝试使用CSS修改ComboBox的外观，使其看起来像普通的文本字段;隐藏箭头和边框，并重新显示它们：悬停。您将要查找ComboBox的CSS参考：http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#combobox

2. 使用普通的TextField，并在：hover上显示边框（和箭头）。将鼠标侦听器附加到TextField以在鼠标单击时显示PopupControl。将ListView放在PopupControl中，使其行为类似于ComboBox。您需要为弹出控件创建一个实现Skin的类。您应该可以在网上找到一些示例。