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

在默认样式表（通常用于文本颜色）中处理此方法的方法是使用查找颜色（-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);
    }
}

Answer 2

这非常有用，但有时您需要进行更多自定义。为此，您需要修改 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
}

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

2 个答案: