GridLayout列布局错乱求助：如何实现带验证标记的表单排版

Let's break down why your layout is getting messed up and fix it step by step:

The Core Issues #

1. Wrong GridLayout Column Count: You set GridLayout(0,2) but you need 3 columns per row (label + input field + error icon label).
2. Incorrect Component Order: You're adding components in a jumbled order instead of row-by-row, which makes GridLayout place elements in the wrong cells.
3. Duplicate Component Reference: You accidentally added lblX2 twice instead of using the correct error label for each row.
4. Missing Error Label: You have 5 input rows but only 4 error labels—we'll add the fifth one for the Permission row.

Corrected Code #

First, let's adjust the GridLayout and component order properly:

// Initialize top panel with 3 columns (rows will auto-expand)
pnlTop = new JPanel(new GridLayout(0, 3)); 

// Username row
lblUserName = new JLabel("Username:"); 
txtUserName = new JTextField(10); 
lblX1 = new JLabel(""); // Error label for username
pnlTop.add(lblUserName);
pnlTop.add(txtUserName);
pnlTop.add(lblX1);

// Password row
lblPassword = new JLabel("Password:"); 
txtPassword = new JPasswordField(5); 
lblX2 = new JLabel(""); // Error label for password
pnlTop.add(lblPassword);
pnlTop.add(txtPassword);
pnlTop.add(lblX2);

// Retype Password row
lblRetype = new JLabel("Repeat Password:"); 
txtRetype = new JPasswordField(5); 
lblX3 = new JLabel(""); // Error label for retype password
pnlTop.add(lblRetype);
pnlTop.add(txtRetype);
pnlTop.add(lblX3);

// ID row
lblID = new JLabel("ID:"); 
txtID = new JTextField(5); 
lblX4 = new JLabel(""); // Error label for ID
pnlTop.add(lblID);
pnlTop.add(txtID);
pnlTop.add(lblX4);

// Permission row
lblPermission = new JLabel("Permission:"); 
txtPermission = new JTextField(5); 
lblX5 = new JLabel(""); // Missing error label added here
pnlTop.add(lblPermission);
pnlTop.add(txtPermission);
pnlTop.add(lblX5);

// Rest of your code remains the same (bottom panel, listeners, etc.)
pnlBottom = new JPanel(new FlowLayout()); 
btnCancel = new JButton("Cancel"); 
btnSignUp = new JButton("Sign UP"); 
pnlBottom.add(btnCancel); 
btnCancel.addActionListener(this); 
pnlBottom.add(btnSignUp); 
btnSignUp.addActionListener(this); 

txtID.addFocusListener(this); 
txtPassword.addFocusListener(this); 
txtUserName.addFocusListener(this); 
txtRetype.addFocusListener(this); 

pnlGeneral = new JPanel(new BorderLayout()); 
pnlGeneral.add(pnlTop,BorderLayout.NORTH); 
pnlGeneral.add(pnlBottom,BorderLayout.SOUTH); 

setContentPane(pnlGeneral); 
setLocation(600, 400); 
pack(); // Call pack() BEFORE setVisible(true) for better sizing
setVisible(true); 

Key Fixes Explained #

• GridLayout(0,3): The 0 means "auto-calculate the number of rows based on components", and 3 sets exactly 3 columns per row—perfect for your desired layout (label | input | error icon).
• Row-by-Row Addition: We add all three components for a row before moving to the next. GridLayout fills cells left-to-right, top-to-bottom, so this ensures each row stays intact.
• Fixing Duplicate/Missing Labels: We removed the duplicate lblX2 addition and added lblX5 for the Permission row to match all 5 input fields.
• Pack() Order: Moved pack() before setVisible(true)—this lets Swing calculate the optimal window size based on your components, instead of setting a location first.

Bonus: Adding the Red Cross Icon #

When you want to show an error, you can set an icon on the corresponding label (for example, when username validation fails):

// Replace with your actual icon path
ImageIcon errorIcon = new ImageIcon("path/to/red-cross.png");
lblX1.setIcon(errorIcon);
// To hide it again:
lblX1.setIcon(null);

内容的提问来源于stack exchange，提问作者Yakir Malka