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

Posted 2023-02-26

【中文标题】将按钮添加到选项卡和选项卡区域 JavaFX

【英文标题】：Add Buttons to Tabs and Tab area JavaFX

【发布时间】：2016-10-09 20:36:24

【问题描述】：

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

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

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

有人可以帮我吗？

【参考方案1】：

要在Tabs 上标记Buttons：

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

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

要控制标签区域右上角的Buttons：

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

示例：

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

唯一剩下的就是从Buttons 中删除默认背景和边框。这可以通过将以下 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;

结果：

【讨论】：

Tnx 完成了这项工作