如何在 Java Swing 中创建以下 GUI？

Question

我想用 Java Swing 创建以下 GUI。

由于我对 Java Swing 的经验不足，我不确定如何准确地重新创建该 GUI。

我试过使用如下所示的 GridLayout：

我尝试过其他 LayoutManager，但由于我缺乏经验，我无法获得任何与我想要实现的 GUI 类似的东西。

我可能不得不使用 GridBagLayout，但我已经尝试过了，但根本无法完成任何事情。我不确定如何准确使用 GridBagLayout，尤其是因为所需列的数量存在差异（2、2，然后是 3）。

这是用于创建第二个 GUI 的代码：

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

public class GUITest extends JFrame {

public GUITest() {
    super("Testing Title");
    Container pane = getContentPane();

    pane.setLayout(new GridLayout(3,1));

    pane.add(getHeader());
    pane.add(getTextArea());
    pane.add(getButtonPanel());

}

public JComponent getHeader() {
    JPanel labelPanel = new JPanel();
    labelPanel.setLayout(new GridLayout(1,2));
    labelPanel.setSize(getPreferredSize());

    JLabel labelLocal = new JLabel("Left value: ", JLabel.CENTER);
    JLabel labelDB = new JLabel("Right value: ", JLabel.CENTER);

    labelPanel.add(labelLocal);
    labelPanel.add(labelDB);

    return labelPanel;
}

public JComponent getTextArea() {
    JPanel textPanel = new JPanel();
    textPanel.setLayout(new GridLayout(1,2,5,0));

    JTextArea testTextArea = new JTextArea();
    testTextArea.setEditable(false);
    JScrollPane sp1 = new JScrollPane(testTextArea); 

    JTextArea testTextArea2 = new JTextArea();
    JScrollPane sp2 = new JScrollPane(testTextArea2); 
    testTextArea2.setEditable(false);

    testTextArea.setText("Hello Hello Hello\nTesting!\ntesterino\ntesteroni");
    testTextArea2.setText("Hello Hello Hello\nTesting!\ntest\nABC123\ncdef123\nhijk123");

    textPanel.add(sp1);
    textPanel.add(sp2);
    return textPanel;
}

public JComponent getButtonPanel() {
    JPanel inner = new JPanel();
    inner.setLayout(new FlowLayout((FlowLayout.CENTER),0,100));
    inner.add(new JButton("Do something"));
    inner.add(new JButton("Do something different"));
    inner.add(new JButton("Do something even more different"));
    return inner;
}

public static void main(String[] args) {
    GUITest e = new GUITest();
    e.setSize(700, 500);
    e.setVisible(true);
    e.setResizable(false);
    e.setDefaultCloseOperation(EXIT_ON_CLOSE);
    e.setLocationRelativeTo(null);
}
}

感谢大家的支持！

Answer 1

GridLayout 使所有单元格的大小相同，即 3 行 1 列的外部布局使 3 个单元格的大小完全相同。

相反，对外部容器使用 BorderLayout，并分别添加带有约束 BorderLayout.NORTH、BorderLayout.CENTER 和 BorderLayout.SOUTH 的顶部、中部和底部面板

Answer 2

您可以尝试这样的操作：

import javax.swing.*;
import javax.swing.border.EmptyBorder;
import java.awt.*;

public class Example {

   public static void main(String[] args) {

       JFrame jFrame = new JFrame();
       jFrame.setTitle("Testing Title");
       jFrame.setLocationRelativeTo(null);

       JPanel mainPanel = new JPanel(new BorderLayout());
       mainPanel.setBorder(new EmptyBorder(5, 5, 5, 5));

       JPanel listPanel = new JPanel(new GridLayout(0, 2, 10, 0));

       JPanel leftListPanel = new JPanel(new BorderLayout(0, 10));
       JLabel leftLabel = new JLabel("Left value:");
       JTextArea leftTextArea = new JTextArea("Hello Hello Hello\nTesting!\ntest");
       JScrollPane leftScrollPane = new JScrollPane(leftTextArea);
       leftListPanel.add(leftLabel, BorderLayout.NORTH);
       leftListPanel.add(leftScrollPane, BorderLayout.CENTER);

       JPanel rightListPanel = new JPanel(new BorderLayout(0, 10));
       JLabel rightLabel = new JLabel("Right value:");
       JTextArea rightTextArea = new JTextArea("Hello Hello Hello\nTesting!\ntest");
       JScrollPane rightScrollPane = new JScrollPane(rightTextArea);
       rightListPanel.add(rightLabel, BorderLayout.NORTH);
       rightListPanel.add(rightScrollPane, BorderLayout.CENTER);

       listPanel.add(leftListPanel);
       listPanel.add(rightListPanel);
       mainPanel.add(listPanel, BorderLayout.CENTER);

       JPanel buttonsPanel = new JPanel(new BorderLayout());
       buttonsPanel.setBorder(new EmptyBorder(10, 10, 10, 10));
       buttonsPanel.add(new JButton("Do something"), BorderLayout.WEST);
       buttonsPanel.add(new JButton("Do something different"), BorderLayout.CENTER);
       buttonsPanel.add(new JButton("Do something even more different"), BorderLayout.EAST);
       mainPanel.add(buttonsPanel, BorderLayout.SOUTH);

       jFrame.setContentPane(mainPanel);
       jFrame.pack();
       jFrame.setVisible(true);
   }
}

解释：

首先我创建了一个主 JPanel 和一个 BorderLayout。此 JPanel 将被水平拆分，CENTRE 组件将是另一个包含文本区域和标签的 JPanel，而 SOUTH 组件将是一个包含文本区域和标签的 JPanel按钮。

包含文本区域的 JPanel 被赋予 GridLayout 以便于垂直拆分，并且还被赋予 hgap 的 10 以添加一些间距。

放入那个的左右JPanels都是一样的。他们有一个 BorderLayout 和一个 vgap 来增加间距。 NORTH 组件是 JLabel，CENTRE 组件是包含 JTextArea.

的 JScrollPane

最后，主要 JPanel 的 SOUTH 组件是另一个 JPanel，它再次被赋予 BorderLayout。添加了三个 JButton，并相应地分配了 WEST、CENTRE 和 EAST 属性。

总体结果如下：

Answer 3

这是您的代码，只是做了一些小改动:)

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

     public class GUITest extends JFrame {

         public GUITest() {

              super("Testing Title");  
              Container pane = getContentPane();  
              pane.setLayout(new BorderLayout());//Modified Layout to BorderLayout  
              pane.add(getHeader(),BorderLayout.NORTH); //BorderLayout.NORTH
              pane.add(getTextArea(),BorderLayout.CENTER);//BorderLayout.CENTER
              pane.add(getButtonPanel(),BorderLayout.SOUTH);//BorderLayout.SOUTH

        }  

         public JComponent getHeader() {  

             JPanel labelPanel = new JPanel();  
             labelPanel.setLayout(new GridLayout(1,2));  
             labelPanel.setSize(getPreferredSize());    
             JLabel labelLocal = new JLabel("Left value: ", JLabel.CENTER);  
             JLabel labelDB = new JLabel("Right value: ", JLabel.CENTER);  
             labelPanel.add(labelLocal);
             labelPanel.add(labelDB);
             return labelPanel;

         }

     public JComponent getTextArea() {  

           JPanel textPanel = new JPanel();    
           textPanel.setLayout(new GridLayout(1,2,5,0));
           JTextArea testTextArea = new JTextArea();
           testTextArea.setEditable(false);
           JScrollPane sp1 = new JScrollPane(testTextArea); 
           JTextArea testTextArea2 = new JTextArea();
           JScrollPane sp2 = new JScrollPane(testTextArea2); 
           testTextArea2.setEditable(false);
           testTextArea.setText("Hello Hello Hello\nTesting!\ntesterino\ntesteroni");
           testTextArea2.setText("Hello Hello Hello\nTesting!\ntest\nABC123\ncdef123\nhijk123");
           textPanel.add(sp1);
           textPanel.add(sp2);
           return textPanel;
   }

     public JComponent getButtonPanel() {

          JPanel inner = new JPanel();
          inner.setLayout(new FlowLayout());//Modified to standard FlowLayout  
          inner.add(new JButton("Do something"));  
          inner.add(new JButton("Do something different"));  
          inner.add(new JButton("Do something even more different"));  
          return inner;  

     }

     public static void main(String[] args) {  

          GUITest e = new GUITest();  
          e.pack(); //Modified setSize(700,500) to pack()  
          e.setVisible(true);  
          e.setResizable(false);  
          e.setDefaultCloseOperation(EXIT_ON_CLOSE);  
          e.setLocationRelativeTo(null);  
     }  
}

如何在 Java Swing 中创建以下 GUI？

How do I create the following GUI in Java Swing?

java

user-interface

swing

grid-layout