如何通過JavaFX而不是FXML CSS修改MenuButton箭頭顏色？

Question

我試圖使用JavaFX代碼而不是CSS來修改MenuButton箭頭的顏色。

我在caspian.css找到它：

.menu-button > .arrow-button > .arrow {
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-padding: 0.25em; /* 3 */
    -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
}

我試圖使用類似的東西：

menubutton.lookup(".arrow");

但它拋出NullPointerException

當我這樣做時：

System.out.println(this.getStyleClass().toString());

它僅顯示：僅menu-button 。

所以任何人都可以給我一種無需使用CSS即可使用Java對其進行修改的方法嗎？

Answer 1

這有效：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.MenuButton;
import javafx.scene.control.MenuItem;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class RedMenuButton extends Application {

    @Override
    public void start(Stage primaryStage) {
        final StackPane root = new StackPane();
        final MenuButton menuButton = new MenuButton("Menu");
        menuButton.getItems().addAll(new MenuItem("Item 1"), new MenuItem("Item 2"), new MenuItem("Item 3"));
        root.getChildren().add(menuButton);

        final Scene scene = new Scene(root, 250, 150);
        primaryStage.setScene(scene);
        primaryStage.show();

        menuButton.lookup(".arrow").setStyle("-fx-background-color: red;");
    }

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

更新：但這是一個更好的解決方案（如果不節省夏令時，我可能會是第一次；）。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.MenuButton;
import javafx.scene.control.MenuItem;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class RedMenuButton extends Application {

    @Override
    public void start(Stage primaryStage) {
        final StackPane root = new StackPane();
        final MenuButton menuButton = new MenuButton("Menu");
        menuButton.getItems().addAll(new MenuItem("Item 1"), new MenuItem("Item 2"), new MenuItem("Item 3"));
        root.getChildren().add(menuButton);

        menuButton.setStyle("-fx-mark-color: red");

        final Scene scene = new Scene(root, 250, 150);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Answer 2

有幾種方法可以做到這一點，這里有四種。 代碼是帶有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配置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配置組合框箭頭並更改Region SVG Shape

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

通過CSS配置ComboBox箭頭，但只能通過設置透明度/不透明度值並設置背景來隱藏箭頭。

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

不要通過CSS配置ComboBox Arrow，而是以編程方式進行操作，而只需通過設置透明度/不透明度值並設置背景來隱藏箭頭即可。

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