JavaFX 如何以编程方式设置选项卡关闭按钮的样式

Question

我需要以编程方式设置 javafx 选项卡的关闭按钮的样式。 我的每个选项卡都从 colorset 枚举中获取单独的颜色。

myTab.setStyle("-fx-background-color:" + set.getBackgroundColor() + ";");

有些颜色很深，有些颜色很浅，所以我需要为标签关闭按钮设置不同的补色，比如

myTab.getCloseButton().setStyle("-fx-background-color:" + set.getForegroundColor() + ";");

但我找不到检索选项卡关闭按钮句柄的方法。

我的 CSS 文件的一部分

.tab {
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0; /* eckig */
}
.tab .tab-close-button {
    -fx-shape: "M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z";
    -fx-scale-shape: false; 
}

我的标签使用不同的 ID 让它工作

myTab.setId("darktab");
myTab.setId("lighttab");

结合我的 css 文件中的单独条目

#darktab .tab-close-button { -fx-background-color: white; }
#lighttab .tab-close-button { -fx-background-color: black; }

但这是一个糟糕的解决方案，因为我需要在我的枚举中为所有定义的颜色提供许多互补色。

我错过了什么吗？有谁知道如何处理标签关闭按钮？

我在为下拉按钮和 TabPanes 设置样式时遇到同样的问题

Answer 1

这非常有用，但有时您需要进行更多自定义。为此，您需要修改 CSS。

/*******************************************************************************
 *                                                                             *
 * TabPane                                                                    *
 *                                                                             *
 ******************************************************************************/
.tab-pane {
    /*
    -fx-tab-min-width:120px;
    -fx-tab-max-width:120px;
    -fx-tab-min-height:50px;
    -fx-tab-max-height:50px;
     */
}

.tab {
    -fx-font-family: Segoe UI Symbol;
    -fx-font-size: 11;
    -fx-font-weight: regular;
    /*-fx-background-color:royalblue ;*/
}

.tab:selected {
    -fx-font-size: 11;
   /* -fx-font-weight: bold;    */
    /*-fx-background-color:blue ; */
}

.tab-close-button{
    -fx-background-image : null;
    -fx-background-size : 18;
    -fx-background-repeat : no-repeat;
    -fx-background-position : center;
    -fx-shape: null;
    -fx-background-color: transparent;
}
.tab-close-button:hover{
    -fx-background-image : url("/icons/icons8_multiply_100px_1.png");
    -fx-background-color: #DFE7D2
}

Answer 2

在默认样式表（通常用于文本颜色）中处理此问题的方式是使用查找颜色 (-fx-background) 作为背景色，然后使用 ladder function 作为对比色。

阶梯函数的工作原理是根据所提供颜色的强度创建颜色渐变。所以例如你可以这样做：

.tab {
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0; /* eckig */
    -fx-background-color: tab-background ;
    tab-background: white ;
}
.tab .tab-close-button {
    -fx-shape: "M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z";
    -fx-scale-shape: false; 
    -fx-background-color: ladder(tab-background, white 49%, black 50%);
}

.tab .tab-label {
    -fx-text-fill: ladder(tab-background, white 49%, black 50%);
}

这定义了一种名为tab-background 的查找颜色，该颜色适用于选项卡和所有子节点，并将选项卡的背景设置为该颜色。然后将标签页关闭按钮的背景设置为梯形图函数确定的颜色：如果tab-background的强度为49%以下，则为白色；如果它是 50% 或更多，它是黑色的（并且中间的边界情况有一个渐变）。请注意，使用相同的技术使文本在选项卡标签中可见。

现在你可以做

myTab.setStyle("tab-background:" + set.getBackgroundColor() + ";");

标签关闭按钮将根据标签背景的强度自动选择白色或黑色。

SSCCE（上面显示的 CSS 文件为 tab-background.css）：

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

public class TabBackgroundTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        TabPane tabPane = new TabPane();
        Tab tab1 = new Tab("Tab 1");
        tab1.setStyle("tab-background: white;");
        Tab tab2 = new Tab("Tab 2");
        tab2.setStyle("tab-background: black;");
        tabPane.getTabs().addAll(tab1, tab2);
        Scene scene = new Scene(tabPane, 600, 600);
        scene.getStylesheets().add("tab-background.css");
        primaryStage.setScene(scene);
        primaryStage.show();

    }

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