将选项卡添加到选项卡和选项卡区域JavaFX [英] Add Buttons to Tabs and Tab area JavaFX

问题描述

我正在寻找一种方法将按钮添加到JavaFX 标签。

I'm searching a way to add a Button to a JavaFX Tab.

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

Searched the internet for it but I can't find any solution for it.

下面的屏幕截图中的按钮。

Something like the buttons in the screenshot below.

有人可以帮我吗？

推荐答案

要在标签按钮 s c $ c> s：

setGraphic 的方法选项卡可用于添加选项卡上显示的任何节点。可以添加按钮，因为它是节点。

The setGraphic method of Tabcan be used to add any Nodeto be displayed on the Tab. A Button can be added as it is a Node.

此后会出现一个功能齐全的按钮，但它不会显示任何图标。 按钮还有 setGraphic 方法的工作方式相同，因此 ImageView 以在按钮上显示图像。

After this a fully functional button is present, but it does not display any icon. Button also has the setGraphic method which works the same, therefore an ImageView can be added to display an Image on the Button.

要在标签区右上角控制按钮：

To have control Buttons on the top-right corner of the tab-area:

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

These buttons can be placed on the TabPane, rather than inside the TabPane. For this you can use an AnchorPane to anchor the Buttons to the top-right corner.

示例：

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

唯一要删除默认背景和边框来自按钮。这可以通过将以下CSS选择器插入CSS样式表来完成。

The only thing left to remove the default background and borders from the Buttons. This can be done by inserting the following CSS selectors into your CSS stylesheet.

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

结果：

这篇关于将选项卡添加到选项卡和选项卡区域JavaFX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！