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更符合人体工程学。