將按鈕添加到製表符和製表符區域JavaFX

Question

我正在尋找一種方法將一個Button添加到JavaFX Tab。

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

類似下面屏幕截圖中的按鈕。

有人可以幫我嗎？

Answer 1

具有對Tab小號iconed Button S：

的Tab的setGraphic方法可用於添加任何Node上Tab顯示。可以添加Button，因爲它是Node。

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

要具有控制Button S於的標籤區域的右上角：

這些按鈕可以放置上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 S中的默認背景和邊框。這可以通過將以下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; 
} 

結果：