miglayout 中的相对布局

Question

我正在尝试使用 Miglayout 对齐 Jpanel 上的三个按钮。 Button1 与 Jpanel 的 50% 50% 对齐，Button2 和 Button3 在 50% 80% 处彼此相邻对齐。看起来这应该很容易，但我无法让所有按钮正确对齐。这是我的代码的 sn-p：

      panel = new JPanel();
      panel.setLayout(new MigLayout());
      this.add(panel);// add to JFrame
      JButton Button1 = new JButton("Button 1");
      Button1.setPreferredSize(new Dimension(200,70));
      JButton Button2 = new JButton("Button 2");
      Button2.setPreferredSize(new Dimension(200,70));
      JButton Button3 = new JButton("Button 3");
      Button3.setPreferredSize(new Dimension(200,70));
      panel.add(Button1, "push,align 50% 50%");
      panel.add(Button2, "split,align 50% 80%");
      panel.add(Button3, "push,align 50% 80%");
      this.setLocationRelativeTo(null);
      this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      this.setVisible(true);
      this.pack();

正如您在附图中看到的那样，水平对齐方式与预期不符。但是，如果我只添加 Button1 或 Button2 和 Button3，则对齐是正确的。我该如何解决？

Answer 1

MigLayout 并不是真正设计成那样工作的。这并不是说不可能，因为有一些解决方法，但它们并不理想。

MigLayout 的工作方式是使用网格来放置组件。当您将组件添加到使用MigLayout 作为布局的容器时，它会按水平顺序添加它们。

align 属性的工作方式是尝试将该行的单元格与您当前所在的行和列尽可能接近地对齐。它不允许这些单元格重叠。

这就是为什么它似乎对你不起作用，因为你试图让单元格重叠。

因此，对于您正在做的工作，您至少需要 2 行，然后计算如何相对于每一行对齐组件。解决方法部分对此进行了说明。

您可以通过使用new MigLayout("debug") 将MigLayout 布局设置为debug 模式来查看您的代码的实际外观。

您的尝试

---

解决方法

您可以使用一些简单的加权来实现这一点，并结合一点数学。

• 第 1 步 - 为要增长的行高分配权重。我为第一列选择了 70，为第二列选择了 30。这意味着当行分配高度空间时，如果有空间，第一行将占用 70% 的空间，第二行将占用 30% 的空间。

• 第 2 步 - 使用此权重计算整个容器的 50% 和 80% 的垂直位置。在这种情况下，50 / 70 ≈ 71% 和 10 / 30 ≈ 33%。 （10 来自 80% - 70%）

• 第 3 步 - 使用这些垂直对齐数字排列按钮。

可运行示例

import java.awt.Dimension;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

import net.miginfocom.swing.MigLayout;

public class Test {
    public static void main(String[] args) {
        JFrame frame = new JFrame("Relative Panel");
        JPanel panel = new JPanel(new MigLayout("", "", "[grow 70][grow 30]"));

        JButton Button1 = new JButton("Button 1");
        Button1.setPreferredSize(new Dimension(200,70));
        panel.add(Button1, "push,align 50% 71%, wrap");

        JButton Button2 = new JButton("Button 2");
        Button2.setPreferredSize(new Dimension(200,70));
        panel.add(Button2, "split,align 50% 33%");

        JButton Button3 = new JButton("Button 3");
        Button3.setPreferredSize(new Dimension(200,70));
        panel.add(Button3, "push,align 50% 33%");

        frame.add(panel);
        frame.setPreferredSize(new Dimension(800, 800));
        frame.pack();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}