子垂直布局的宽度

Question

我有一个 HorizontalLayout（我们称它为 parent）。在这里面我有两个 VerticalLayouts（左边称它们为 left 和 right）。

左边只包含一些文字，右边包含很多元素。

Parent 的宽度为 100%，因此它占用整个浏览器宽度：

parent.setWidth("100%");

左应该根据需要占用space，右应该占用所有其他space .

我该怎么做？我尝试了 here and there 描述的所有变体，但均未成功。我试过：

left.setWidthUndefined();
right.setWidth("100%");
left.setWidth("150px");
left.setWidth("30%"); 连同 right.setWidth("70%");

没有任何影响。

更新源代码：

HorizontalLayout parent = new HorizontalLayout();
parent.setCaption("Parent");

VerticalLayout left = new VerticalLayout();
left.setCaption("Left");

VerticalLayout right = new VerticalLayout();
right.setCaption("Right");

parent.addComponent(left);
parent.addComponent(right);
parent.setWidth("100%");
right.setWidth("100%");
parent.setExpandRatio(right, 1.0f);

setCompositionRoot(parent);

Answer 1

Here is the documentation 用于 HorizontalLayout 组件的 space "distribution"。

解决你的问题的关键是告诉 HorizontalLayout 组件如何通过 layout.setExpandRatio(leftComponent, 1.0f); 方法扩展它的孩子。

Answer 2

我刚刚做了一个快速测试，以下似乎有效：

...
left.setSizeUndefined();
parent.setWidth("100%");
parent.setExpandRatio(right, 1);
...

这是测试应用程序的完整代码（没有导入）：

@Theme("reindeer")
public class ForumUI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = ForumUI.class)
    public static class Servlet extends VaadinServlet {
    }

    public static class SomeComponent extends CustomComponent {
        public SomeComponent() {
            HorizontalLayout parent = new HorizontalLayout();
            parent.setCaption("Parent");
            parent.addStyleName("v-ddwrapper-over");

            VerticalLayout left = new VerticalLayout();
            left.setCaption("Left");
            left.addStyleName("v-ddwrapper-over");

            VerticalLayout right = new VerticalLayout();
            right.setCaption("Right");
            right.addStyleName("v-ddwrapper-over");

            parent.addComponent(left);
            parent.addComponent(right);

            left.setSizeUndefined();
            parent.setWidth("100%");
            parent.setExpandRatio(right, 1);

            setCompositionRoot(parent);
        }
    }

    @Override
    protected void init(VaadinRequest request) {
        setContent(new SomeComponent());
    }

}

子垂直布局的宽度

Width of child vertical layout

vaadin

vaadin7