Question

我是vaadin的真正新手，我现在正在努力解决这个问题2天，我很绝望。我修改了原始的addressbook示例，直到那时我不得不用另一个控件扩展ContactForm。更容易展示我想要实现的目标。如果我可以向右滚动会很好，但我不能。我展示了我已经有些人会注意到我的错。我不会发布所有代码，只是必要的部分。

这是我创建主要布局的地方。

public class VaadinKoliUI extends UI {
@Override
protected void init(VaadinRequest request) {
    TabSheet tabsheet = new TabSheet();
    HorizontalLayout residentalsTab = new ResidentalsUI();
    residentalsTab.setSizeFull();
    tabsheet.addTab(residentalsTab,"Lakók");
    tabsheet.setSizeFull();
    setContent(tabsheet);
}

}

public class ResidentalsUI extends HorizontalLayout implements View{

private Grid residentalsList = new Grid();
ResidentalFormTest residentalForm = new ResidentalFormTest(this);

public ResidentalsUI(){
    buildLayout();
}
private void buildLayout(){
    HorizontalLayout actions = new HorizontalLayout(filter,excelDownload, newResidental);
    actions.setWidth("100%");
    filter.setWidth("100%");
    actions.setExpandRatio(filter, 1);

    VerticalLayout left = new VerticalLayout(actions, getResidentalsList());
    left.setSizeFull();
    getResidentalsList().setSizeFull();
    left.setExpandRatio(getResidentalsList(), 1);

    HorizontalLayout mainLayout = new HorizontalLayout(left, residentalForm);

    mainLayout.setSizeFull();
    mainLayout.setExpandRatio(left, 1);

    this.setSizeFull();
    this.addComponent(mainLayout);

}

}

public class ResidentalFormTest extends Panel{
FormLayout content = new FormLayout();
Button save = new Button("Save", this::save);
//more buttons and controlls
public ResidentalFormTest(ResidentalsUI rUI) {
    this.rUI = rUI;
    buildLayout();
}
private void buildLayout() {
    this.setSizeUndefined();

    content.setMargin(true);
    HorizontalLayout actions = new HorizontalLayout(save, cancel);
    actions.setSpacing(true);

    content.addComponents(actions, name, sex, address, email, phoneNumber, major,classYear,neptunCode,
            roomNumber, rfidCode,comment,equipment,equipment1,equipment2);
    actions.setSizeUndefined();

    this.setContent(content);
}

}

所以根据我的理解，我必须使用Panel，因为FormLayout无法显示滚动条。我应该使用.setSizeFull（）将子设置为完全，并使用.setSizeUndefined（）将子设置为未定义，这样它将是浏览器窗口的大小，如果某些内容更大，它将显示滚动条。如果我修改VaadinKoliUI类如下所示我有滚动条但ui收缩。

public class VaadinKoliUI extends UI {
@Override
protected void init(VaadinRequest request) {
    TabSheet tabsheet = new TabSheet();
    HorizontalLayout residentalsTab = new ResidentalsUI();
    residentalsTab.setSizeUndefined();
    tabsheet.addTab(residentalsTab,"Lakók");
    tabsheet.setSizeFull();
    setContent(tabsheet);
}

}

像这样：

现在我不知道该怎么做。

但是，如果某人有更容易和更快的想法，要使ContactForm可滚动，请告诉我。

提前致谢巴拉兹

Answer 1

我应该使用.setSizeFull（）将子设置为full，并将子设置为undefined ......

在您的情况下，您应该将 root 视为您的Panel和FormLayout作为孩子。根据{{3}}：

通常情况下，如果某个面板在一个方向上的大小不确定，就像它一样默认垂直，它将适合内容的大小并增长为内容增长。但是，如果它具有固定或百分比的大小它的内容太大而不适合内容区域，滚动条将出现在特定的方向

下面的图片是一个天真的尝试视觉表示：

Vaadin book

这就是说，从您修改ResidentalFormTest以扩展Panel并将FormLayout设置为其内容的那一刻起，为了使您的面板具有滚动条：

在ResidentalFormTest.buildLayout()中将面板大小设置为100％： this.setSizeFull()
将内容大小设置为undefined，以便＆＃34;展开＆＃34; 超出面板大小：ResidentalFormTest.buildLayout()：content.setSizeUndefined()

要确定网格和面板之间的空间分配，我认为3：1的比例应该足够了。在ResidentalsUI.buildLayout()：

mainLayout.setExpandRatio（left，3）;
mainLayout.setExpandRatio（residentalForm，1）;

注意：有时，检查（或尝试更改）渲染元素可能会派上用场。一些浏览器（，chrome）内置了对此类开发人员工具的支持，可通过菜单或键盘组合访问，例如 CTRL + SHIFT + 我

Answer 2

我认为你应该

VaadinKoliUI.setSizeFull
ResidentalsUI.setSizeFull
ResidentalsUI.residentalsList.setSizeFull
ResidentalFormTest.setSizeFull
ResidentalFormTest.content.setSizeUndefined
ResidentalsUI.left.setSizeFull

我还建议删除HorizontalLayout mainLayout中的ResidentalsUI，因为它本身就是一个水平布局（如果可能的话，可以重命名它，因为它不是用户界面并删除implements View它似乎不是一种观点。）

您的扩展比率看起来不错，这是我要写的类：

public class VaadinKoliUI extends UI {
@Override
protected void init(VaadinRequest request) {
    TabSheet tabsheet = new TabSheet();
    ResidentalsLayout residentalsTab = new ResidentalsLayout();
    residentalsTab.setSizeFull();
    tabsheet.addTab(residentalsTab,"Lakók");
    tabsheet.setSizeFull();
    setContent(tabsheet);
}

public class ResidentalsLayout extends HorizontalLayout {

    private Grid residentalsList = new Grid();
    ResidentalFormTest residentalForm = new ResidentalFormTest(this);

    public ResidentalsLayout(){
        buildLayout();
    }

    private void buildLayout(){
        HorizontalLayout actions = new HorizontalLayout(filter,excelDownload, newResidental);
        actions.setWidth("100%");
        filter.setWidth("100%");
        actions.setExpandRatio(filter, 1);

        VerticalLayout left = new VerticalLayout(actions, getResidentalsList());
        left.setSizeFull();
        residentalsList.setSizeFull();
        left.setExpandRatio(residentalsList , 1);

        addComponents(left, residentalForm);
        setExpandRatio(left, 1);

        setSizeFull();
    }
}

public class ResidentalFormTest extends Panel {
    FormLayout content = new FormLayout();
    Button save = new Button("Save", this::save);
    //more buttons and controlls
    public ResidentalFormTest(ResidentalsLayout rUI) {
        this.rUI = rUI;
        buildLayout();
    }

    private void buildLayout() {
        setSizeFull();

        content.setMargin(true);
        HorizontalLayout actions = new HorizontalLayout(save, cancel);
        actions.setSpacing(true);

        content.addComponents(actions, name, sex, address, email, phoneNumber, major,classYear,neptunCode, roomNumber, rfidCode, comment, equipment, equipment1, equipment2);
        content.setSizeUndefined();

        setContent(content);
    }
}

让我知道它是否按预期工作。

Vaadin的UI大小和滚动条问题

2 个答案: