DeckLayoutPanel 未显示在横幅下方

Question

我有一个简单的 GWT 应用程序，其顶级 UI 配置了 UiBinder，如下所示：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
             xmlns:g = 'urn:import:com.google.gwt.user.client.ui'>
  <g:HTMLPanel>
    <g:FlowPanel ui:field="mainApplicationWidget" styleName="main-panel">
      <g:HTMLPanel>
        <div class="banner">
          <div class="banner-text-left">
            <h3>Some H3 Text</h3>
            <h2>Some H2 Text</h2>
          </div>
        </div>
      </g:HTMLPanel>

      <g:DeckLayoutPanel ui:field="deckLayoutPanel" styleName="main-deck">
      </g:DeckLayoutPanel>
    </g:FlowPanel>
  </g:HTMLPanel>
</ui:UiBinder>

CSS 是：

.banner {
    float: left;
    width: 100%;
    background-image: url("images/blue-banner.jpg");
    background-size: 100%;
}
.banner h2 {
    font-size:  60px;
    font-family: "Helvetica Neue", "Arial", "Helvetica";
    font-weight: 700;
    color: #fff;
    text-shadow: 3px 3px 3px #000;
    margin-top: 3px;
    text-align: right;
}
.banner h3 {
    font-family: "Helvetica Neue", "Arial", "Helvetica";
    margin: 20px 0px 0px 0px;
    color: #fff;
    font-size: 30px;
    text-align: right;
}
.banner-text-left {
    float: left;
    text-align: left;
    margin-left: 20px;
}

.main-deck {
    width: 100%;
}

代码将这个简单的面板插入到 DeckLayoutView 中：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
             xmlns:g = 'urn:import:com.google.gwt.user.client.ui'>
  <g:HTMLPanel>
    <center>
      <h1>Test Placeholder</h1>
      <g:Label ui:field="testLabel" text="Test"/>
    </center>
  </g:HTMLPanel>
</ui:UiBinder>

当我在开发模式下运行应用程序时，我看到横幅和两个文本字符串，但没有 DeckLayoutView。我怎样才能让它出现？

Answer 1

你看不到DeckLayoutPanel，因为它隐藏了它的孩子。

请参阅DeckLayoutPanel 上的文档：

将小部件添加到 DeckPanel 后，将对其可见性、宽度和高度属性进行操作。

简单地说，DeckLayoutPanel 将在您正在添加的小部件上调用 setVisible(false)。

这是因为

(...) 一次只能看到一个(widget)

您应该做的是在您的 DeckLayoutPanel 实例上调用其中一种方法：

public void showWidget(int index)
public void showWidget(Widget widget)

---

另外，确保DeckLayoutPanel 的高度不为0。DeckLayoutPanel 实现RequiresResize，这意味着它需要明确调整大小。

实现此接口的小部件只应添加到实现ProvidesResize的小部件中。