TabLayoutPanel 中 ScrollPanel 中的 GWT TextArea - 如何获取 100% 的高度？

Question

这是一个最小的用户界面，展示了我的问题。它是通常的 UIBinder 样板，加上三个小部件:TabLayoutPanel、ScrollPanel、TextArea。我希望 TextArea 占据选项卡的所有可用空间，并且如果无法容纳，我希望它有一个滚动条。但此代码生成一个两行高的 TextArea。你如何解决这个问题？为什么它忽略高度？

在 ui.xml 文件中:

<!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">
  <ui:style>           
        .scrollPanel {
            height: 100%;
        }
        .textArea {
            height: 100%;
        }
      </ui:style>
  <g:TabLayoutPanel barHeight="20" barUnit='PX'>
     <g:tab>
       <g:header>Text Area</g:header>
       <g:ScrollPanel styleName='{style.scrollPanel}'>
         <g:TextArea ui:field='textArea' styleName='{style.textArea}'></g:TextArea>
       </g:ScrollPanel>
     </g:tab>
  </g:TabLayoutPanel>
</ui:UiBinder> 

在 Java 文件中:

package com....client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.ResizeComposite;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.Widget;

public class BugDemoLayout extends ResizeComposite {

    private static BugDemoLayoutUiBinder uiBinder = GWT.create(BugDemoLayoutUiBinder.class);

    interface BugDemoLayoutUiBinder extends UiBinder<Widget, BugDemoLayout> {}

    @UiField TextArea textArea;

    public BugDemoLayout() {
        initWidget(uiBinder.createAndBindUi(this));
        StringBuilder junk = new StringBuilder();
        for (int i=1; i<300; i++) {
            junk.append("Line " + i + "\n");            
        }
        textArea.setText(junk.toString());
    }
}

模块文件只是将 ui 添加到根目录:

public void onModuleLoad() {       
   BugDemoLayout bd = new BugDemoLayout();
   RootLayoutPanel.get().add(bd);

Answer 1

TabLayoutPanel 和 ScrollPanel 均实现 RequireResize界面并使用绝对定位自动调整大小到可用空间。
您为 ScrollPanel 内的内容指定了相对高度 (100%)。这不起作用，因为父级中的大小未显式设置(有关更多详细信息，请参阅 here)。

所以你可以:

1. 在 ScrollPanel 中设置明确的大小(以像素为单位)，然后将 Textarea 高度设置为 100%。
2. 扩展 TextArea 并实现 RequiresResize 接口(interface)(实现 onResize() 方法，在其中设置 TextArea 的高度/宽度

第二种方法是更清晰的推荐方法，因为当您调整浏览器窗口大小时，它也会调整 TextArea 的大小。 它看起来像这样:

文本区域:

public class ResizableTextArea extends TextArea implements RequiresResize {

     public void onResize() {

         int height = getParent().getOffsetHeight();
         int width = getParent().getOffsetWidth();
         setSize(width+"px",height+"px");
     }
}

您必须将 TabLayoutPanel 放入 RootLayoutPanel 中。这将确保有一个不间断的 LayoutPanels 链或实现 RequiresResize/ProvidesResize 接口(interface)的 Widget，一直到您的自定义 TextArea。