Java 用户界面大小和滚动条的Vaadin问题

我对瓦丁真的是个新手，我已经为这个问题挣扎了两天了，我绝望了。 我修改了原来的例子，它是完美的，直到那时我必须用另一个控件扩展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);
}

}

}

}

因此，据我所知，我必须使用面板，因为FormLayout不能显示滚动条。我应该使用.setSizeFull（）将我的根设置为full，使用.setSizeUndefined（）将childs设置为undefined，因此它将是浏览器窗口的大小，如果某个较大的值，它将显示一个滚动条。 如果我像下面那样修改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);
}

}

像这样：

现在我不知道该怎么办

但是，如果有人有一个更简单、更快捷的想法，让联系人表单可以滚动，请告诉我

提前谢谢

---

巴尔萨斯

我想你应该

• VaadinKoliUI.setSizevell

• ResidentalsUI.setSizelL

• ResidentalsUI.residentalsList.setSizelL

• ResidentalFormTest.setSizell

• ResidentalFormTest.content.setSizeUndefined

• ResidentalsUI.left.setSizell

我还建议取消

ResidentalsUI

中的

HorizontalLayout主布局

，因为它本身就是一个水平布局（如果可能的话，可以重命名它，因为它不是一个UI，删除

implements视图

，因为它看起来不是一个视图）

您的扩展比率看起来不错，以下是我将编写的类：

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

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

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

在本例中，您应该将根目录视为

面板

，将

表单布局

视为子目录。根据：

通常，如果面板在某个方向上具有未定义的大小，如 默认为垂直，它将适合内容的大小，并随时间增长 内容不断增长。但是，如果它具有固定或百分比大小和 它的内容变得太大，无法放入内容区域（滚动条） 将针对特定方向显示

下图是对视觉表现的天真尝试：

也就是说，从您修改

ResidentalFormTest

以扩展

面板

并将

FormLayout

设置为其内容的那一刻起，为了使您的面板具有滚动：

• 在

  ResidentalFormTest.buildLayout（）中将面板大小设置为100%：
  this.setSizeFull（）

• 将内容大小设置为未定义，以便它可以“扩展”到面板大小之外：在

  ResidentalFormTest.buildLayout（）中
  ：
  content.setSizeUndefined（）

为了固定网格和面板之间的空间分配，我认为3:1的比例应该足够了。在

ResidentalsUI.buildLayout（）中

：

• 主布局。设置扩展比率（左，3）
• 主布局。设置扩展比率（residentalForm，1）

---

注意：有时，检查（或试验更改）渲染元素的属性、样式等可能会很方便。一些浏览器（，）内置了对此类开发工具的支持，可以通过菜单或键盘组合（如CTRL+SHIFT+I）进行访问。遗憾的是，它不起作用。在我按照您的建议修改后，newResidental按钮停止工作。在我修改这个后，它停止工作。setSizeUndefine（）；设置大小（）；在ResidentalFormTest的buildLayout（）中。如果我恢复更改按钮，按钮将重新开始工作。Morfic的解决方案已经奏效，解决了问题，但无论如何，也感谢您的时间：）

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

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