如何在窗格中使用工具栏选择器

Question

假设任何主题，如摩德纳、里海、jametro 等

如何获取选择器的声明或内容， 例如“工具栏：垂直”并将其应用于任何节点

现在在窗格中，如何放置此选择器？

在 Caspian.css 中，工具栏：垂直选择器具有以下内容 然而，该解决方案不能满足需要。 因为你需要考虑正在使用的主题

 String ss = """
              -fx-background: derive(-fx-base,-20%);
             -fx-background-color:
                 linear-gradient(to right, derive(-fx-base,-30%), derive(-fx-base,-60%)),
                 linear-gradient(to right, derive(-fx-base,65%) 2%, derive(-fx-base,-20%) 95%);
             -fx-background-insets: 0, 0 1 0 1;
             -fx-background-radius: 0 ;
             -fx-padding: 0.833em 0.416667em 0.833em 0.416667em; /* 10 5 10 5 */
             -fx-spacing: 0.333em; /* 4 */
             -fx-alignment: TOP_LEFT;
                """;
        
pane.setStyle(ss);

尝试过这个

.tool-bar-pane {
     @extend .tool-bar:vertical;
}

pane.setStyle("工具栏窗格"); 但它不允许@extend

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;

public class PaneTheme extends Application {

    @Override
    public void start(Stage primaryStage) {
      
        setUserAgentStylesheet(STYLESHEET_CASPIAN);
        // setUserAgentStylesheet(STYLESHEET_MODENA);
        // others
        // setUserAgentStylesheet(...);
        
        Pane pane = new Pane();
        
        
        pane.getStyleClass().setAll("tool-bar:vertical");
             
        // tool-bar:vertical Modena.css
        String ss = """
                     -fx-background-color:
                            -fx-outer-border,
                            linear-gradient(to right, derive(-fx-base,0%) 0%, derive(-fx-base,10%) 50%, derive(-fx-base,0%) 100%);
                        -fx-background-insets: 0, 0 0 0 1;
                        -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
                        -fx-spacing: 0.333em; /* 4 */
                        -fx-alignment: TOP_LEFT;
                    """;
        
        
        // tool-bar Caspian.css
        ss =   """  
             -fx-background: derive(-fx-base,-20%);
            -fx-background-color:
                linear-gradient(to right, derive(-fx-base,-30%), derive(-fx-base,-60%)),
                linear-gradient(to right, derive(-fx-base,65%) 2%, derive(-fx-base,-20%) 95%);
            -fx-background-insets: 0, 0 1 0 1;
            -fx-background-radius: 0 ;
            -fx-padding: 0.833em 0.416667em 0.833em 0.416667em; /* 10 5 10 5 */
            -fx-spacing: 0.333em; /* 4 */
            -fx-alignment: TOP_LEFT;
               """;
        
       // pane.setStyle(".tool-bar:vertical");
        
        Scene scene = new Scene(pane, 600, 200);
        primaryStage.setTitle("Pane change Seletor");
        primaryStage.setScene(scene);
        primaryStage.show();
        
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

Answer 1

虽然这似乎是一种非常奇怪的方法，但我认为您正在寻找如下解决方案。即，在自定义节点上重用现有的样式声明。

Pane pane = new Pane();
pane.getStyleClass().add("tool-bar");
pane.pseudoClassStateChanged(PseudoClass.getPseudoClass("vertical"), true);