在 GWT 中创建一个流体面板来填充页面？答案

【问题标题】：Creating a fluid panel in GWT to fill the page?在 GWT 中创建一个流体面板来填充页面？
【发布时间】：2008-09-17 19:48:15
【问题描述】：

我想要 GWT 中的一个面板来填充页面，而无需实际设置大小。有没有办法做到这一点？目前我有以下内容：

public class Main  implements EntryPoint
{
    public void onModuleLoad()
    {
        HorizontalSplitPanel split = new HorizontalSplitPanel();
        //split.setSize("250px", "500px");
        split.setSplitPosition("30%");

        DecoratorPanel dp = new DecoratorPanel();
        dp.setWidget(split);

        RootPanel.get().add(dp);
    }

}

使用前面的代码 sn-p，什么也没有出现。是否有我缺少的方法调用？

谢谢。

2008 年 9 月 17 日 20:15 更新

我在每一侧都放了一些按钮（明确设置它们的大小），但这仍然不起作用。我真的很惊讶没有像 FillLayout 类或 setFillLayout 方法或 setDockStyle(DockStyle.Fill) 或类似的东西。也许这是不可能的？但是像 GWT 一样受欢迎，我认为这是可能的。

2008 年 9 月 18 日 14:38 更新

我尝试将 RootPanel 的宽度和高度设置为 100%，但仍然无法正常工作。不过，感谢您的建议，这似乎可能会奏效。还有其他建议吗？

【问题讨论】：

标签： java gwt

【解决方案1】：

Google 在其常见问题解答之一中回答了您问题的主要部分： http://code.google.com/webtoolkit/doc/1.6/FAQ_UI.html#How_do_I_create_an_app_that_fills_the_page_vertically_when_the_b

主要的一点是你不能将高度设置为 100%，你必须这样做：

final VerticalPanel vp = new VerticalPanel();
vp.add(mainPanel);
vp.setWidth("100%");
vp.setHeight(Window.getClientHeight() + "px");
Window.addResizeHandler(new ResizeHandler() {

  public void onResize(ResizeEvent event) {
    int height = event.getHeight();
    vp.setHeight(height + "px");
  }
});
RootPanel.get().add(vp);

【讨论】：

这是一个很好的答案，但是现在 GWT 内置了这个功能。请参阅我的答案以获取一些链接。

【解决方案2】：

Ben 的回答很好，但也过时了。在 GWT 1.6 中需要调整大小处理程序，但我们现在是 2.4。您可以使用DockLayoutPanel 让您的内容垂直填充页面。请参阅使用此面板的sample mail app。

【讨论】：

这里是来源：code.google.com/p/google-web-toolkit/source/browse/trunk/…

【解决方案3】：

我认为您需要在拆分的左侧和/或右侧放置一些东西（split.setLeftWidget(widget)、split.setRightWidget(widget) 或 split.add(widget)，这将首先添加到左，然后右），以便显示任何内容。

【讨论】：

【解决方案4】：

在添加小部件之前，尝试将根面板的宽度和/或高度设置为 100%。

【讨论】：

【解决方案5】：

面板会自动调整为最小的可见宽度。因此，您必须将添加到 RootPanel 的每个面板的大小调整为 100%，包括您的 SplitPanel。 RootPanel 本身不需要调整大小。所以试试：

split.setWidth("100%");
split.setHeight("100%");

【讨论】：

Drejc，感谢您的回复。我尝试将 SplitPanel 尺寸和 RootPanel 尺寸都设置为 100%。仍然没有运气。再次感谢。
设置您的 CSS 样式，使面板边框可见。然后，您将看到需要调整哪个面板的大小。当我不知何故迷失在面板中并且我不知道哪个负责什么时，这是我首选的故障排除方式。

【解决方案6】：

DecoratorPanel 的文档说：

如果设置了DecoratorPanel的宽度或高度，则需要将middleCenter单元格的高度和宽度设置为100%，这样middleCenter单元格就会占据所有可用空间。如果不设置 DecoratorPanel 的宽高，它会紧紧包裹住里面的内容。

【讨论】：

【解决方案7】：

问题是 DecoratorPanel middleCenter 单元格将默认填充您的内容，而 SplitPanel 不允许“100%”样式大小设置。做你想做的事，在你的 CSS 上适当地设置表格的样式：

.gwt-DecoratorPanel .middleCenter { 高度：100%；宽度：100%； }

【讨论】：

【解决方案8】：

对我来说，如果我像这样设置宽度是行不通的

panel.setWidth("100%");

面板是一个 VerticalPanel，它只是随机大小，我不知道它来自哪里。但是在我添加这行之后，@Ben Bederson 的评论对我来说效果很好：

panel.setWidth(Window.getClientWidth() + "px");

只有这个，没有别的。谢谢

【讨论】：