按下相邻按钮后，JavaFX 按钮会增加一个像素

Question

我正在用 JavaFX 制作一个 GUI，我已经去除了 Windows 所做的装饰窗口，并且我已经为 close、minimize 制作了自己的控件, 和最大化。

这些控件工作得很好，但似乎当我按下其中一个时，它的邻居会改变垂直大小，增加一到两个像素，正如您在这张图片中看到的那样。

为什么会这样？ 我还附加了我目前在 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();
}

这是我的样式表:

.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

根据您的 CSS 样式表，添加以下选择器将解决问题:

#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 的伪状态之一，insets 被修改为 -fx-background-insets: -0.2, 1, 2, -1.4, 2.6;。

所以实际上不是邻居的垂直尺寸会增加，而是 armed 或 focused Button 的“垂直尺寸”会增加减少。

这是上面的选择器阻止的。

注意:如果您创建一个新的 CSS 类，如

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

然后在代码中将此类分配给每个 Button:

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

CSS 结构会更简洁一些。