在 CardLayout 中设置面板布局

Question

我正在尝试为具有自动和手动模式的假想车辆创建 UI。当用户将车辆设置为其中一种模式时，它应该只显示与该模式相关的控件，我已经使用CardLayout 完成了这一点。

但是，我还希望能够手动为每张卡片指定布局的各种元素的位置 - 对于静态布局，我会按照 mainPanel.setLayout(null) 的方式做一些事情，但这只是给出在 CardLayout 上使用时出现空白窗口（因此下面的代码中有两行注释掉）。

我将如何实现这两个目标？我当前的代码如下：

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class UI extends JFrame implements ActionListener{

public UI() {
    initUI();
}

private JPanel cardPanel;
private CardLayout cardLayout = new CardLayout();

public final void initUI() {

    cardPanel = new JPanel();
    cardPanel.setLayout(cardLayout);

    JPanel manualPanel = new JPanel();
    getContentPane().add(manualPanel);
    //manualPanel.setLayout(null);
    cardPanel.add(manualPanel, "manual");

    JPanel autoPanel = new JPanel();
    //autoPanel.setLayout(null);
    cardPanel.add(autoPanel, "auto");

    JButton startButton = new JButton("START/STOP");
    startButton.setBounds(50, 150, 200, 50);
    startButton.addActionListener(new startListener());
    manualPanel.add(startButton);
    autoPanel.add(startButton);

    JButton autoButton = new JButton("SWITCH TO AUTO");
    autoButton.setBounds(50, 250, 200, 50);
    autoButton.addActionListener(new autoListener());
    manualPanel.add(autoButton);

    JButton upButton = new JButton("^");
    upButton.setBounds(125, 320, 50, 50);
    upButton.addActionListener(new returnListener());
    manualPanel.add(upButton);

    JButton downButton = new JButton("\\/");
    downButton.setBounds(125, 380, 50, 50);
    downButton.addActionListener(new returnListener());
    manualPanel.add(downButton);

    JButton ccwButton = new JButton("<-");
    ccwButton.setBounds(55, 350, 50, 50);
    ccwButton.addActionListener(new returnListener());
    manualPanel.add(ccwButton);

    JButton cwButton = new JButton("->");
    cwButton.setBounds(195, 350, 50, 50);
    cwButton.addActionListener(new returnListener());
    manualPanel.add(cwButton);

    JButton ngzButton = new JButton("SOMETHING ELSE");
    ngzButton.setBounds(50, 450, 200, 50);
    ngzButton.addActionListener(new returnListener());
    manualPanel.add(ngzButton);

    JButton manualButton = new JButton("SWITCH TO MANUAL");
    manualButton.setBounds(50, 250, 200, 50);
    manualButton.addActionListener(new manualListener());
    autoPanel.add(manualButton);

    JButton returnButton = new JButton("SOMETHING ELSE");
    returnButton.setBounds(50, 350, 200, 50);
    returnButton.addActionListener(new returnListener());
    autoPanel.add(returnButton);

    setTitle("UI");
    setSize(800, 600);
    setLocationRelativeTo(null);
    setDefaultCloseOperation(EXIT_ON_CLOSE);
    add(cardPanel, BorderLayout.NORTH);
}

public static void main(String[] args) {

    UI ui = new UI();
    ui.setVisible(true);
}

public void actionPerformed(ActionEvent e){
}

private class returnListener implements ActionListener {
    public void actionPerformed (ActionEvent event) {
    }
}

private class autoListener implements ActionListener {
    public void actionPerformed (ActionEvent event) {
        cardLayout.show(cardPanel, "auto");
    }
}

private class startListener implements ActionListener {
    public void actionPerformed (ActionEvent event) {
    }
}

private class manualListener implements ActionListener {
    public void actionPerformed (ActionEvent event) {
        cardLayout.show(cardPanel, "manual");
    }
}


}

Answer 1

在您的示例中，您创建了一个startButton，但随后您尝试将相同的实例添加到两个不同的面板中。因为一个组件只能占用一个容器，所以您需要创建两个按钮，每个面板一个。

顺便说一句，不要使用null 布局，而是为每个面板指定BorderLayout，将按钮添加到具有默认FlowLayout 的JPanel，并将按钮面板添加到SOUTH。然后，您可以使用任何合适的布局将您的插图嵌套在 CENTER 中。

附录：作为@Frakcool comments，使用布局将改善按钮的跨平台外观。在封闭窗口上调用pack()，并在嵌套插图面板上覆盖getPreferredSize()，为其提供所需的大小。在这个相关的example 中，CENTER 面板仅用于绘图；没有组件，它的布局就变得无关紧要了。