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 的解决方案当然是首选。另一种解决方案可能是将 Layouts 放在其他 Layouts 中以构建看起来像网格布局的布局。但这可能更难维护。

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);
    }
}

Vaadin 14 中缺少 GridLayout

Missing GridLayout in Vaadin 14

java

vaadin

vaadin14