Java Swing电商应用商品面板排版异常：商品单行溢出求助

问题根源 #

1. 构造函数内定义了局部productPanel，覆盖成员变量导致逻辑混乱
2. 标准FlowLayout在JScrollPane中不会自动换行，只会横向无限扩展，造成内容溢出屏幕
3. updateProductPanel方法未将商品面板放入滚动容器，直接添加到窗口，丢失滚动功能

修复步骤 #

1. 替换为支持自动换行的流式布局

标准FlowLayout无法适配滚动容器宽度自动换行，重写其preferredLayoutSize方法，让布局根据父容器宽度计算换行后的高度：

productPanel.setLayout(new FlowLayout(FlowLayout.LEFT, 10, 10) {
    @Override
    public Dimension preferredLayoutSize(Container target) {
        synchronized (target.getTreeLock()) {
            int viewportWidth = target.getWidth();
            if (viewportWidth == 0) viewportWidth = Integer.MAX_VALUE;
            return super.preferredLayoutSize(new Container() {
                @Override
                public int getWidth() { return viewportWidth; }
                @Override
                public Container getParent() { return target.getParent(); }
                @Override
                public Graphics getGraphics() { return target.getGraphics(); }
            });
        }
    }
});

2. 修复局部变量覆盖问题

构造函数中删除局部的JPanel productPanel声明，直接使用成员变量初始化：

// 原错误代码：JPanel productPanel = new ImagePanel(...);
productPanel = new ImagePanel("src/resorce/shopping-paper-bags-icon-isolated/JEMA GER 1722-04.jpg");
// 应用上面的自定义布局
productPanel.setLayout(/* 上述重写的FlowLayout */);

3. 修复updateProductPanel方法的滚动逻辑

无需重建整个窗口布局，仅清空商品面板并重新添加卡片，再刷新滚动容器：

private void updateProductPanel(ArrayList<Product> products) {
    // 清空现有商品
    productPanel.removeAll();

    for (Product product : products) {
        ProductCard productCard = new ProductCard(product);
        // 保留原有事件与样式设置
        productCard.addToWishlistButton.addActionListener(e -> {
            new Product_add(false).Add_to_Wishlist(user.getName(), product.getName());
        });
        productCard.addToCartButton.addActionListener(e -> {
            new Product_add(false).Add_to_Cart(user.getName(), product.getName());
        });
        Border combination = new CompoundBorder(new RoundedBorder(8), new ShadowBorder(3));
        productCard.setBorder(combination);
        productCard.addMouseListener(new java.awt.event.MouseAdapter() {
            public void mouseEntered(java.awt.event.MouseEvent evt) {
                productCard.setBackground(Color.lightGray);
            }
            @Override
            public void mouseClicked(MouseEvent e) {
                super.mouseClicked(e);
                System.out.println("clicked");
            }
            public void mouseExited(java.awt.event.MouseEvent evt) {
                productCard.setBackground(Color.white);
            }
        });
        productPanel.add(productCard);
    }

    // 刷新滚动容器视图
    productkeeper.setViewportView(productPanel);
    productPanel.revalidate();
    productPanel.repaint();
}

4. 确认滚动条策略

保持滚动面板禁用水平滚动条，垂直滚动条按需显示：

productkeeper.setHorizontalScrollBarPolicy(JScrollPane.HORIZONTAL_SCROLLBAR_NEVER);
productkeeper.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED);
productkeeper.getVerticalScrollBar().setUnitIncrement(10); // 保留原有滚动步长设置

修改后的构造函数关键片段 #

public Deshboard(User current_user) {
    try {
        UIManager.setLookAndFeel( new FlatLightLaf() );
        UIManager.put( "Button.arc", 999 );
    } catch( Exception ex ) {
        System.err.println( "Failed to initialize LaF" );
    }
    this.user = current_user;
    frame.setSize(800, 800);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setLayout(new BorderLayout());
    frame.getContentPane().setBackground(Color.LIGHT_GRAY);

    // ... 其他菜单、搜索面板初始化代码 ...

    // 初始化商品面板（修复局部变量问题）
    productPanel = new ImagePanel("src/resorce/shopping-paper-bags-icon-isolated/JEMA GER 1722-04.jpg");
    // 设置自定义换行布局
    productPanel.setLayout(new FlowLayout(FlowLayout.LEFT, 10, 10) {
        @Override
        public Dimension preferredLayoutSize(Container target) {
            synchronized (target.getTreeLock()) {
                int viewportWidth = target.getWidth();
                if (viewportWidth == 0) viewportWidth = Integer.MAX_VALUE;
                return super.preferredLayoutSize(new Container() {
                    @Override
                    public int getWidth() { return viewportWidth; }
                    @Override
                    public Container getParent() { return target.getParent(); }
                    @Override
                    public Graphics getGraphics() { return target.getGraphics(); }
                });
            }
        }
    });

    ArrayList<Product> products = getProducts();
    for (int i = 0 ; i<products.size();i++) {
        ProductCard productCard = new ProductCard(products.get(i));
        // ... 原有卡片样式与事件绑定代码 ...
        productPanel.add(productCard);
    }

    // 初始化滚动容器
    productkeeper = new JScrollPane(productPanel);
    productkeeper.setHorizontalScrollBarPolicy(JScrollPane.HORIZONTAL_SCROLLBAR_NEVER);
    productkeeper.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED);
    productkeeper.getVerticalScrollBar().setUnitIncrement(10);

    frame.add(searchPanel,BorderLayout.NORTH);
    frame.add(menuPanel,BorderLayout.SOUTH);
    frame.add(productkeeper,BorderLayout.CENTER);

    searchButton.addActionListener(e->{
        updateProductPanel(getProducts(searchBar.getText()));
    });

    frame.setVisible(true);
}

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