当我单击按钮时,JPanel缩小

时间:2018-08-09 18:05:57

标签: java swing

每当我单击“显示密码”按钮时,面板就会收缩并变成图片中的代码,如下所示:

public class AssetLogin extends JFrame implements ActionListener, MouseListener {
private static final long serialVersionUID = 1L;
private JPanel layout, panLogin, panEmail, panPassword;
private JButton btnShowPassword;
private JTextField txtEmail;
private JPasswordField txtPassword;

public AssetLogin() {
    super("Asset And Equipment Tracking");
    setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
    this.setExtendedState(Frame.MAXIMIZED_BOTH);
    this.setLocationRelativeTo(null);
    this.pack();
    this.setVisible(true);
    this.setResizable(false);
    this.setMinimumSize(new Dimension(750, 500));
    JFrame.setDefaultLookAndFeelDecorated(false);
    getContentPane().setLayout(new BorderLayout(0, 0));
    UIManager.put("TextField.border", BorderFactory.createMatteBorder(0, 0, 0, 0, Color.WHITE));
    UIManager.put("PasswordField.border", BorderFactory.createMatteBorder(0, 0, 0, 0, Color.WHITE));
    UIManager.put("Button.background", Color.WHITE);
    UIManager.put("Button.foreground", Color.GRAY);
    UIManager.put("Button.border", BorderFactory.createMatteBorder(0, 0, 0, 0, Color.WHITE));
    UIManager.put("Button.focus", new Color(0,0,0,0));
    UIManager.put("Button.select", new Color(0, 0, 0, 0));
    layout = new JPanel();
    layout.setLayout(null);
    layout.setSize(this.getWidth(), this.getHeight());
    layout.setBackground(Color.WHITE);

    initialize();

    getContentPane().add(layout);
}

private void initialize() {
    panEmail = new JPanel();
    panPassword = new JPanel();
    txtEmail = new JTextField();
    txtPassword = new JPasswordField();

    setBoundsResize();
    setDecorations();

    btnShowPassword.addActionListener(this);
    btnShowPassword.addMouseListener(this);

    panLogin.add(panEmail);
    panLogin.add(panPassword);

    panEmail.add(txtEmail);

    panPassword.add(txtPassword);
    panPassword.add(btnShowPassword);
    layout.add(panLogin);
}

private void setBoundsResize () {
    panLogin.setBounds(layout.getWidth() / 2 - layout.getWidth() / 4, layout.getHeight() / 2 - layout.getHeight() / 3, layout.getWidth() / 2, (2 * layout.getHeight()) / 3);
    panEmail.setBounds(10, 10, panLogin.getWidth() - 10, 60);
    panPassword.setBounds(10, 100, panLogin.getWidth() - 10, 60);
    btnShowPassword.setBounds(panPassword.getWidth() - 120, 15, 100, panPassword.getHeight() - 25);
    txtEmail.setBounds(10, 15, panEmail.getWidth() - 20, panEmail.getHeight() - 25);
    txtPassword.setBounds(10, 15, panPassword.getWidth() - 130, panPassword.getHeight() - 25);
}

private void setDecorations() {
    layout.setBackground(Color.WHITE);
    layout.setBorder(BorderFactory.createMatteBorder(0, 2, 2, 2, Color.LIGHT_GRAY));
    panLogin.setOpaque(false);
    panEmail.setOpaque(false);
    panPassword.setOpaque(false);
    panEmail.setBorder(BorderFactory.createTitledBorder(
        BorderFactory.createEtchedBorder(EtchedBorder.LOWERED), "Email"));
    panPassword.setBorder(BorderFactory.createTitledBorder(
        BorderFactory.createEtchedBorder(EtchedBorder.LOWERED), "Password"));
    btnShowPassword.setOpaque(false);
    txtPassword.setEchoChar('*');
}

@Override
public void actionPerformed(ActionEvent e) {
    if (e.getSource() == btnShowPassword) {
        if (txtPassword.getEchoChar() == '*') {
            txtPassword.setEchoChar( (char) 0 );
            //btnShowPassword.setOpaque(true);
            btnShowPassword.setBorder(
                BorderFactory.createLineBorder(Color.black));
        } else {
            txtPassword.setEchoChar( '*' );
            //btnShowPassword.setOpaque(false);
            btnShowPassword.setBorder(null);
        }
    }
}

@Override
public void mousePressed(MouseEvent e) {
    btnShowPassword.setBackground(null);
}

@Override
public void mouseReleased(MouseEvent e) {
    btnShowPassword.setBackground(Color.LIGHT_GRAY);
}
}

我当然添加了其余的鼠标事件方法,但事实是,正如我所说的,当我单击“显示密码”按钮时,JPanels会缩小:

My design must look like this:

单击按钮时的外观:

This how it look when I click show password

为什么会这样?

2 个答案:

答案 0 :(得分:0)

尝试摆脱:

this.pack();

Window.pack() method使您的框架调整大小,这将导致所有子元素调整为它们的首选大小:

  

使此窗口的大小适合其子组件的首选大小和布局。如果任意一个尺寸小于上次调用setMinimumSize方法指定的最小尺寸,则窗口的宽度和高度将自动放大。

     

如果该窗口和/或其所有者尚不可显示,则在计算首选大小之前,将它们都显示为可显示。计算窗口大小后,将对其进行验证。

如果您未正确设置首选尺寸,则可能会导致您看到的变形类型。

答案 1 :(得分:0)

别忘了为每个面板添加布局,因为在放置时会导致该问题:

this.pack();

由于Window.pack()方法导致您的框架调整大小,这将导致所有子元素调整为它们的首选大小:

  

使此窗口的大小适合其子组件的首选大小和布局。如果任意一个尺寸小于上次调用setMinimumSize方法指定的最小尺寸,则窗口的宽度和高度将自动放大。

     

如果该窗口和/或其所有者尚不可显示,则在计算首选大小之前,将它们都显示为可显示。计算窗口大小后,将对其进行验证。

如果您未正确设置首选尺寸,则可能会导致您看到的变形类型。