如何隐藏javafx中组合框上的向下箭头按钮？

Question

我有一个可编辑的ComboBox，我希望“隐藏”向下箭头按钮，使其看起来像一个普通的文本框。

Answer 1

使用css作为，

.combo-box .arrow, .combo-box .arrow-button{
    -fx-background-color: transparent;
}

示例代码：：

public class ComboboxSample extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    final Button button = new Button("Send");
    final Label notification = new Label();
    final TextField subject = new TextField("");
    final TextArea text = new TextArea("");

    String address = " ";

    @Override
    public void start(Stage stage) {
        stage.setTitle("ComboBoxSample");
        Scene scene = new Scene(new Group(), 450, 250);
// Load the css as below to the scene
        scene.getStylesheets()
                .add(ComboboxSample.class.getResource("styles.css").toExternalForm());

        final ComboBox emailComboBox = new ComboBox();
        emailComboBox.setEditable(true);
        emailComboBox.getItems().addAll("jacob.smith@example.com",
                "isabella.johnson@example.com", "ethan.williams@example.com",
                "emma.jones@example.com", "michael.brown@example.com");

        final ComboBox priorityComboBox = new ComboBox();
        priorityComboBox.getItems().addAll("Highest", "High", "Normal", "Low",
                "Lowest");

        priorityComboBox.setValue("Normal");

        GridPane grid = new GridPane();
        grid.setVgap(4);
        grid.setHgap(10);
        grid.setPadding(new Insets(5, 5, 5, 5));
        grid.add(new Label("To: "), 0, 0);
        grid.add(emailComboBox, 1, 0);
        grid.add(new Label("Priority: "), 2, 0);
        grid.add(priorityComboBox, 3, 0);
        grid.add(new Label("Subject: "), 0, 1);
        grid.add(subject, 1, 1, 3, 1);
        grid.add(text, 0, 2, 4, 1);
        grid.add(button, 0, 3);
        grid.add(notification, 1, 3, 3, 1);

        Group root = (Group) scene.getRoot();
        root.getChildren().add(grid);
        stage.setScene(scene);
        stage.show();
    }
}

输出：

Answer 2

.combo-box1 .arrow-button
{
    -fx-background-color: null;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0.0em 0em 0.0em 0.0em; /* 0 3 0 0 */
}

.combo-box1 .arrow-button .arrow
{
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 0 0 0 0, 0;
    -fx-padding: 0em 0em 0em 0em; /* 3 3.75 3 3.75 */
/*
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
*/
    -fx-shape: null;
}

Answer 3

我使用了以下 ccs 代码：

.combo-box1 .arrow-button  {
    -fx-opacity: 0.0;
    -fx-cursor: text;
}

这在java中：

combobox.getStyleClass().add("combo-box1");

Answer 4

有几种方法可以做到这一点，这里有四种。代码是带有 JavaFX 的 Jython。

---

首先是枚举，用于上下文。

public enum URLBarArrowConstants {
     //URLBarArrow Constants
     BYCSS_AND_SHAPE,
     BYCSS_AND_NO_SHAPE,
     NOCSS_AND_SHAPE,
     NOCSS_AND_NO_SHAPE;
}

第二，css文件，用于上下文。

EG #1

/*ComboBox's Arrow is a Region.*/
.combo-box .arrow-button .arrow {
     -fx-shape: "...";
     -fx-scale-shape: true;
     -fx-position-shape: true;
}

EG#2

/*ComboBox's Arrow is a Region.*/
.combo-box .arrow-button .arrow {
    /*Setting either of these two will do.*/
     -fx-background-color: transparent; 
     -fx-opacity: 0.0;  
}

/*ComboBox's Arrow Button is a Stack Pane.*/
.combo-box .arrow-button{
    -fx-background-position: center;
    -fx-background-repeat: no-repeat;
    -fx-background-image: url("..<file>.png");
}

---

方法，在我的主文件中。

def setCustomURLBarArrow(self, url_bar, scene, URLBarArrowConstant):
    from javafx.scene.paint import Paint
    from javafx.scene.shape import Shape, SVGPath, FillRule

不要通过 CSS 配置组合框箭头，而是以编程方式进行并更改区域 SVG 形状

if URLBarArrowConstant == URLBarArrowConstants.NOCSS_AND_SHAPE:

    #SVG Object
    previous_url_bar = SVGPath()

    #SVG Path
    previous_url_bar.setContent("...") # edit this 

    #SVG Fill Rule
    previous_url_bar.setFillRule(FillRule.NON_ZERO)

    #Set Fill -- 
    previous_url_bar.setFill(Paint.valueOf(Color.web("...").toString())) //edit here

    #Apply CSS Sheet
    url_bar.applyCss()

    #Set Region's Shape
    arrow_region = url_bar.lookup(".arrow").setShape(previous_url_bar)

通过 CSS 配置组合框箭头并更改区域 SVG 形状

elif URLBarArrowConstant == URLBarArrowConstants.BYCSS_AND_SHAPE:
    #Apply Stylesheet for URL Bar
    scene.getStylesheets().add(File("..<file>.css").toURI().toString()) //edit here

通过 CSS 配置组合框箭头，但只是通过设置透明度/不透明度值并设置背景来隐藏箭头。

elif URLBarArrowConstant == URLBarArrowConstants.BYCSS_AND_NO_SHAPE:
    #Apply Stylesheet for URL Bar
    scene.getStylesheets().add(File("..<file>.css").toURI().toString()) //edit here

不要通过 CSS 配置 ComboBox 箭头，而是以编程方式进行，仅通过设置透明度/不透明度值并设置背景来隐藏箭头。

elif URLBarArrowConstant == URLBarArrowConstants.NOCSS_AND_NO_SHAPE:

    from javafx.scene.paint import Paint
    from javafx.scene.layout import CornerRadii
    from javafx.scene.layout import Background, BackgroundSize, BackgroundImage, BackgroundPosition, BackgroundRepeat, BackgroundFill

    #Apply CSS Sheet
    url_bar.applyCss()

    #Grab Arrow(Region), ArrowButton(StackPane) ComboBox properties
    arrow_region = url_bar.lookup(".arrow")
    arrow_button = url_bar.lookup(".arrow-button")

    #Either Set Opacity to 0 or set background color to transparent.
    arrow_region.setOpacity(0.0)
    arrow_region.setBackground( Background( array(BackgroundFill, [BackgroundFill( Paint.valueOf(Color.TRANSPARENT.toString()), CornerRadii.EMPTY, Insets.EMPTY)]) ) )

    #Set a Background Image for the .arrow-button StackPane.
    arrow_button.setBackground(Background( array(BackgroundImage, [BackgroundImage( Image( String(File('..<file>.png').toURI().toString()), True) , BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER, BackgroundSize.DEFAULT)] ) ) )       //if you want, edit this