如何在 TabPane 中隐藏 TabBar？答案

【问题标题】：How to hide the TabBar in TabPane?如何在 TabPane 中隐藏 TabBar？
【发布时间】：2015-10-31 23:04:56
【问题描述】：

我正在尝试使用TabPane 构建下一个/上一个窗口。我决定使用TabPane，因为它在SceneBuilder 中易于使用和设计。在应用程序开始时，我用它来隐藏 TabBar 现在-

tabPane.setTabMinHeight(-10);
tabPane.setTabMaxHeight(-10);

TabPane 在这之后的外观-

如您所见，TabBar（标题栏下方）仍有一小部分。我怎样才能完全隐藏它，让我的TabPane 看起来就像一个普通的Pane 但它的所有功能都完好无损？

【问题讨论】：

标签： javafx tabs fxml

【解决方案1】：

使用带有隐藏标签的TabPane 作为向导类型的界面是一个有趣的想法，我没有想到并且认为我喜欢。

您可以在外部 CSS 文件中隐藏带有以下内容的选项卡：

.tab-pane {
    -fx-tab-max-height: 0 ;
} 
.tab-pane .tab-header-area {
    visibility: hidden ;
}

这是一个 SSCCE。在此，我为标签窗格提供了 CSS 类 wizard。

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class TabPaneAsWizard extends Application {

    @Override
    public void start(Stage primaryStage) {
        TabPane tabPane = new TabPane();
        tabPane.getStyleClass().add("wizard");
        for (int i = 1; i<=10; i++) {
            tabPane.getTabs().add(createTab(i));
        }
        Button previous = new Button("Previous");
        previous.setOnAction(e -> 
            tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()-1));
        previous.disableProperty().bind(tabPane.getSelectionModel().selectedIndexProperty().lessThanOrEqualTo(0));
        Button next = new Button("Next");
        next.setOnAction(e ->
            tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()+1));
        next.disableProperty().bind(
                tabPane.getSelectionModel().selectedIndexProperty().greaterThanOrEqualTo(
                        Bindings.size(tabPane.getTabs()).subtract(1)));

        HBox buttons = new HBox(20, previous, next);
        buttons.setAlignment(Pos.CENTER);

        BorderPane root = new BorderPane(tabPane, null, null, buttons, null);
        Scene scene = new Scene(root, 600, 600);
        scene.getStylesheets().add("tab-pane-as-wizard.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private Tab createTab(int id) {
        Tab tab = new Tab();
        Label label = new Label("This is step "+id);
        tab.setContent(label);
        return tab ;
    }

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

tab-pane-as-wizard.css：

.wizard {
    -fx-tab-max-height: 0 ;
} 
.wizard .tab-header-area {
    visibility: hidden ;
}

【讨论】：

它解决了我的问题。非常感谢！现在我可以在 GUI 设计器中单独设计每个页面。
如果您打开了多个标签页，这对您有用吗？在我的情况下，只有一个标签打开它可以工作，但是当我打开另一个标签时，小栏会显示为 OP 在其示例中提到的。

【解决方案2】：

这样做的简单方法是更改颜色以使其与背景同步

.tab-pane {
    -fx-tab-max-height: 0;

} 

.tab-pane .tab-header-area .tab-header-background {
    -fx-background-color: #843487;//your background colour code

}
.tab-pane .tab
{
    -fx-background-color: #843487;//your background colour code

}

【讨论】：

【解决方案3】：

对您的答案稍作修正：

.tab-pane {
    -fx-tab-max-height: 0 ;
} 
.tab-pane .tab-header-area {
    visibility: hidden ;
    -fx-padding: -20 0 0 0;
}

【讨论】：