JavaFX添加按钮时窗口颜色变白问题求助

问题情况 #

使用JavaFX为Spicetify CLI应用开发前端，采用纯代码布局而非FXML。Sidebar类负责侧边栏样式，在窗口中实例化该类后，只要往侧边栏添加按钮，窗口背景就会变为空白/白色。

问题根源 #

1. Sidebar初始化时机错误：HomeWindow中Sidebar的实例化在构造方法执行前完成，此时传入的height参数是BaseWindow的默认值0，导致Sidebar的VBox高度被设为0。但按钮通过translateY偏移到了VBox外部，使得BorderPane的左侧区域被异常撑开，覆盖了Scene的背景色。
2. 重复实例化BaseWindow：HomeWindow继承了BaseWindow，却额外创建了一个BaseWindow对象，导致父类的布局参数未被正确使用，参数传递逻辑混乱。
3. 冗余的BaseWindow依赖：Sidebar类中不必要地实例化了BaseWindow，transform功能可以直接实现，无需依赖额外实例。

修正方案 #

1. 修正Sidebar类 #

移除冗余的BaseWindow实例，直接实现图片缩放逻辑：

package spicetify;

import javafx.scene.Parent;
import javafx.scene.control.Button;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;

public class Sidebar {
    private String[] buttonIconLocation = {
        "file:src/main/resources/spicetify/images/buttons/home.png",
        "file:src/main/resources/spicetify/images/buttons/theme.png",
        "file:src/main/resources/spicetify/images/buttons/extension.png",
        "file:src/main/resources/spicetify/images/buttons/edit.png",
    };
    private ImageView[] buttonIcon = new ImageView[4];
    private VBox sidebar;
    private Button[] buttons = new Button[4];
    
    public Sidebar(int height, int width, String html, Parent root){
        this.sidebar = new VBox();
        this.sidebar.setPrefHeight(height);
        this.sidebar.setPrefWidth(width);
        this.sidebar.setStyle("-fx-background-color: " + html);
        
        for (int i = 0; i < buttonIcon.length; i++){
            buttonIcon[i] = new ImageView(buttonIconLocation[i]);
            // 直接实现图片缩放，无需依赖BaseWindow
            buttonIcon[i].setFitWidth(50);
            buttonIcon[i].setFitHeight(50);
            buttonIcon[i].setPreserveRatio(true);
        }        

        for (int i = 0; i < buttons.length; i++){
            buttons[i] = new Button("", buttonIcon[i]);
            sidebar.getChildren().add(buttons[i]);
            buttons[i].setTranslateX(20);
            buttons[i].setTranslateY(i * 100);
            buttons[i].setStyle("-fx-background-color: " + html);
        }
    }

    // 保留原有getter/setter方法
    public String[] getButtonIconLocation() {
        return buttonIconLocation;
    }

    public void setButtonIconLocation(String[] buttonIconLocation) {
        this.buttonIconLocation = buttonIconLocation;
    }

    public ImageView[] getButtonIcon() {
        return buttonIcon;
    }

    public void setButtonIcon(ImageView[] buttonIcon) {
        this.buttonIcon = buttonIcon;
    }

    public VBox getSidebar() {
        return sidebar;
    }

    public void setSidebar(VBox sidebar) {
        this.sidebar = sidebar;
    }
}

2. 修正HomeWindow类 #

将Sidebar的实例化移至构造方法内部，确保布局参数已正确设置；使用父类继承的属性和方法，移除冗余的BaseWindow实例：

package spicetify;

import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class HomeWindow extends BaseWindow {
    private ImageView logoView;
    private ImageView preview;
    private BorderPane root;
    private Sidebar sidebar;
    
    public HomeWindow(int width, int height, String html){
        this.logoView = new ImageView(new Image("file:src/main/resources/spicetify/images/essentials/logo.png"));
        this.preview = new ImageView(new Image("file:src/main/resources/spicetify/images/essentials/Preview.png"));
        this.root = new BorderPane();
        
        // 使用父类属性设置布局参数
        this.setWidth(width);
        this.setMinWidth(width);
        this.setHeight(height);
        this.setMinHeight(height);
        this.setHtmlColor(html);
        
        // 布局参数设置完成后再初始化Sidebar
        this.sidebar = new Sidebar(this.getHeight(), 100, "#282828", root);
    }

    @Override
    public void start(Stage stage){
        root.setLeft(sidebar.getSidebar());
        // 调用父类的transform方法处理图片
        this.transform(logoView, 600, 700, true);
        root.setCenter(logoView);
        
        this.setStage(stage);
        this.setTitle("Spicetify");
        this.setRoot(root);
        this.setScene(new Scene(this.getRoot(), this.getWidth(), this.getHeight(), Color.web(this.getHtmlColor())));
        
        this.getStage().setScene(this.getScene());
        this.getStage().setMinWidth(this.getMinWidth());
        this.getStage().setMinHeight(this.getMinHeight());
        this.getStage().setTitle(this.getTitle());
        this.getStage().show();
    }
}

3. 优化BaseWindow类（可选） #

BaseWindow类无需修改，保持原有结构即可作为所有窗口的基类提供通用方法。

效果说明 #

修正后，Sidebar会在布局参数完全设置后初始化，确保传入的高度值正确；同时移除了冗余实例，布局逻辑更清晰，窗口背景色不会被异常覆盖，侧边栏按钮也能正常显示。

内容的提问来源于stack exchange，提问作者BaigHack3rss