JavaFX-如何隱藏選項卡內容區域並在選擇特定選項卡時僅顯示選項卡標題

Question

我想為用戶提供一種隱藏/取消隱藏選項卡窗格內容而不向UI添加其他按鈕的方法。 我認為的一種方法是在Tabpane中提供一個“虛擬”選項卡，並在選擇它時將隱藏Tabpane的所有內容（標題除外）。 選擇任何其他選項卡后，內容將再次變為可見。 我試過更改Tabpane的最小/最大/首選寬度。

Answer 1

您可以簡單地設置TabPane的最大高度 ：

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代碼中，您可以創建一個PseudoClass

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

您可以使用pseudoClassStateChanged方法激活此偽類：

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

---

筆記2

您可以像此答案一樣將Button s添加到選項卡區域（一個按鈕可以隱藏和顯示），它可能比附加的Tab更符合人體工程學。