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>

当我在devmode中运行应用程序时，我看到横幅和两个文本字符串，但没有DeckLayoutView。如何让它出现？

Answer 1

您无法看到DeckLayoutPanel，因为它会隐藏其子女。

请参阅DeckLayoutPanel上的文档：

将小部件添加到DeckPanel后，将会操纵其可见性，宽度和高度属性。

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

这是因为

（...）一次只能看到一个（小部件）

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

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

另外，请确保DeckLayoutPanel的高度不是0. DeckLayoutPanel实现RequiresResize，这意味着它必须是明确的大小。

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

DeckLayoutPanel不显示在横幅下面

1 个答案: