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

问题描述

我正在寻找一种将 Button 添加到 JavaFX Tab 的方法.

在互联网上搜索它，但我找不到任何解决方案.

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

有人可以帮我吗?

解决方案

要在 Tabs 上有图标 Buttons:

setGraphic Tab的方法可以用来添加任意Node显示在Tab.可以添加Button，因为它是一个Node.

此后会出现一个功能齐全的按钮，但不显示任何图标.Button 也有 setGraphic 方法的作用相同，因此可以添加一个 ImageView 来显示 Image> 在 Button 上.

要在选项卡区域的右上角控制 Button:

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

示例:

public class ButtonedTabPane extends Application {@覆盖公共无效开始(阶段primaryStage){BorderPane root = new BorderPane();TabPane tabPane = new TabPane();tabPane.setTabClos​​ingPolicy(TabPane.TabClos​​ingPolicy.UNAVAILABLE);//控制按钮的 HBoxHBox hbox = new HBox();hbox.getChildren().addAll(createTabButton("min.png"), createTabButton("max.png"));//锚定控件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);//创建一些标签Tab tab = new Tab("文件");tab.setGraphic(createTabButton("files.png"));((Button) tab.getGraphic()).setOnAction(e -> System.out.println("我会显示文件列表！"));tabPane.getTabs().add(tab);tab = new Tab("网络");tab.setGraphic(createTabButton("network.png"));((Button) tab.getGraphic()).setOnAction(e -> System.out.println("我会展示网络！"));tabPane.getTabs().add(tab);root.setCenter(锚点)；场景场景 = 新场景(root, 400, 400);scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());primaryStage.setScene(场景)；primaryStage.show();}私有按钮 createTabButton(String iconName) {按钮按钮 = new Button();ImageView imageView = new ImageView(new Image(getClass().getResource(iconName).toExternalForm(),16, 16, 假, 真));button.setGraphic(imageView);button.getStyleClass().add("tab-button");返回按钮；}公共静态无效主(字符串 [] args){发射(参数)；}}

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

style.css

.tab-button {-fx-border-width: 0;-fx-背景-半径:0；-fx-background-color:透明；-fx-content-display:仅图形；}.tab 按钮:悬停 {-fx-background-color: 白色；}

结果:

<前>

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.

Can someone help me with it?

解决方案

To have iconed Buttons on the Tabs:

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.

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:

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.

Example:

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

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

The result:

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