javafx在运行时更改css [英] javafx change css at runtime

问题描述

是否可以在JavaFX应用程序运行时更改CSS？

我想要的效果是在点击按钮时改变皮肤或主题。

如果这会导致任何不同，UI位于 FXML 文件中。

我试过了

  Scene.getStylesheets（）
 .add（getClass （skinFileName）.toExternalForm（））; 
  

这没有效果。

解决方案

它应该有效果。尝试此完整的演示代码：

  public class CssThemeDemo extends Application {
 
 private String theme1Url = getClass ）.getResource（theme1.css）。toExternalForm（）; 
 private String theme2Url = getClass（）。getResource（theme2.css）。toExternalForm（）; 
 
 @Override 
 public void start（Stage primaryStage）{
 StackPane root = new StackPane（）; 
 final scene scene = new Scene（root，300，250）; 
 System.out.println（scene stylesheets：+ scene.getStylesheets（））; 
 scene.getStylesheets（）。add（theme1Url）; 
 System.out.println（scene stylesheets：+ scene.getStylesheets（））; 
 
 final button btn = new Button（Load Theme 1）; 
 btn.getStyleClass（）。add（buttonStyle）; 
 btn.setOnAction（new EventHandler< ActionEvent>（）{
 @Override 
 public void handle（ActionEvent event）{
 scene.getStylesheets（）。remove（theme2Url）; 
 System.out.println（button1上的场景样式单击：+ scene.getStylesheets（））; 
 if（！scene.getStylesheets（）。contains（theme1Url））scene.getStylesheets添加（theme1Url）; 
 System.out.println（按钮1上的场景样式单击：+ scene.getStylesheets（））; 
} 
} 
 
 final Button btn2 = new Button（Load Theme 2）; 
 btn2.getStyleClass（）。add（buttonStyle）; 
 btn2.setOnAction（new EventHandler< ActionEvent>（）{
 @Override 
 public void handle（ActionEvent event）{
 scene.getStylesheets（）。remove（theme1Url）; 
 System.out.println（button2上的场景样式单击click：+ scene.getStylesheets（））; 
 if（！scene.getStylesheets（）。contains（theme2Url））scene.getStylesheets添加（theme2Url）; 
 System.out.println（按钮2上的场景样式单击：+ scene.getStylesheets（））; 
} 
} 
 
 ComboBox< String> comboBox = new ComboBox< String>（FXCollections.observableArrayList（Just，another，control））; 
 root.getChildren（）。add（VBoxBuilder.create（）。spacing（10）.children（btn，btn2，comboBox）.build（））; 
 
 primaryStage.setScene（scene）; 
 primaryStage.show（）; 
} 
 
 public static void main（String [] args）{
 launch（args）; 
} 
} 
  

theme1 css：

  .root {
 -fx-font-size：14pt; 
 -fx-font-family：Tahoma; 
 -fx-base：＃DFB951; 
 -fx-background：＃A78732; 
 -fx-focus-color：＃B6A678; 
} 
 
 .buttonStyle {
 -fx-text-fill：＃006464; 
 -fx-background-color：＃DFB951; 
 -fx-border-radius：20; 
 -fx-background-radius：20; 
 -fx-padding：5; 
} 
  

theme2 css：

  .root {
 -fx-font-size：16pt; 
 -fx-font-family：Courier New; 
 -fx-base：rgb（132，145，47）; 
 -fx-background：rgb（225，228，203）; 
} 
 
 .buttonStyle {
 -fx-text-fill：red; 
 -fx-background-color：lightcyan; 
 -fx-border-color：green; 
 -fx-border-radius：5; 
 -fx-padding：3 6 6 6; 
} 
  

注意在theme1和theme2 css文件中同样命名的CSS选择器。 p>

Is it possible to change css for a JavaFX application while it is running?

The effect I am looking for is changing skins or themes at the click of a button.

The UI is in an FXML file if that makes any difference.

I have tried

Scene.getStylesheets()
  .add(getClass().getResource(skinFileName).toExternalForm()); 

which has no effect.

thanks

解决方案

It should have the effect. Try this full demo code:

public class CssThemeDemo extends Application {

    private String theme1Url = getClass().getResource("theme1.css").toExternalForm();
    private String theme2Url = getClass().getResource("theme2.css").toExternalForm();

    @Override
    public void start(Stage primaryStage) {
        StackPane root = new StackPane();
        final Scene scene = new Scene(root, 300, 250);
        System.out.println("scene stylesheets: " + scene.getStylesheets());
        scene.getStylesheets().add(theme1Url);
        System.out.println("scene stylesheets: " + scene.getStylesheets());

        final Button btn = new Button("Load Theme 1");
        btn.getStyleClass().add("buttonStyle");
        btn.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                scene.getStylesheets().remove(theme2Url);
                System.out.println("scene stylesheets on button 1 click: " + scene.getStylesheets());
                if(!scene.getStylesheets().contains(theme1Url)) scene.getStylesheets().add(theme1Url);
                System.out.println("scene stylesheets on button 1 click: " + scene.getStylesheets());
            }
        });

        final Button btn2 = new Button("Load Theme 2");
        btn2.getStyleClass().add("buttonStyle");
        btn2.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                scene.getStylesheets().remove(theme1Url);
                System.out.println("scene stylesheets on button 2 click: " + scene.getStylesheets());
                if(!scene.getStylesheets().contains(theme2Url)) scene.getStylesheets().add(theme2Url);
                System.out.println("scene stylesheets on button 2 click: " + scene.getStylesheets());
            }
        });

        ComboBox<String> comboBox = new ComboBox<String>(FXCollections.observableArrayList("Just", "another", "control"));
        root.getChildren().add(VBoxBuilder.create().spacing(10).children(btn, btn2, comboBox).build());

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

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

theme1 css:

.root{
    -fx-font-size: 14pt;
    -fx-font-family: "Tahoma";
    -fx-base: #DFB951;
    -fx-background: #A78732;
    -fx-focus-color: #B6A678;
}

.buttonStyle {
    -fx-text-fill: #006464;
    -fx-background-color: #DFB951;
    -fx-border-radius: 20;
    -fx-background-radius: 20;
    -fx-padding: 5;
}

theme2 css:

.root{
    -fx-font-size: 16pt;
    -fx-font-family: "Courier New";
    -fx-base: rgb(132, 145, 47);
    -fx-background: rgb(225, 228, 203);
}

.buttonStyle {
    -fx-text-fill: red;
    -fx-background-color: lightcyan;
    -fx-border-color: green;
    -fx-border-radius: 5;
    -fx-padding: 3 6 6 6;
}

Note the same named CSS selectors in both theme1 and theme2 css files.

这篇关于javafx在运行时更改css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！