GWT:带有自定义选项卡的TabLayoutPanel无法正确显示

我有一个TabLayoutPanel，我在其中放置自定义小部件，以便选项卡能够在文本旁边显示一些图像。我最初使用TabPanel并对选项卡文本使用自定义HTML，但自定义选项卡小部件允许我根据需要动态修改图像

“我的选项卡”小部件本质上是一个水平面板、许多小图像和一行文本。我遇到的问题是，选项卡不希望像正常情况一样粘在选项卡栏的底部。选项卡位于为选项卡栏保留的空间的顶部，它与选项卡栏底部之间有一个间隙。我将问题的图像上载到

---

是否有一些样式需要应用于自定义小部件选项卡以使其正确显示？

在我的短暂经验中，较新的标准模式面板（它们都以“LayoutPanel”结尾）与较旧的面板（仅以“Panel”结尾的面板）不兼容。因此，您可以考虑尝试DokLayOutPoT而不是SaleOntLabor，它可能更为协作。

请参阅，特别是“什么在标准模式下不起作用？”：

水平面板有点棘手。在某些情况下，您可以简单地 将其替换为DockLayoutPanel，但这需要您指定 它的孩子的宽度明确。最常见的选择是 使用FlowPanel，并使用float:left；其上的CSS属性 儿童当然，您可以继续使用HorizontalPanel 它本身，只要你考虑到上面的警告

---

经过进一步研究，我在这里找到了答案：。我不得不使用InlineLabel或InlineHTML小部件，而不是普通的标签或HTML小部件。我已经测试了这个解决方案，它完全符合我的要求。为了完整起见，我粘贴了下面这个类的代码。这里要注意两件事：

无法在最后一个元素（InlineLabel）上设置“float”属性，或者再次出现错误的绘图条件

通过让类直接从FlowPanel扩展而不是使其成为包含FlowPanel的组合，可以进一步清理代码

package com.whatever;

import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Float;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.InlineLabel;

public class StatusTab extends Composite
{
   public interface StatusImages extends ClientBundle
   {
      public static StatusImages instance = GWT.create(StatusImages.class);

      @Source("images/status-green.png")
      ImageResource green();

      @Source("images/status-red.png")
      ImageResource red();
   }

   private final ImageResource greenImage;
   private final ImageResource redImage;

   private final FlowPanel flowPanel;

   public LinkStatusTab(String text, int numStatuses) {

      greenImage = StatusImages.instance.green();
      redImage = StatusImages.instance.red();

      flowPanel = new FlowPanel();
      initWidget(flowPanel);

      for (int i = 0; i < numStatuses; i++)
      {
         Image statusImg = new Image(redImage);
         statusImg.getElement().getStyle().setMarginRight(3, Unit.PX);
         statusImg.getElement().getStyle().setFloat(Float.LEFT);
         flowPanel.add(statusImg);
      }

      flowPanel.add(new InlineLabel(text));
   }

   /**
    * Sets the image displayed for a specific status entry.
    */
   public void setStatus(int which, boolean status)
   {
      Image image = (Image)flowPanel.getWidget(which);
      if (status)
         image.setResource(greenImage);
      else
         image.setResource(redImage);
   }
}

package.com；
导入com.google.gwt.core.client.gwt；
导入com.google.gwt.dom.client.Style.Float；
导入com.google.gwt.dom.client.Style.Unit；
导入com.google.gwt.resources.client.ClientBundle；
导入com.google.gwt.resources.client.ImageResource；
导入com.google.gwt.user.client.ui.Composite；
导入com.google.gwt.user.client.ui.FlowPanel；
导入com.google.gwt.user.client.ui.Image；
导入com.google.gwt.user.client.ui.InlineLabel；
公共类StatusTab扩展了复合
{
公共接口StatusImages扩展了ClientBundle
{
公共静态StatusImages实例=GWT.create（StatusImages.class）；
@来源（“image/status green.png”）
ImageResource绿色（）；
@来源（“图像/状态red.png”）
图像资源红色（）；
}
私有最终图像资源绿色图像；
私有最终图像资源重新图像；
私人最终流程面板流程面板；
公共链接状态选项卡（字符串文本，int numstatus）{
greenImage=StatusImages.instance.green（）；
redImage=StatusImages.instance.red（）；
flowPanel=新的flowPanel（）；
initWidget（flowPanel）；
for（int i=0；i

---

我现在可以说，tab小部件没有应用任何样式。我打印出了主样式名和样式名，两者都是空白的。在我开始写这篇文章之前，我试着用FlowPanel替换它，正如那页上所建议的那样，它给了我相同的结果。如果我将其改为使用DockLayoutPanel，我应该使用addLineEnd（）来添加子窗口小部件，对吗？我不能只使用add（），因为有多个孩子。谢谢分享最后的答案：）