1

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

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

我需要将某些样式应用于自定义小部件选项卡以使其正确显示吗？

4

2 回答 2

1

根据我的简短经验，较新的标准模式面板（它们都以“LayoutPanel”结尾）与旧的（仅以“Panel”结尾的面板）无法相处。所以你可能会考虑尝试DockLayoutPanel而不是Horizo​​ntalPanel，它可能会更加合作。

请参阅https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels，特别是名为“什么在标准模式下不起作用？”的部分：

Horizo​​ntalPanel 有点棘手。在某些情况下，您可以简单地将其替换为 DockLayoutPanel，但这需要您明确指定其子项的宽度。最常见的替代方法是使用 FlowPanel，并使用 float: left; 其子级的 CSS 属性。当然，您可以继续使用 Horizo​​ntalPanel 本身，只要您考虑到上述注意事项。

于 2012-09-04T20:06:29.200 回答
1

经过更多研究，我在这里找到了答案：https ://groups.google.com/d/msg/google-web-toolkit/mq7BuDaTNgk/wLqPm5MQeicJ 。我不得不使用 InlineLabel 或 InlineHTML 小部件，而不是普通的 Label 或 HTML 小部件。我已经测试了这个解决方案，它完全符合我的要求。为了完整起见，我粘贴了下面类的代码。这里注意两点：

  1. 不能在最后一个元素（InlineLabel）上设置“float”属性，否则会再次出现不正确的绘制条件。

  2. 通过让类直接从 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);
   }
}
于 2012-09-05T02:04:21.610 回答