Les boutons JavaFX grandissent d'un pixel après que leur voisin soit pressé


Je fais une interface graphique dans JavaFX, et j'ai dépouillé la fenêtre des décorations que Windows a faites et j'ai fait mes propres contrôles pour close, minimize, et maximize.

Les contrôles fonctionnent très bien, mais il semble que lorsque j'appuie sur l'un d'eux, ses voisins changent de taille verticale, en l'augmentant d'un ou deux pixels, comme vous pouvez le voir sur cette image.

entrez la description de l'image ici

Pourquoi cela se produit-il? Je joins également le code que j'ai jusqu'à présent dans la méthode 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();
}

Voici ma feuille de style:

.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;
}
Author: DVarga, 2016-09-23

1 answers

En fonction de votre feuille de style CSS, l'ajout des sélecteurs suivants résoudra le problème:

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

Raison:

Le styleheet par défaut modena.css définit l'arrière-plan des encarts de Button comme -fx-background-insets: 0 0 -1 0, 0, 1, 2;, mais si la Button est dans l'un des pseudo-états de focused ou armed, les encarts sont modifiés comme -fx-background-insets: -0.2, 1, 2, -1.4, 2.6;.

Donc, en fait, ce n'est pas la taille verticale des voisins qui sera augmentée, mais la "taille verticale" du armed ou focused Button sera diminuer.

C'est ce que les sélecteurs ci-dessus empêchent.

Remarque : Si vous créez une nouvelle classe CSS comme

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

Ensuite, dans le code, vous attribuez cette classe à chaque Button:

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

La structure CSS sera un peu plus propre.

 3
Author: DVarga, 2017-08-19 20:03:23