Vaadin 14 中缺少 GridLayout

Question

Vaadin 8 有一个布局，它使用 CSS 网格来布局组件 Vaadin Grid Layout 的各个部分。 借助此布局，您可以拥有一个网格，其中单元格水平和垂直跨越多列和多行。 现在在 Vaadin 14 中不再有 GridLayout。 Vaadin 告诉我们，现在 FormLayout 支持多列，在某种程度上它取代了 GridLayout (link)。我认为这不是真的，原因有很多。

• 在上下文中应该在表单上使用 FormLayout。但是如果我们想要布局其他组件呢？
• 使用 GridLayout，您可以准确控制要在网格中放置元素的位置。我还没有找到在 FormLayout 中做到这一点的方法
• 如github 所述，无法使元素跨越多行

请随时编辑此问题以在此列表中添加更多分数。

有什么好的选择吗？ （除了降级到 vaadin 8，这不是一个真正的选择。） 一个明显的解决方案是使用 Polymertemplate 或 Littemplate，但肯定会首选仅使用 Java 的解决方案。 另一种解决方案可能是将布局放在其他布局中以构建看起来像网格布局的布局。但这可能更难维护。

Answer 1

看看 Vaadin 组件目录中的Css Grid Layout。

有一个演示here

它支持跨行和跨列，例如此示例来自使用 FluentGridLayout.withItemWithSize() 方法的演示：

public class FlexibleGridLayoutExample2 extends HorizontalLayout {
    public FlexibleGridLayoutExample2() {
        FlexibleGridLayout layout = new FlexibleGridLayout()
                .withColumns(Repeat.RepeatMode.AUTO_FILL, new MinMax(new Length("190px"), new Flex(1)))
                .withAutoRows(new Length("190px"))
                .withItems(
                        new ExampleCard(), new ExampleCard())
                .withItemWithSize(new ExampleCard(), 2, 2) // add item with a custom size (2 rows and 2 cols)
                .withItems(
                        new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(),
                        new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(),
                        new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(), 
                        new ExampleCard(), new ExampleCard(), new ExampleCard()
                )
                .withPadding(true)
                .withSpacing(true)
                .withAutoFlow(GridLayoutComponent.AutoFlow.ROW_DENSE) // allow the item order to be changed to let elements fill empty spaces.
                .withOverflow(GridLayoutComponent.Overflow.AUTO);
        layout.setSizeFull();
        setSizeFull();
        add(layout);
    }
}

您还可以使用 FluentGridLayout 指定单元格的开始和结束位置。 withRowAndColumn() 方法：

public class CssGridLayoutExample1 extends VerticalLayout {
    public CssGridLayoutExample1() {
        Component alignTestComponent = new ExampleCard();
        FluentGridLayout layout = new FluentGridLayout()
               .withTemplateRows(new Flex(1), new Flex(1), new Flex(1))
               .withTemplateColumns(new Flex(1), new Flex(1), new Flex(1))
               .withColumnAlign(alignTestComponent, GridLayoutComponent.ColumnAlign.END)
               .withRowAlign(alignTestComponent, GridLayoutComponent.RowAlign.END)
               .withRowAndColumn(alignTestComponent, 1, 1, 1, 3)
               .withRowAndColumn(new ExampleCard(), 2, 1)
               .withRowAndColumn(new ExampleCard(), 2, 2)
               .withRowAndColumn(new ExampleCard(), 1, 3, 3, 3);
        layout.setSizeFull();
        setSizeFull();
        add(layout);
    }
}