Question

我想用Tabs创建一个TabPane。如果选择了一个选项卡，它将显示一个图像（在标题中，而不是内容中），但其他人不会显示图像。我使用setGraphic方法添加一个Image，这是我的代码：

       TabPane tabpane = new TabPane();

        Tab tab = new Tab();
        tab.getStyleClass().add("ctab");

        Label value = new Label();
        value.getStyleClass().add("va");
        tab.setGraphic(value);

        tabpane.getTabs().add(tab);

然后我写css来设置它的风格：

.va {
    -fx-pref-width: 120;
    -fx-pref-height: 42;
    -fx-font-size: 10pt;
    -fx-text-fill: black;
}

.ctab:selected>.va {
    -fx-pref-width: 120;
    -fx-pref-height: 42;
    -fx-background-image: url("background.jpg");
    -fx-font-size: 10pt;
    -fx-text-fill: black;
}

选中标签，但不显示图像。我很困惑。因为当图像在按钮中时，css会起作用。

    Button button= new Button("a");

    button.getStyleClass().add("abtn");

    Label value = new Label("b");
    value.getStyleClass().add("value");

    Label nest = new Label("s");
    nest.getStyleClass().add("nest");

    value.setGraphic(nest);
    button.setGraphic(value);

    root.getChildren().add(button);

和css是：

.abtn {
    -fx-pref-width: 120;
    -fx-pref-height: 42;

    -fx-font-size: 11pt;
    -fx-text-fill: black;
}

.value {
    -fx-pref-width: 120;
    -fx-pref-height: 42;
    -fx-background-color: #ffffff;
    -fx-font-size: 10pt;
    -fx-text-fill: black;
}


.abtn:hover > .value > .nest {
    -fx-pref-width: 120;
    -fx-pref-height: 42;

    -fx-font-size: 20pt;
    -fx-text-fill: black;

    -fx-background-color: transparent;
}

当鼠标悬停在按钮上时，字符串“s”的大小确实发生了变化。两个例子有什么区别？如何更改标签的图像（使用css）？

Answer 1

Label并非直接归Tab所有。试试吧：

.ctab:selected > .tab-container > .tab-label > .va

如您所见，setGraphic并不总是用于设置子节点。

JavaFX CSS Reference Guide可帮助您找出控件的结构，但它没有完整的节点列表（例如，TabPane＆＃39; s tab-container是不在列表中。）

要分析场景图结构，Scene Builder中的CSS Analyzer和ScenicView非常有用。

或者只是下面的选择器也可以。

.ctab:selected .va

如何使用css

1 个答案: