ScrollPanel 内的 GWT TabLayoutPanel

Question

我正在努力理解他们在 2.0 中引入的 GWT 布局系统。据说是推荐的，但它似乎比旧方法复杂得多。

我想做的（我觉得这是一个非常基本的设计）是构建一个带有页眉、左侧垂直菜单、页脚和滚动内容部分的应用程序。

所以，要做到这一点，你这样做：

DockLayoutPanel panel = new DockLayoutPanel();

FlowPanel header = new FlowPanel();
FlowPanel menu = new FlowPanel();
FlowPanel footer = new FlowPanel();

ScrollPanel content = new ScrollPanel();

panel.addNorth(header);
panel.addWest(menu);
panel.addSouth(footer);

panel.add(content);

RootLayoutPanel.get().add(panel);

效果很好。除了，ScrollPanel（所有内容所在的地方）显然破坏了布局流程。所以，在我的活动中，我有：

@Override
public void start(AcceptsOneWidget panel, EventBus eventBus)
{
    FlowPanel viewPanel = new FlowPanel();

    panel.add(viewPanel);
}

如果我将 TabLayoutPanel 添加到 viewPanel，它将无法正确显示。我必须将它添加到一个 LayoutPanel，该 LayoutPanel 连接到一个 LayoutPanel 连接到一个 LayoutPanel 等。一直到 RootLayoutPanel。

所以，我试试这个：

@Override
public void start(AcceptsOneWidget panel, EventBus eventBus)
{
    LayouPanel viewPanel = new LayoutPanel();

    panel.add(viewPanel);
}

在我的 ui:binder 中，我有：

<g:LayoutPanel>
    <g:layer>
        <g:TabLayoutPanel barHeight="3.33" barUnit="EM" height="500px">
            <!-- tabs go here -->
        </g:TabLayoutPanel>
    </g:layer>
</g:LayoutPanel>

这里有两件事。

1. 我不想设置高度。我希望标签面板与内容一样大。我不明白为什么您必须在这种“更好”的应用布局方法中设置高度。

2. 它仍然没有显示在屏幕上。我假设是因为它被附加到 ScrollPanel。让我困惑的是，ScrollPanel 确实实现了 RequiresSize 和 ProvidesResize，所以它不是有效的 LayoutPanel 吗？这就是 LayoutPanel 所做的一切。它是一个实现这些接口的 ComplexPanel

当我检查页面并将鼠标悬停在 TabLayoutPanel 应该在的位置时，我得到一个蓝色突出显示（在 Chrome 中），就好像它在那里一样，但似乎是

<g:layer> 

包裹它没有高度，所以它隐藏了 TabLayoutPanel。事实上，如果我在查看器中将其编辑为具有高度，则 TabLayoutPanel 会显示。

我在这里做一些根本错误的事情吗？我非常想做：

RootLayoutPanel > DockLayoutPanel > ScrollPanel > *Some Container > TabLayoutPanel

为了让事情……工作。我正在尝试将我当前的应用程序转换为这种新的布局内容，以摆脱在后台生成的所有表格，但它似乎导致的问题比它修复的要多。

*此容器在选项卡面板的上方和下方都有东西

Answer 1

您建议的布局中的 ScrollPanel 将占用 DockLayoutPanel 为其分配的空间。如果“Some Container”永远不会大于分配给 ScrollPanel 的空间，则 ScrollPanel 将永远不会滚动。如果“某些容器”可能变得更大（即需要滚动），则该容器无法从 ScrollPanel 获取其大小 - 它的高度应该明确设置，或者应该是随内容增长的常规 FlowPanel。在这两种情况下，这个“Some Container”都无法为其子项提供任何大小，包括 TabLayoutPanel。

如果没有看到要求就很难给出建议，但是如果您需要在面板中包含一个 TabLayoutPanel 并随着它自己的内容增长，您必须自己设置它的高度 - 在代码或 CSS 中。