JavaFX-如何隱藏標籤內容區域並僅顯示特定選項卡上的選項卡標題

Question

我想爲用戶提供一種隱藏/取消隱藏選項卡窗格內容的方法，無需向UI添加其他按鈕。我認爲的一種方式是在tabpane中提供一個「虛擬」選項卡並選擇它，除了標題，tabpane的所有內容都將被隱藏。在選擇任何其他選項卡時，內容將再次顯示。我試圖改變tabpane的min/max/pref寬度。

Answer 1

您可以簡單地設置max height的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); 
    } 
} 

結果：

---

注意

您可以通過添加一個名爲例如.tab-pane的新僞類來使用CSS做同樣的事情。 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

您可以在此answer（一個鍵隱藏和顯示）添加Button s到片區域就像這可能不是一個額外Tab更符合人體工程學。