如何在选项卡的右侧显示关闭按钮答案

【问题标题】：How to display close button on the right hand side in the Tab如何在选项卡的右侧显示关闭按钮
【发布时间】：2016-10-07 09:32:49
【问题描述】：

如您所见，目前关闭按钮位于顶部。

我怎样才能把它放在右手边？

public class TabbedPaneTest extends Application
{
  @Override
  public void start(Stage primaryStage)
  {
    primaryStage.setTitle("TabPane Test");

    TabPane tabPane = new TabPane();
    tabPane.setStyle("-fx-tab-min-height: 100");
    tabPane.setRotateGraphic(true);
    tabPane.setTabClosingPolicy(TabClosingPolicy.ALL_TABS);

    tabPane.getTabs().addAll(tab("Tab 1"), tab("Tab 2"));
    tabPane.setSide(Side.LEFT);

    primaryStage.setScene(new Scene(tabPane, 400, 200));
    primaryStage.show();
  }

  static Tab tab(String labelText)
  {
    Tab tab = new Tab();
    Label label = new Label(labelText);
    label.setRotate(90);
    tab.setGraphic(new StackPane(label));
    tab.setContent(new Label("       " + labelText + " content"));
    return tab;
  }

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

【问题讨论】：

标签： java css javafx javafx-8

【解决方案1】：

这会有点老套。

基于TabPane 的CSS reference 和TabPaneSkin 的源代码：Tab 包含一个StackPane，其中包含一个Label、关闭Button 和焦点指示器。此StackPane 具有样式类tab-container。

所以你可以在 CSS 中旋转这个StackPane：

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container {
   -fx-rotate:90;
}

旋转StackPane 后，我注意到焦点指示器的处理方式不同，因此也必须旋转一个（它具有样式类focus-indicator）。

.tab-pane > .tab-header-area > .headers-region > .tab * .focus-indicator {
   -fx-rotate:-90;
}

一个例子，和你的一样，只是添加了样式表，Tab 上的Label 不再旋转：

public class TabbedPaneTest extends Application {
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("TabPane Test");

        TabPane tabPane = new TabPane();
        tabPane.setStyle("-fx-tab-min-height: 100");
        tabPane.setRotateGraphic(true);
        tabPane.setTabClosingPolicy(TabClosingPolicy.ALL_TABS);

        tabPane.getTabs().addAll(tab("Tab 1"), tab("Tab 2"));
        tabPane.setSide(Side.LEFT);

        Scene scene = new Scene(tabPane, 400, 200);
        scene.getStylesheets().add(getClass().getResource("application.css").toString());

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    static Tab tab(String labelText) {
        Tab tab = new Tab();
        Label label = new Label(labelText);

        tab.setGraphic(new StackPane(label));
        tab.setContent(new Label("       " + labelText + " content"));
        return tab;
    }

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

但您也可以使用这种方法，而无需在Tab 上使用图形：

static Tab tab(String labelText) {
    Tab tab = new Tab(labelText);
    tab.setContent(new Label("       " + labelText + " content"));
    return tab;
}

这将在图片上产生一个TabPane：

【讨论】：

如何在没有外部样式表的情况下直接在代码中添加 CSS？ Scene 没有 setStyle() 方法。
@VenkataRaju 你不能（至少不能没有一些真正丑陋的黑客）。使用外部样式表。无论如何，这是更好的做法。
@James_D 是的，预期的:)。但它对快速测试很有用。
添加样式表的更短版本是scene.getStylesheets().add("application.css");
@DVarga 我已经设置了标签背景（在选项卡中），发现那里有很多未使用的空间。如何减少它？删除它并没有帮助 tabPane.setStyle("-fx-tab-min-height: 100"); 或设置 -fx-tab-max-width