无法根据屏幕大小适应网格布局（Vaadin 6.7.4）

Question

无法根据屏幕大小适应网格布局（Vaadin 6.7.4）

3

我有一个关于网格布局适应用户屏幕大小的问题。我想创建一个包含3列和2行的网格布局，第一行将包含一个菜单，第二行将使用面板作为主体，第一列X第二行将包含一个树，但我无法得到我想要的结果，这段代码显示了面板，但不是全尺寸。以下是我的代码，我找不到原因为什么它不起作用!!

@Override
public void init() {

    Window main = new Window("My App");
    main.setSizeFull();
    setMainWindow(main);

    VerticalLayout root = new VerticalLayout();
    main.setContent(root);
    main.getContent().setSizeFull();

    GridLayout grid = new GridLayout(3, 2);

    main.addComponent(grid);

    grid.setColumnExpandRatio(0, 0.13f);
    grid.setColumnExpandRatio(1, 0.86f);
    grid.setColumnExpandRatio(2, 0.0f);


    grid.setHeight(100, Sizeable.UNITS_PERCENTAGE);
    grid.setWidth(100,Sizeable.UNITS_PERCENTAGE);


    grid.addComponent(new Label("menu"), 0, 0, 0, 1);
    grid.addComponent(new Label("tree"), 1, 0, 1, 0);

    Panel pan = new Panel();
    pan.setWidth(100, Sizeable.UNITS_PERCENTAGE);
    pan.setHeight(100, Sizeable.UNITS_PERCENTAGE);

    VerticalLayout body = new VerticalLayout();
    body.setSizeFull();

    body.addComponent(pan);

    grid.addComponent(body, 1, 1, 1, 1);

}

- aminedev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rui · Accepted Answer

在进入您的问题细节之前，我想给您留下一个工具，可以帮助您了解Vaadin中组件的扩展方式：

在运行应用程序的地址末尾添加“?debug”（例如localhost/app/?debug）
会出现一个小窗口，上面有按钮。
按C清除，然后按AL分析布局。
将显示一棵组件树。您可以通过按加号浏览该树。
每次按下组件（标签、面板等），该组件都会在屏幕上高亮显示。

通过这个工具，您可以看到我的代码具有完全扩展屏幕的布局，一个在网格的最后2个单元格上扩展的面板和具有扩展宽度的标签。

调试模式在Vaadin书籍中有文档记录。

我认为组件正在正确地扩展，但位置不正确。请在Vaadin书中查看GridLayout的工作原理。以下代码更改了您的坐标，并添加了一个标签，以向您显示面板确实占据了网格的正确单元格。此外，将VerticalLayout添加到面板进行对齐比另一种方式更合理：

@Override
public void init() {


    Window main = new Window("My App");
    main.setSizeFull();
            setMainWindow(main);

            VerticalLayout root = new VerticalLayout();
    main.setContent(root);
    main.getContent().setSizeFull();

    GridLayout grid = new GridLayout(3, 2);

    main.addComponent(grid);

    grid.setColumnExpandRatio(0, 0.13f);
    grid.setColumnExpandRatio(1, 0.86f);
    grid.setColumnExpandRatio(2, 0.0f);


    grid.setHeight(100, Sizeable.UNITS_PERCENTAGE);
    grid.setWidth(100,Sizeable.UNITS_PERCENTAGE);


            grid.addComponent(new Label("menu"), 0, 0, 2, 0);

            grid.addComponent(new Label("tree"), 0, 1);

            Panel pan = new Panel();
    pan.setWidth(100, Sizeable.UNITS_PERCENTAGE);
    pan.setHeight(100, Sizeable.UNITS_PERCENTAGE);




    VerticalLayout body = new VerticalLayout();
    body.setSizeFull();
    pan.addComponent(body);

    Label bodyLabel= new Label("body panel taking the 2 columns of the last row");
    bodyLabel.setSizeUndefined();


    body.addComponent(bodyLabel);
    body.setComponentAlignment(bodyLabel, Alignment.MIDDLE_CENTER);

    grid.addComponent(pan, 1,1 , 2, 1);

         }