miglayout中的相对布局

Question

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

      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。这意味着当行被分配高度 space、 如果有空间 ，第一行将占用 space 的 70%，第二行将占用space.
第 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);
    }
}

miglayout中的相对布局

Relative layout in miglayout

java

miglayout