JavaFX 2.0 TabPane：将选项卡放在左侧并保持选项卡标题水平。

Question

我正在尝试为一个网络应用程序开发GUI，希望设置一个TabPane，在左侧放置选项卡并保持选项卡标题水平。

我已经找到了如何将选项卡放置在左侧，但是在许多搜索之后，我没有成功地设置标题的正确对齐方式。它们仍然垂直且难以阅读。

我该怎么解决这个问题呢？

- Baya

Answer 1

您可以使用CSS自定义选项卡及其标签：

您可以使用CSS来自定义选项卡和选项卡标签：

.tab *.tab-label {
    -fx-rotate: 90;
}

.tab {
    -fx-padding: 3em 0.5em 3em 0.5em;
}

- noxygenx

Answer 2

这里有一个相关的功能请求：RT-19547 新 API 旋转选项卡标签上的文本 该功能请求目前仍然处于打开状态，但尚未安排实施计划。您可以为该功能请求投票或评论，并链接回此 StackOverflow 帖子以表示您对该功能的兴趣。

如果要自行实现此功能，则需要创建新的 TabPane 皮肤或修补现有的 TabPane 皮肤，这可能并不简单。

- jewelsea

Answer 3

在你的代码中添加此方法，并将你的tabPane传递给它：

void setTabPaneLeftTabsHorizontal(TabPane tabPane){

    tabPane.setSide(Side.LEFT);
    tabPane.setRotateGraphic(true);        

    Label l = null;
    StackPane stp = null;
    for(Tab t : tabPane.getTabs()){
        l = new Label(t.getText());
        l.setRotate(90);
        stp = new StackPane(new Group(l));
        stp.setRotate(90);
        t.setGraphic(stp);
        t.setText("");
    }
    
    tabPane.setTabMinHeight(100);
    tabPane.setTabMaxHeight(100);
}

- Shriram Prajapat

Answer 4

哦，我记得我之前遇到过这个问题，只需在tabHeader中添加一个StackPane、VBox或Hbox，并添加您可能需要的所有组件，它们将不会遵循选项卡方向。

- Wesos de Queso

Answer 5

您可以使用以下方法创建选项卡标题。

private StackPane createTabHeader(String text, Node graphics){
        return new StackPane(new Group(new Label(text, graphics)));
}

然后在你的代码中像下面这样调用它：

Tab tab = new Tab();
tab.setGraphic(createTabHeader("TEXT", new ImageView("IMAGE_PATH")));

请注意，您需要设置选项卡的宽度和高度，因为它们不会自动缩放。

TabPane tabPane = new TabPane(tab);
tabPane.setSide(Side.LEFT);
tabPane.setTabMinWidth(50);
tabPane.setTabMaxWidth(50);
tabPane.setTabMinHeight(200);
tabPane.setTabMaxHeight(200);

- Mohamed Handosa

Answer 6

// Firstly
tabPane.setSide(Side.LEFT);
tabPane.setRotateGraphic(true);        

Label l = new Label("Titel Tab1");
l.setRotate(90);
StackPane stp = new StackPane(new Group(l));
stp.setRotate(90);
tab1.setGraphic(stp);

l = new Label("Titel Tab2");
l.setRotate(90);
stp = new StackPane(new Group(l));
stp.setRotate(90);
tab2.setGraphic(stp);

tabPane.setTabMinHeight(100);
tabPane.setTabMaxHeight(100);

- R3ing

Answer 7

还有另一种解决方案，可以在 CSS 中设置最小宽度和高度，并在 FXML 中添加图形元素。

-fx-tab-min-width:30;    
-fx-tab-max-width:30;    
-fx-tab-min-height:150;    
-fx-tab-max-height:150;

 <Tab closable="false">
           <graphic>
              <Pane prefHeight="76.0" prefWidth="30.0">
                 <children>
                    <Label layoutX="-35.0" layoutY="23.0" prefHeight="30.0" prefWidth="130.0" text="User">
                       <font>
                          <Font name="SansSerif Regular" size="14.0" />
                       </font></Label>
                 </children>
              </Pane>
           </graphic>
        </Tab>

- Bruno