JavaFX Buttons wachsen mit einem Pixel, nachdem ihr Nachbar gedrückt wurde

Question

Ich mache eine GUI in JavaFX, und ich habe das Fenster der Dekorationen, die Windows getan hat, entfernt und ich habe meine eigenen Kontrollen für close, minimize, und maximize gemacht .

Die Steuerung funktioniert großartig, aber es scheint, dass, wenn ich einen von ihnen drücke, Nachbarn ihre vertikale Größe ändern, indem sie sie um ein oder zwei Pixel erhöhen, wie Sie in diesem Bild sehen können.

Warum ist das passiert? Ich bin auch mit dem Code, den ich bisher in der start() Methode habe.

public void start(Stage primaryStage) throws Exception { 
    window = primaryStage; 
    window.setTitle("Menu Example"); 

    MenuBar file = new MenuBar(); 
    file.setId("file"); 

    Menu fileMenu = new Menu("File"); 
    fileMenu.getItems().addAll(
      new MenuItem("New File..."), 
      new MenuItem("Open file..."), 
      new MenuItem("Save file")); 
    fileMenu.setId("#fileMenu"); 

    Menu editMenu = new Menu("Edit"); 
    editMenu.getItems().addAll(
      new MenuItem("Undo"), 
      new MenuItem("Redo"), 
      new MenuItem("Cut"), 
      new MenuItem("Copy"), 
      new MenuItem("Paste") 
    ); 

    Button closeButton = new Button("X"); 
    closeButton.setId("closeButton"); 
    closeButton.setOnAction(event -> { 
     window.close(); 
    }); 

    Button minimizeButton = new Button("_"); 
    minimizeButton.setId("minimizeButton"); 
    minimizeButton.setOnAction(event -> { 
     window.setIconified(true); 
    }); 

    Button maximizeButton = new Button("?"); 
    maximizeButton.setId("maximizeButton"); 
    maximizeButton.setOnAction(event -> { 
     if(!window.isMaximized()) 
      window.setMaximized(true); 
     else 
      window.setMaximized(false); 
    }); 

    file.getMenus().addAll(
      fileMenu, 
      editMenu 
    ); 

    HBox.setHgrow(file, Priority.ALWAYS); 
    HBox.setHgrow(closeButton, Priority.NEVER); 
    HBox.setHgrow(minimizeButton, Priority.NEVER); 
    HBox.setHgrow(maximizeButton, Priority.NEVER); 
    VBox.setVgrow(closeButton, Priority.NEVER); 

    hBox = new HBox(); 
    buttonBox = new HBox(); 
    buttonBox.getChildren().addAll(minimizeButton, maximizeButton, closeButton); 
    hBox.getChildren().addAll(file, buttonBox); 

    layout = new BorderPane(); 
    layout.setTop(hBox); 

    Scene scene = new Scene(layout, 400, 400); 
    scene.getStylesheets().add("Viper.css"); 
    window.setScene(scene); 
//  window.setMaximized(true); 
    window.initStyle(StageStyle.UNDECORATED); 
    window.show(); 
} 

Das ist mein Sheet:

.root{ 
    -fx-background-color: #2D2E32; 
    -fx-font-size: 11px; 
} 

#file{ 
    -fx-background-color: #3E3F43; 
} 

#file .label{ 
    -fx-text-fill: #EAEAEA; 
} 

.context-menu{ 
    -fx-background-color: #3E3F43; 

} 

#closeButton, #minimizeButton, #maximizeButton{ 
    -fx-background-radius: 0; 
    -fx-background-color: #3E3F43; 
    -fx-text-fill: #ffffff; 
    -fx-font-weight: bold; 
} 

#closeButton:hover{ 
    -fx-background-color: #E46458; 
} 

#minimizeButton:hover{ 
    -fx-background-color: #80B1E0; 
} 

#maximizeButton:hover{ 
    -fx-background-color: #80E089; 
} 

Answer 1

Basierend auf dem CSS-Stylesheet, lösen die folgenden Selektoren Zugabe Problem:

#closeButton:armed, #closeButton:focused, 
#minimizeButton:armed, #minimizeButton:focused, 
#maximizeButton:armed, #maximizeButton:focused { 
    -fx-background-insets: 0 0 -1 0, 0, 1, 2; 
} 

Grund:

Der Standard Stylesheet modena.css definiert das Backgro und Einsätze eines Button wie -fx-background-insets: 0 0 -1 0, 0, 1, 2;, aber wenn der Button in einem der Pseudozustände von focused oder armed ist, werden die Einsätze als -fx-background-insets: -0.2, 1, 2, -1.4, 2.6; modifiziert.

Also tatsächlich wird nicht die vertikale Größe der Nachbarn erhöht, aber die "vertikale Größe" der armed oder focusedButton wird verringert.

Dies ist, was die Selektoren oben verhindern.

Hinweis: Wenn Sie wie

.windowbutton:armed, .windowbutton:focused { 
    -fx-background-insets: 0 0 -1 0, 0, 1, 2; 
} 

dann in dem Code eine neue CSS-Klasse erstellen ordnen Sie diese Klasse zu jedem Button:

closeButton.getStyleClass().add("windowbutton"); // Similar to other buttons 

die CSS-Struktur ein wenig sein, aber sauberer.