如何使用 GridBagLayout 实现这种布局？

Question

我对如何开始实现这一点感到困惑，我应该创建一个基本上有 4 行的GridBagLayout并在每个中输入组件吗？

Answer 1

要准确地复制这一点，这将很棘手，因为 gridBagLayout 完全按照它所说的那样做......将项目放在网格上。

为了使项目与您的图像完全一样显示，您需要跨越多个单元格并将它们重叠。 您必须先尝试一下，然后才能让它看起来完全符合您的要求。

话虽如此，这些是您在使用 GridBagLayout 时应牢记的事项：

gbc.gridx = 0; // The x poisiton, greater value means further east
gbc.gridy = 0; // The y position, greater value means further south

因此，如果您只使用 2 列，则退出按钮将是：

gbc.gridx = 1;
gbc.gridy = 2;

但是，如果您希望它看起来像图像，您将不得不使用跨越多个网格或单元格的项目。 这就是你如何让一些项目跨越一整行。

gbc.gridwidth = 2; // To span 2 cells horizontally
gbc.gridheight = 2; // To span 2 cells vertically

您也可以尝试使用重量。 例如：

gbc.weightx = 0.8; // Will cause the item at this cell to span 80% of the width, if there are only two columns

当您将项目添加到组件时不要忘记包含您的 gbc，并在添加每个组件之前重置每个 gbc 值，即使它们是相同的可读性。

Answer 2

我将使用两个带有GridBagLayout的面板（红色轮廓）和两个带有FlowLayout的面板（蓝色轮廓）。

试一试，如果您遇到问题，请与我们联系。

请注意，通过对顶部的两个 label / 字段组合使用 GBL，可以轻松对齐字段的左侧和标签的右侧（看起来更好，IMO）。