删除 JavaFX menuButton 上的箭头

Question

您好 JavaFX 样式表专家，

如何删除 JavaFX menuButton 上的默认箭头。

我想出了如何更改颜色并使

不可见

.menu-button {
    -fx-mark-color: transparent;
}

或

.menu-button .arrow {
    -fx-background-color: transparent;
}

但是，我不想要空隙，因为看不见的箭头。

感谢您的建议。

此致，

伊万

Answer 1

如果我们查看MenuButtonSkinBase的源代码，MenuButton的子结构似乎是

MenuButton
   |——— label (LabeledImpl)
   |——— arrowButton (StackPane)
            |——— arrow (StackPane)

因此，要隐藏 "arrow"，将两个 StackPanes 的填充设置为 0 就足够了：

.menu-button > .arrow-button {
    -fx-padding: 0;
}

.menu-button > .arrow-button > .arrow {
    -fx-padding: 0;
}

Answer 2

有几种方法可以做到这一点，这里有四种。代码是带有 JavaFX 的 Jython。您可以根据需要对其进行编辑。

First, the enum, for context.

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

Second, the css files, for context.

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");
}

The method, in my main file.

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

不要通过 CSS 配置 ComboBox Arrow，而是以编程方式进行配置并更改 Regions SVG Shape

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 配置 ComboBox 箭头，但仅通过设置 transparency/opacity 值并设置背景来隐藏箭头。

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

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

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

删除 JavaFX menuButton 上的箭头

Remove arrow on JavaFX menuButton

javafx

fxml

javafx-css

有几种方法可以做到这一点，这里有四种。代码是带有 JavaFX 的 Jython。您可以根据需要对其进行编辑。

不要通过 CSS 配置 ComboBox Arrow，而是以编程方式进行配置并更改 Regions SVG Shape

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

通过 CSS 配置 ComboBox 箭头，但仅通过设置 transparency/opacity 值并设置背景来隐藏箭头。

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