Question

我需要设置这样的东西：

Text1: Text2 Text7: Text8 Text11: Text12 Text3: Text4 Text9: Text10 Text13: Text14 Text5: Text6 Text15: Text16 Text17: Text18

我已经尝试过使用GridLayout，显然你不能用它添加边框，而且使用起来非常僵硬。例如，移动其中一个字段或添加字段将需要重新配置网格矩阵。

我考虑过使用不同布局和面板的组合，但我似乎不明白哪个是父，哪个是孩子。如果您不介意，可以使用正确的语法/调用/方法将它放在层次结构中吗？

例如（我在猜测结构）： mainLayout headerLayout panel1 Layout1 Name, Date Layout2 Copyright panel2 Layout3 Nav, Contact Info, Logout

HTML很容易理解，因为heirarchy是代码的一部分，但我在java中这样做，我不知道应该连接什么/内部是什么。

如何使用GridLayout以外的布局生成上述示例？

提前致谢！

Answer 1

当我的老板知道某些边框应该有多少像素等等时，网格/垂直/水平布局有很多问题。所以我放弃了所有这些“方便”的布局，只使用了CssLayouts（https://vaadin.com/book/-/page/layout.csslayout.html），它们只是简单的div，其中所有元素都被抛入。然后我用Css来做魔术。此外，CssLayout创建的HTML比其他布局少，因此编写Css变得更容易，因为冲突较少等等。但我最喜欢的是CustomLayout（https://vaadin.com/book/-/page/layout.customlayout.html），它给了我全部的HTML :)。这允许您使用纯HTML，并且只将文本字段和vaadin组件放入已定义的位置。我会尝试一下;）

Answer 2

它看起来并不那么难。您只需要一个HorizontalLayout将三个VerticalLayouts放在一起。然后，将组件放在适当的VerticalLayouts中。

    @Override
    protected void init(VaadinRequest request) {
    final HorizontalLayout layout = new HorizontalLayout();
    layout.setSizeFull();
    VerticalLayout left = new VerticalLayout(), middle = new VerticalLayout(), right = new VerticalLayout();
    TextField a1 = new TextField(), b1 = new TextField(), c1 = new TextField();
    TextField a2 = new TextField(), b2 = new TextField();
    TextField a3 = new TextField(), b3 = new TextField(), c3 = new TextField();

    layout.addComponents(left, middle, right);
    left.addComponents(a1, b1, c1);
    middle.addComponents(a2, b2);
    right.addComponents(a3, b3, c3);

    setContent(layout);
}

我应该使用哪种Vaadin布局？

2 个答案: