JavaFXボタンは隣接ボタンを押した後に1ピクセル増加する

Question

私はJavaFXでGUIを作成しています.Windowsが行った装飾のウィンドウを取り除きました。close、minimize、maximize 。

コントロールがうまく動作しますが、そのうちの1つを押すと、このイメージでわかるように、隣接ピクセルが垂直方向のサイズを変更して1〜2ピクセル増加しているようです。

なぜこの出来事はありますか？ 私はこれまでのコードをstart()メソッドに添付しています。

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

これは私のスタイルシートである：あなたのCSSスタイルシートに基づいて

.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

、次のセレクタは、問題を解決する追加：

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

理由：

デフォルトスタイルシートmodena.cssはバックグラウンドを定義しますButtonのようなインセットは-fx-background-insets: 0 0 -1 0, 0, 1, 2;のようになりますが、Buttonがfocusedまたはarmedの擬似状態のいずれかにある場合、インセットは-fx-background-insets: -0.2, 1, 2, -1.4, 2.6;に変更されます。

実際には、近隣の垂直サイズは増加しませんが、armedまたはfocusedButtonの「垂直サイズ」は減少します。

これは上記のセレクタによって防止されます。

注：あなたは

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

などの新しいCSSクラスを作成する場合は、コード内で使用すると、各Buttonにこのクラスを割り当てる：

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

CSS構造は少しになりますが、もっときれいな。