將按鈕添加到選項卡和選項卡區域JavaFX

Question

我正在尋找一種將按鈕添加到JavaFX Tab 。

在互聯網上搜索了它，但找不到任何解決方案。

類似於下面的屏幕快照中的按鈕。

有人可以幫我嗎？

Answer 1

要在Tab上使Button帶有圖標：

Tab的setGraphic方法可用於添加要在Tab上顯示的任何Node 。 可以將Button添加為Node 。

此后，將顯示一個功能齊全的按鈕，但不顯示任何圖標。 Button也具有setGraphic方法，其工作原理相同，因此可以添加ImageView在Button上顯示Image 。

要在選項卡區域的右上角具有控制Button ，請執行以下操作：

這些按鈕可以放在TabPane ，而不是放在TabPane 。 為此，您可以使用AnchorPane將Button錨定到右上角。

例：

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;
}

結果：