GWT中的垂直面板和文档布局面板

我的布局结构如图所示

图片简介：HTMLPanel是根面板和两个垂直面板，一个标题和另一个内容面板。第二个垂直面板具有DockLayoutPanel。
现在我的问题是，当我运行项目时，我的DockLayout没有显示出来
主页代码

<g:HTMLPanel>
     <g:VerticalPanel ui:field="contentPane" ></g:VerticalPanel>
     <g:VerticalPanel ui:field="headerPane" styleName="{style.upper-titlebar-container}" ></g:VerticalPanel>
</g:HTMLPanel>

内容面板的代码

<g:HTMLPanel>
        <g:DockLayoutPanel unit='EM'>
             <g:north size='4'>
                <g:Label> Hello </g:Label>
             </g:north>
             <g:east size="7.0">
                  <g:HTMLPanel ui:field="EdgeBandingPane"></g:HTMLPanel>
             </g:east>
             <g:west size="5.8" >
                  <g:HTMLPanel ui:field="PartsPane"></g:HTMLPanel>
             </g:west>

             <g:center >
                  <g:HTMLPanel ui:field="PanelsPane"></g:HTMLPanel>
             </g:center>
             <g:south size="5">
               <g:Label> Hello </g:Label>
             </g:south>
        </g:DockLayoutPanel>

    </g:HTMLPanel>

你好
你好

Iam添加的小部件显示在输出中，但我的Dock面板不显示。 我不理解这个问题

---

提前感谢

GWT*布局面板嵌套在*面板（没有布局的面板）中时不会自动工作。这是因为不同的布局方法：

• 布局面板使用绝对CSS布局，其中大小必须由父元素给定
• “普通”面板随着内容的增长而增长

要在面板中嵌套LayoutPanels，必须设置固定的大小，并在大小改变时调用onResize。 但是，您也可以尝试仅使用布局面板。如果我是对的，您希望标题具有动态高度（高度由其内容定义）。 在这种情况下，您应该使用HeaderPanel。对于标题，可以使用垂直面板。作为（可交换）内容的容器，您可以使用SimpleLayoutPanel，它是承载一个小部件的布局面板：

<g:HeaderPanel>
    <g:VerticalPanel ui:field="headerPane"></g:VerticalPanel>
    <g:SimpleLayoutPanel ui:field="contentPane"></g:SimpleLayoutPanel>
</g:HeaderPanel>

在我看来，应该删除内容DockLayoutPanel周围的额外HTMLPanel，以确保从外部正确设置大小：

<g:DockLayoutPanel unit='EM'>
     <g:north size='4'>
        <g:Label> Hello </g:Label>
     </g:north>
     <g:east size="7.0">
          <g:HTMLPanel ui:field="EdgeBandingPane"></g:HTMLPanel>
     </g:east>
     <g:west size="5.8" >
          <g:HTMLPanel ui:field="PartsPane"></g:HTMLPanel>
     </g:west>
     <g:center >
          <g:HTMLPanel ui:field="PanelsPane"></g:HTMLPanel>
     </g:center>
     <g:south size="5">
       <g:Label> Hello </g:Label>
     </g:south>
</g:DockLayoutPanel>

你好
你好

---

编辑：HTMLPanel应该只对“手动”布局是必需的。不要使用它仅包装一个其他小部件/面板。

GWT*布局面板嵌套在*面板（没有布局的面板）中时不会自动工作。这是因为不同的布局方法：

• 布局面板使用绝对CSS布局，其中大小必须由父元素给定
• “普通”面板随着内容的增长而增长

要在面板中嵌套LayoutPanels，必须设置固定的大小，并在大小改变时调用onResize。 但是，您也可以尝试仅使用布局面板。如果我是对的，您希望标题具有动态高度（高度由其内容定义）。 在这种情况下，您应该使用HeaderPanel。对于标题，可以使用垂直面板。作为（可交换）内容的容器，您可以使用SimpleLayoutPanel，它是承载一个小部件的布局面板：

<g:HeaderPanel>
    <g:VerticalPanel ui:field="headerPane"></g:VerticalPanel>
    <g:SimpleLayoutPanel ui:field="contentPane"></g:SimpleLayoutPanel>
</g:HeaderPanel>

在我看来，应该删除内容DockLayoutPanel周围的额外HTMLPanel，以确保从外部正确设置大小：

<g:DockLayoutPanel unit='EM'>
     <g:north size='4'>
        <g:Label> Hello </g:Label>
     </g:north>
     <g:east size="7.0">
          <g:HTMLPanel ui:field="EdgeBandingPane"></g:HTMLPanel>
     </g:east>
     <g:west size="5.8" >
          <g:HTMLPanel ui:field="PartsPane"></g:HTMLPanel>
     </g:west>
     <g:center >
          <g:HTMLPanel ui:field="PanelsPane"></g:HTMLPanel>
     </g:center>
     <g:south size="5">
       <g:Label> Hello </g:Label>
     </g:south>
</g:DockLayoutPanel>

你好
你好

---

编辑：HTMLPanel应该只对“手动”布局是必需的。不要使用它仅包装一个其他小部件/面板。

感谢您的帮助，我已经清除了DockLayoutPanel周围的HTMLPanel，我可以在我的designer选项卡中看到布局，但在输出中看不到。只有我的标题（垂直布局）显示出来，没有找到我丢失的地方。我在上面发布的代码中有一个问题（我修复了它）：“headerPane”必须是HeaderPanel的第一个子元素，contentPane必须是第二个子元素。我希望这能解决问题。问题不在于顺序，可能是因为我的演示者。调试项目时，“HeaderPane”ParentPresenter为“HomePresenter”，但“contentPane”ParentPresenter为空。在我的演示文稿中添加它时，我遗漏了一些地方。你知道我在哪里失踪吗。我使用过GWTP。我不太了解GWTP，因为我们总是使用GWT当前版本中包含的活动/场所框架。这条规则很少有例外。HeaderPanel就是其中之一。HeaderPanel是一种混合小部件（不是真正的布局面板）。它希望页眉和页脚内容根据其内容具有“自然”大小。根据页眉和页脚的大小，内容设置为固定大小。因此，对于内容小部件，它的行为类似于*LayoutPanel。感谢您的帮助，我已经清除了DockLayoutPanel周围的HTMLPanel，我可以在我的designer选项卡中看到布局，但在输出中看不到。只有我的标题（垂直布局）显示出来，没有找到我丢失的地方。我在上面发布的代码中有一个问题（我修复了它）：“headerPane”必须是HeaderPanel的第一个子元素，contentPane必须是第二个子元素。我希望这能解决问题。问题不在于顺序，可能是因为我的演示者。调试项目时，“HeaderPane”ParentPresenter为“HomePresenter”，但“contentPane”ParentPresenter为空。在我的演示文稿中添加它时，我遗漏了一些地方。你知道我在哪里失踪吗。我使用过GWTP。我不太了解GWTP，因为我们总是使用GWT当前版本中包含的活动/场所框架。这条规则很少有例外。HeaderPanel就是其中之一。HeaderPanel是一种混合小部件（不是真正的布局面板）。它希望页眉和页脚内容根据其内容具有“自然”大小。根据页眉和页脚的大小，内容设置为固定大小。因此，对于内容小部件，它的行为类似于*LayoutPanel。