java - 在 Swing 中单击鼠标即可更改多个单元格的颜色

Question

我正在使用 Swing 创建一个具有 10 x 10 单元网格的游戏。单击鼠标即可更改每个单元格的颜色。以下是两个类共同完成此任务:

 public class Grid extends Battle {
     public Grid(String name) {
         super();

     }

     @Override
     protected JPanel getCell()
     {
         JPanel panel = new JPanel();
         panel.setBackground(Color.black);
         panel.setBorder(BorderFactory.createLineBorder(Color.blue, 1));
         panel.setPreferredSize(new Dimension(20, 20));

               panel.addMouseListener(new MouseAdapter()   {
             public void mouseReleased(MouseEvent e)
             {
                panel.setBackground(Color.green);
             }
         });

         return panel;
     }
     }

          public abstract class Battle extends JPanel {
     public BattleGrid() {
         this.setLayout(new BoxLayout(this, BoxLayout.Y_AXIS));
         JPanel self = new JPanel();
         self.setLayout(new GridLayout(0,10));
         for (int i = 0; i < 10; i++)
         {
             for(int j =0; j < 10; j++) {
             JPanel panel = getCell();
             self.add(panel); 
             }
         }
         this.add(self);
     }

     protected abstract JPanel getCell();
 }

该代码适用于任何一个特定的单元格。我的问题是，如何单击鼠标即可更改网格中多个单元格的颜色？例如，当您单击网格时，您会更改两个单元格的颜色:您单击的单元格和紧邻其右侧的单元格的颜色？预先感谢您!

编辑:对于那些遇到类似问题的人 - 我找到了 super 相似的解决方案。只需增加单击的 JPanel 的尺寸并返回即可。例如，我的 JPanel 的尺寸是 20 x 20。因此，如果您想通过单击为 2 个单元格着色 - 被单击的单元格和右侧的单元格 -你所要做的就是: panel.setSize(new Dimension(40,20));

Answer 1

您需要首先将状态管理与其余代码解耦。这应该在某种模型中维护，该模型没有 UI 的概念，也不应该关心，它只是管理状态并就状态更改时应该做什么做出适当的决策。

该模型将提供观察者模式实现，允许它在状态更改时生成事件，让感兴趣的各方知道状态何时更改，以便他们可以响应它。

public enum CellState {
    EMPTY, SELECTED
}

public class GridModel {

    private Set<ChangeListener> listeners;

    private CellState[][] grid;

    public GridModel() {
        listeners = new HashSet<>(25);
        grid = new CellState[10][10];
        for (int col = 0; col < grid.length; col++) {
            for (int row = 0; row < grid[col].length; row++) {
                grid[col][row] = CellState.EMPTY;
            }
        }
    }

    public void setCellState(CellState state, int x, int y) {
        grid[x][y] = state;
    }

    public CellState getCellStateAt(int x, int y) {
        return grid[x][y];
    }

    public void addChangeListener(ChangeListener listener) {
        listeners.add(listener);
    }

    public void removeChangeListener(ChangeListener listener) {
        listeners.remove(listener);
    }

    protected void fireStateChanged() {
        ChangeEvent evt = new ChangeEvent(this);
        for (ChangeListener listener : listeners) {
            listener.stateChanged(evt);
        }
    }
}

接下来，我将创建一个专用的 Cell 组件，负责管理单个单元。这将提供模型内单元的可视化表示，并协调用户和模型之间的交互。

public class Cell extends JPanel {

    private GridModel model;

    public Cell(GridModel model, int x, int y) {
        this.model = model;
        setBackground(Color.black);
        setBorder(BorderFactory.createLineBorder(Color.blue, 1));

        addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent e) {
                getModel().setCellState(CellState.SELECTED, x, y);
            }
        });

        model.addChangeListener(new ChangeListener() {
            @Override
            public void stateChanged(ChangeEvent e) {
                switch (getModel().getCellStateAt(x, y)) {
                    case SELECTED:
                        setBackground(Color.BLUE);
                        break;
                    case EMPTY:
                        setBackground(Color.BLACK);
                        break;
                }
                repaint();
            }
        });
    }

    @Override
    public Dimension getPreferredSize() {
        return new Dimension(20, 20);
    }

    public GridModel getModel() {
        return model;
    }

}

然后，您的 Grid 类将根据需要创建此 Cell 的实例

public class Grid extends Battle {

    private GridModel model;

    public Grid(String name, GridModel model) {
        super();
        this.model = model;
    }

    public GridModel getModel() {
        return model;
    }

    @Override
    protected JPanel getCell(int x, int y) {
        return new Cell(getModel(), x, y);
    }
}

这只是一个概念证明，您的要求可能比我通常提出的更复杂，通过解耦状态管理器(模型)和通知系统(观察者模式)的基本概念以及您的解决方案的关键元素。

这使您更接近模型- View - Controller 范式，允许适当分离系统的各种职责