GUI:如何正确设置布局

时间:2018-07-14 09:41:37

标签: java swing user-interface layout layout-manager

我在设置布局时遇到一些问题。 (不要介意按钮的大小,我只想正确地了解布局)。

这是我要制作的窗口:

Picture of what I want to make

这是我尝试过的窗口:

I tried

这是我的代码:

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);
    }

}

有人可以帮助我了解布局的工作原理吗?

我一直在观看很多视频,并尝试过不同的布局,但仍然无法正确完成。告诉我是否使用了正确的布局,或者是否应该更改它。

2 个答案:

答案 0 :(得分:2)

this答案中建议的

GridBagLayout可以为左侧提供所需的全部控制。
如果您愿意为简单起见而牺牲一些控制,则可以在FlowLayout中使用两个GridLayout面板:

enter image description here

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 :(得分:1)

我将在右侧的按钮中使用一列GridLayout,在其左侧的所有内容中使用GridBagLayout。将带有按钮的面板放在LINE_END的{​​{1}}中,其余的放置在BorderLayout中。

这是它的外观:

enter image description here

为所需的空白调整边距,布局填充,插图和空白边框。 (不包括电池。)