Vaadin 13 Flex 成长

Question

我在使用 Vaadin HorizonalLayout 时遇到问题 - 我希望左侧组件填充大部分水平 space，如此 Fiddle

所示

但是，当我运行我的 Vaadin 应用程序时，两个组件平分屏幕。

我的代码：

    HorizontalLayout layout = new HorizontalLayout();
    VerticalLayout left = new VerticalLayout(new Span("LEFT"));
    VerticalLayout right = new VerticalLayout(new Span("RIGHT"));

    layout.add(left, right);
    layout.setPadding(false);
    layout.setMargin(false);
    layout.setFlexGrow(1.0, left);
    layout.setFlexGrow(0,right);

我做错了什么？

Answer 1

如果您为 HorizontalLayout 的宽度指定一个定义的值（如 100%），同时将包含的 VerticalLayouts 的宽度设置为未定义（"as little as possible"），它会起作用：

HorizontalLayout layout = new HorizontalLayout();
layout.setWidthFull();
VerticalLayout left = new VerticalLayout(new Span("LEFT"));
VerticalLayout right = new VerticalLayout(new Span("RIGHT"));
left.setSizeUndefined();
right.setSizeUndefined();

layout.add(left, right);
layout.setPadding(false);
layout.setMargin(false);
layout.setFlexGrow(1.0, left);
layout.setFlexGrow(0,right);
add(layout);

结果：

Vaadin 13 Flex 成长

Vaadin 13 Flex Grow

java

flexbox

vaadin-flow