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

Question

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

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

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

Answer 1

您可以将背景颜色指定为CSS 文件中的查找颜色：

.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(...)代码来修改任何特定选项卡窗格上的背景。