GUI：如何正確設置布局

Question

我在設置布局時遇到了一些問題。 （不要介意按鈕的大小，我只想正確理解布局）。

這是我想要制作的窗口：

這是我試過的窗口：

這是我的代碼：

import javax.swing.*;
import java.awt.event.*;
import java.awt.*;

class Grid extends JFrame
{
    private JTextField t1;
    private JTextField t2;
    private JCheckBox c1;
    private JCheckBox c2;
    private JButton b1;
    private JButton b2;
    private JButton b3;
    private JPanel ButtonPanel1;
    private JPanel ButtonPanel2;
    private JPanel ButtonPanel3;
    private JPanel CheckPanel1;
    private JPanel CheckPanel2;
    private JPanel TextPanel1;
    private JPanel TextPanel2;
    private JPanel EastPanel;
    private JPanel CenterPanel;
    private JPanel WestPanel;
    private JLabel l1;
    private JLabel l2;

    public Grid()
    {
        //CheckBoxes
         c1 = new JCheckBox("Snap to Grid");
         c2 = new JCheckBox("Show Grid");

         CheckPanel1 = new JPanel();
         CheckPanel1.add(c1);

         CheckPanel2 = new JPanel();
         CheckPanel2.add(c2);
         WestPanel = new JPanel(new GridLayout(2,1));
         WestPanel.add(c1);
         WestPanel.add(c2);
         add(WestPanel,BorderLayout.WEST);

          //I don't get how to arrange the labels aligned with the textfields. 

         //TextFields
         l1 = new JLabel("X:");
         t1 = new JTextField("8",3);
         l2 = new JLabel("Y:");
         t2 = new JTextField("8",3);

         TextPanel1 = new JPanel();
         TextPanel1.add(l1);
         TextPanel1.add(t1);

         TextPanel2 = new JPanel();
         TextPanel2.add(l2);
         TextPanel2.add(t2);

         CenterPanel = new JPanel(new GridLayout(2,1));
         CenterPanel.add(l1);
         CenterPanel.add(l2);
         CenterPanel.add(t1);
         CenterPanel.add(t2);
         add(CenterPanel,BorderLayout.CENTER); 

         // Buttons
         b1 = new JButton("Ok");
         b2 = new JButton("Cancel");
         b3 = new JButton("Help");

         ButtonPanel1 = new JPanel();
         ButtonPanel1.add(b1);

         ButtonPanel2 = new JPanel();
         ButtonPanel2.add(b2);

         ButtonPanel3 = new JPanel();
         ButtonPanel3.add(b3);

         EastPanel = new JPanel(new GridLayout(3,1));
         EastPanel.add(ButtonPanel1);
         EastPanel.add(ButtonPanel2);
         EastPanel.add(ButtonPanel3);

         add(EastPanel, BorderLayout.EAST);

    }
}

public class oottest {

    public static void main(String[] args) {

        Grid app = new Grid();

        app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        app.setSize(300,150);
        app.setVisible(true);
    }

}

誰能幫我理解布局是如何工作的？

我一直在觀看很多視頻並嘗試了不同的布局，但仍然無法做到正確。 告訴我我是否使用了正確的布局，或者我是否應該更改它。

Answer 1

此答案中提出的GridBagLayout可以為左側部分提供所需的所有控件。
如果你願意為了簡單而犧牲一些控制，你可以在GridLayout使用兩個FlowLayout面板：

import java.awt.BorderLayout;
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JCheckBox;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

class Grid extends JFrame
{
    private JTextField t1, t2;
    private JCheckBox c1, c2;
    private JButton b1, b2, b3;
    private JPanel topPanel, bottomPanel;
    private JPanel eastPanel, centerPanel;
    private JLabel l1, l2;

    public Grid()
    {
         c1 = new JCheckBox("Snap to Grid");
         l1 = new JLabel("X:");
         t1 = new JTextField("8",3);

         topPanel = new JPanel();//uses flow layout by default
         topPanel.add(c1); topPanel.add(l1); topPanel.add(t1);

         c2 = new JCheckBox("Show Grid");
         l2 = new JLabel("Y:");
         t2 = new JTextField("8",3);

         bottomPanel = new JPanel();
         bottomPanel.add(c2);  bottomPanel.add(l2); bottomPanel.add(t2);

         centerPanel = new JPanel(new GridLayout(2,1));
         centerPanel.add(topPanel);
         centerPanel.add(bottomPanel);
         add(centerPanel,BorderLayout.CENTER);

         b1 = new JButton("Ok");
         b2 = new JButton("Cancel");
         b3 = new JButton("Help");

         eastPanel = new JPanel(new GridLayout(3,1));
         eastPanel.add(b1);
         eastPanel.add(b2);
         eastPanel.add(b3);
         add(eastPanel, BorderLayout.EAST);
    }

    public static void main(String[] args) {

        Grid app = new Grid();
        app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        app.setSize(300,150);
        app.setVisible(true);
    }
}

---

應用此策略的更多示例： 1 2和3

Answer 2

我會為右側的按鈕使用單列GridLayout ，為它們左側的所有內容使用GridBagLayout 。 將帶有按鈕的面板放在BorderLayout的LINE_END中，其余放在CENTER 。

這是它的外觀：

為所需的空白調整邊距、布局填充、插入和空邊框。 （不包括電池。）