GWT 嵌套 TabLayoutPanel 显示中的虚假块是什么？答案

【问题标题】：What is the spurious block in the display of GWT nested TabLayoutPanel?GWT 嵌套 TabLayoutPanel 显示中的虚假块是什么？
【发布时间】：2013-06-20 13:07:49
【问题描述】：

在一个 GWTP 应用程序中，我有一个 TabLayoutPanel 嵌套在另一个 TabLayoutPanel 中。我为每个 Presenter/View 使用 UiBinder。

我没有在此处包含 UiBinder 行（抱歉），但我很难理解为什么嵌套 TabLayoutPanel 在两个选项卡行之间添加了一个额外的橙色薄未标记颜色块（见下图）。具有 VerticalPanel 而不是嵌套 TabLayoutPanel 的顶级选项卡缺少额外的未标记橙色块。

你以前见过这个显示器吗？

我的 MainView.ui.xml 看起来像这样：

<g:TabLayoutPanel barHeight="2" barUnit="EM">
<g:tab>
    <g:header>Invite</g:header>
    <g:VerticalPanel/>
</g:tab>

<g:tab>
    <g:header>News</g:header>
    <g:VerticalPanel/>
</g:tab>

<g:tab>
    <g:header>Teams</g:header>
    <g:TabLayoutPanel barHeight="2" barUnit="EM"/>
</g:tab>

</g:TabLayoutPanel>

对于第三个选项卡，在

之后嵌套另一个 TabLayoutPanel 是否正确？

我的嵌套 TabLayoutPanel 直接用这种格式的每个选项卡定义：

<g:tab>
    <g:header>All Teams</g:header>
    <g:VerticalPanel/>
</g:tab>

Google 开发人员工具显示，在此顶级 TabLayoutPanel 和嵌套的 TabLayoutPanel 之间插入了另一个具有 class="gwt-TabLayoutPabelTab get-TabLayoutPanelTab-selected" 的 DIV。这个额外的选项卡嵌套在具有“gwt-TabLayoutPanelTabs”类的 DIV 中。

这些额外的 DIV 在两行选项卡之间显示一个额外的块。

【问题讨论】：

针对此类问题。最好的办法是检查 Chrome 开发工具，看看这里到底显示了什么。如果没有 UiBinder 代码，很难说出问题所在。

标签： gwt

【解决方案1】：

当使用 VerticalPanel 并将所需的嵌套 TabLayoutPanel 放置在该 Vertical Panel 内时，可以避免虚假块。

在 MainView.ui.xml 中而不是：

<g:tab>
    <g:header>Teams</g:header>
    <g:TabLayoutPanel barHeight="2" barUnit="EM"/>
</g:tab>

使用这个：

<g:tab>
    <g:header>Teams</g:header>
    <g:VerticalPanel/>
</g:tab>

然后在 Teams 的 UiBinder 文件中：

<g:VerticalPanel>
   <g:TabLayoutPanel ...>
       <g:tab>
           ...

通过添加“额外的”VerticalPanel 可以防止 GWT 添加额外的“幽灵”TabLayoutPanel。

【讨论】：