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 了解更多详细信息)。

所以你可以:

在 ScrollPanel 中设置显式大小(以像素为单位)，然后将 Textarea 高度设置为 100%。

扩展 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)一直到您的自定义 TextArea。