我有一个gridLayout的问题,以适应用户的屏幕大小,我想创建一个3列和2行的gridLayout,第一行将包含一个菜单,第二行将是使用面板的正文,以及第一列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);
}
答案 0 :(得分:7)
在详细讨论您的问题之前,我想给您留下一个工具,可以帮助您了解组件在Vaadin中的扩展方式:
通过这个你可以看到我的代码下面有一个扩展整个屏幕的布局,一个面板扩展了网格的最后2个单元格和扩展宽度的标签
调试模式记录在Vaadin的书中
我相信组件正在正确扩展,但是在错误的地方。检查GridLayout在vaadin书中的工作原理。 以下代码更改您的坐标并添加一个标签,以显示面板确实正在采用网格的正确单元格。另外,将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);
}