JavaFX-如何隐藏选项卡内容区域并在选择特定选项卡时仅显示选项卡标题答案

【问题标题】：JavaFX- how to hide tab content area and show only tab headers on selection of specific tabJavaFX-如何隐藏选项卡内容区域并在选择特定选项卡时仅显示选项卡标题
【发布时间】：2017-06-27 18:45:43
【问题描述】：

我想为用户提供一种隐藏/取消隐藏选项卡窗格内容的方法，而无需向 UI 添加其他按钮。我认为的一种方法是在 tabpane 中提供一个“虚拟”选项卡，然后选择它，tabpane 的所有内容都将被隐藏，除了标题。在选择任何其他选项卡时，内容将再次可见。我已尝试更改 tabpane 的最小/最大/首选项宽度。

【问题讨论】：

标签： java javafx

【解决方案1】：

您可以简单地设置TabPane的max height：

public class Main extends Application {

    private static final int TABPANE_HEADER_HEIGHT = 29;

    @Override
    public void start(Stage primaryStage) throws Exception{
        BorderPane root = new BorderPane();

        // Add simple tabs
        TabPane tp = new TabPane();
        tp.getTabs().add(new Tab("Tab1", new Label(" Content of the first tab")));
        tp.getTabs().add(new Tab("Tab2", new Label(" Content of the second tab")));

        // Create the Tab which hides the content
        Tab hideTab = new Tab("Hide", new Label(" Content of the third tab"));
        tp.getTabs().add(hideTab);

        hideTab.selectedProperty().addListener((obs, oldval, newval) -> 
            tp.setMaxHeight(((newval) ? TABPANE_HEADER_HEIGHT : -1)));

        root.setTop(tp);

        Scene scene = new Scene(root, 300, 275);
        scene.getStylesheets().addAll(getClass().getResource("style.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

结果：

注意

您可以使用 CSS 通过为 .tab-pane 添加一个名为例如的新伪类来执行相同的操作。 tabcontenthidden。在这个伪类中，TabPane 的最大高度是选项卡的高度。

style.css

.root {  TAB_HEADER_HEIGHT: 29; }

.tab-pane:tabcontenthidden { -fx-max-height: TAB_HEADER_HEIGHT; }

.tab-pane {
    -fx-max-height: -1;
    -fx-background-color: orange;
}

在Java代码中，可以创建PseudoClasslike

PseudoClass TABPANE_CONTENT_HIDDEN = PseudoClass.getPseudoClass("tabcontenthidden");

您可以使用pseudoClassStateChanged 方法激活这个伪类：

tabPane.pseudoClassStateChanged(TABPANE_CONTENT_HIDDEN, true); // false to show

注2

您可以将Buttons 添加到标签区域，例如answer（一键隐藏和显示），这可能比额外的Tab 更符合人体工程学。

【讨论】：