如何在代码中设置 JavaFX TabPane CSS？

Question

我想动态地为我的标签面板添加背景颜色（取决于特定条件）。我怎样才能从代码中实现这一点？一种选择是为选项卡分配一个特定的 ID，该 ID 具有关联的 CSS，但在我的例子中，颜色可以由用户动态选择。

此外，我很好奇在处理组件层次结构时如何在代码中应用样式。

Answer 1

您可以将背景颜色指定为 CSS 文件中的 looked-up color：

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color: -fx-outer-border, -fx-text-box-border, my-tab-header-background ;
}

现在，您可以在代码中随时设置查找颜色的值：

tabPane.setStyle("my-tab-header-background: blue ;");

SSCCE：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;

public class DynamicTabHeaderBackground extends Application {

    private static final String TAB_HEADER_BACKGROUND_KEY = "my-tab-header-background" ;

    @Override
    public void start(Stage primaryStage) {
        TabPane tabPane = new TabPane();
        tabPane.setStyle(TAB_HEADER_BACKGROUND_KEY+": blue ;");
        tabPane.getTabs().addAll(new Tab("Tab 1"), new Tab("Tab 2"));
        tabPane.getSelectionModel().selectedIndexProperty().addListener((obs, oldIndex, newIndex) -> {
            if (newIndex.intValue() == 0) {
                tabPane.setStyle(TAB_HEADER_BACKGROUND_KEY+": blue ;");
            } else {
                tabPane.setStyle(TAB_HEADER_BACKGROUND_KEY+": green ;");
            }
        });

        Scene scene = new Scene(tabPane, 400, 400);
        scene.getStylesheets().add("dynamic-tab-header.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

with dynamic-tab-header.css 包含上面的 CSS 代码。

更新

如果您有多个选项卡窗格，您可能需要考虑 CSS 文件的以下变体：

.tab-pane {
    my-tab-header-background: derive(-fx-text-box-border, 30%) ;
}

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color: -fx-outer-border, -fx-text-box-border, 
        linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, my-tab-header-background) ;
}

这基本上模拟了默认行为，但允许您像以前一样通过调用 tabPane.setStyle(...) 代码来修改任何特定选项卡窗格的背景。

如何在代码中设置 JavaFX TabPane CSS？

How do you set JavaFX TabPane CSS in code?

javafx

javafx-css