将选项卡添加到选项卡和选项卡区域JavaFX

我正在寻找一种方法来添加一个Button到JavaFX Tab 。

搜索互联网，但我找不到任何解决方案。

类似于下面屏幕截图中的按钮。

有人可以帮我吗？

Answer 1

要在Tab上标记Buttons：

Tab的setGraphic方法可用于添加要在Tab上显示的任何Node 。 可以添加Button因为它是Node 。

在此之后，存在一个function齐全的按钮，但它不显示任何图标。 Button也有setGraphic方法，它的工作方式相同，因此可以添加ImageView以在Button上显示Image 。

要在选项卡区域的右上角具有控制Button ：

这些按钮可以放在TabPane ，而不是放在TabPane 。 为此，您可以使用AnchorPane将Button s锚定到右上角。

例：

 public class ButtonedTabPane extends Application { @Override public void start(Stage primaryStage) { BorderPane root = new BorderPane(); TabPane tabPane = new TabPane(); tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE); // HBox of control buttons HBox hbox = new HBox(); hbox.getChildren().addAll(createTabButton("min.png"), createTabButton("max.png")); // Anchor the controls AnchorPane anchor = new AnchorPane(); anchor.getChildren().addAll(tabPane, hbox); AnchorPane.setTopAnchor(hbox, 3.0); AnchorPane.setRightAnchor(hbox, 5.0); AnchorPane.setTopAnchor(tabPane, 1.0); AnchorPane.setRightAnchor(tabPane, 1.0); AnchorPane.setLeftAnchor(tabPane, 1.0); AnchorPane.setBottomAnchor(tabPane, 1.0); // Create some tabs Tab tab = new Tab("Files"); tab.setGraphic(createTabButton("files.png")); ((Button) tab.getGraphic()).setOnAction(e -> System.out.println("I'll show the list of files!")); tabPane.getTabs().add(tab); tab = new Tab("Network"); tab.setGraphic(createTabButton("network.png")); ((Button) tab.getGraphic()).setOnAction(e -> System.out.println("I'll show the network!")); tabPane.getTabs().add(tab); root.setCenter(anchor); Scene scene = new Scene(root, 400, 400); scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm()); primaryStage.setScene(scene); primaryStage.show(); } private Button createTabButton(String iconName) { Button button = new Button(); ImageView imageView = new ImageView(new Image(getClass().getResource(iconName).toExternalForm(), 16, 16, false, true)); button.setGraphic(imageView); button.getStyleClass().add("tab-button"); return button; } public static void main(String[] args) { launch(args); } } 

唯一剩下的就是从Button删除默认背景和边框。 这可以通过将以下CSS选择器插入CSS样式表来完成。

style.css文件

 .tab-button { -fx-border-width: 0; -fx-background-radius: 0; -fx-background-color: transparent; -fx-content-display: graphic-only; } .tab-button:hover { -fx-background-color: white; } 

结果：