创建一个简单的垂直布局?无法填满所有空间

Question

我在设置一个简单的布局时遇到了问题。我想要一块垂直面板下面的画布。类似于：

VerticalPanel parent = new VerticalPanel();
parent.setWidth("100%");
parent.setHeight("100%");
HorizontalPanel hp = new HorizontalPanel();
hp.setWidth("100%");
parent.add(hp);
Canvas canvas = Canvas.createIfSupported();
canvas.setWidth("100%");
canvas.setHeight("100%");
parent.add(canvas);

因此，基本上，我希望顶部面板"hp"只达到其内容所需的高度，页面的其余部分应该填充画布元素。但我得到了奇怪的效果，画布似乎只填充了屏幕的一部分等。它报告布局后的高度约为200像素，而可用高度应在600像素左右。

感谢

Answer 1

画布可能不会占用所有空间，因为它不包含任何内容，或者因为没有设置大小并默认为300px。请参阅：GWT Canvas-保存图像并打开

更新：

垂直和水平面板只是HTML表格。它们将占用与内容高度一样多的空间。

相反，您可以使用：DockLayoutPanel

public void onModuleLoad() 
{
DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PCT);
dockLayoutPanel.addNorth(new Label("My header"),5);
Canvas canvas = Canvas.createIfSupported();
canvas.getElement().getStyle().setBackgroundColor("red");
canvas.setWidth("100%");
canvas.setHeight("100%");
dockLayoutPanel.add(canvas);
RootLayoutPanel.get().add(dockLayoutPanel);
}

另请查看：开发者指南-使用面板布局