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

【问题标题】：How do you set JavaFX TabPane CSS in code?如何在代码中设置 JavaFX TabPane CSS？
【发布时间】：2016-02-27 17:56:04
【问题描述】：

https://stackoverflow.com/a/10615258/529411

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

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

【问题讨论】：

标签： javafx javafx-css

【解决方案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);
    }
}

带有包含上述 CSS 代码的 dynamic-tab-header.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(...) 代码来修改任何特定选项卡窗格上的背景。

【讨论】：

谢谢，将其更改为 #mytabpaneID > .tab-header....，以便该样式仅应用于我感兴趣的选项卡窗格。否则，它将将该样式应用于所有选项卡窗格。
是的，或者查看更新中的替代方案，这使您可以完全灵活地使用相同的 Java 代码修改任何或所有选项卡窗格。