Question

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

我的标签小部件本质上是一个HorizontalPanel，一些小图像和一行文本。我遇到的问题是标签不想像标准一样粘在标签栏的底部。选项卡位于为标签栏保留的空间的顶部，并且它与标签栏的底部之间存在间隙。我将问题的图像上传到http://imgur.com/fkSHd.jpg。

我是否需要将某些样式应用于自定义窗口小部件标签以使其正确显示？

Answer 1

在我的简短经验中，较新的标准模式面板（它们都以“LayoutPanel”结尾）与较旧的标准面板（刚刚以“面板”结尾的面板）相处不佳。所以你可以考虑尝试使用DockLayoutPanel而不是HorizontalPanel，它可能更合作。

请参阅https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels，特别是“标准模式下无效的内容？”部分：

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

Answer 2

经过一番研究后，我在这里找到答案：https://groups.google.com/d/msg/google-web-toolkit/mq7BuDaTNgk/wLqPm5MQeicJ。我不得不使用InlineLabel或InlineHTML小部件而不是普通的Label或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);
   }
}

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

2 个答案: