使用MigLayout布局GUI

Question

我是MigLayout的新手，我经历了他们提供的快速入门，并在YouTube上观看了教程。我必须布局以下GUI。

我尽可能多地尝试但没有成功。元素放置不正确，如交叉卡住徽标，云采取附加方块，等等。我得到了这个（我已经改变了云图像）

我经历了很多网页，但仍然没有帮助。布置此页面的代码/方法是什么，以便我可以开始/理解？或者这个页面前两行的代码是什么？ （将comp的名称作为comp1，comp2等或随意使用）

我的布局代码

setLayout(new MigLayout("","[left][fill][fill][fill][fill][fill][right]",""));
add(new JLabel(logo),"span 6"); //the tucan bird
add(cross,"top,align right,wrap"); //the exit cross
add(news,"span,gapleft 800,wrap"); //the label 'news'
add(new JLabel(cloud),"span 3");  //the large cloud picture 

SmallPanel one=new SmallPanel(); //Small Panel are square boxes which I later fill with news
        add(one);

SmallPanel two=new SmallPanel();
    add(two,"wrap");

Answer 1

关于MigLayout的几点说明：

1. 调试布局的第一步是将debug标志添加到布局约束中（请参阅cheat sheet：

   setLayout(new MigLayout("debug", "", ""));
   

   这将有助于概述带有彩色边框的布局限制，以便您可以看到它的位置。

2. 在我看来，布局对象本身的列/行约束（你的[left][fill]...[right]系列应该是最后的选择。我特别遇到fill约束没有做我的问题但是，在你的特定情况下，一些列限制可能会有所帮助，这导致我从我的答案的第一个列表部分进入第二个......

您在上面以图片形式发布的布局实际上只有3列：

1. 徽标和天气图标/文字
2. 图片第1列（包含“新闻”标签）
3. 图像列2（顶部带有“关闭”图标）

由于您希望第一列比其他列宽，我建议如下：

setLayout(new MigLayout("", "20px[75%]5px[pref]5px[pref]", ""));

如果您这样做，请从现有布局中取出span和gapleft 800;我认为其余的应该仍然适合。如果该标签包含天气文字，您可能还需要spany标签/图标 - cloud上的spany 3。 spany 2如果没有。

我现在所使用的计算机并非设置为您测试，但希望一般建议能让您走上正确的道路。摆弄布局可能是GUI编程中令人沮丧的部分之一 - 不要绝望，不要忘记debug旗帜！