在 CardLayout 中设置面板布局

Question

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

完成了此操作

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

我将如何实现这两件事？我当前的代码如下：

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 , using a layout will improve the cross-platform appearance of your buttons. Invoke pack() on the enclosing window, and override getPreferredSize() on the nested illustration panel to give it the needed size. In this related example，CENTER面板仅用于绘图；没有组件，它的布局就变得无关紧要了。

在 CardLayout 中设置面板布局

Set Layout of panel within CardLayout

java

user-interface

swing

cardlayout