在TabLelayoutPanel中的ScrollPane中获取TextArea - 如何获取100％的高度？

Question

这是一个证明我的问题的miminal UI。它是常用的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接口（实现onResize（）方法，您可以在其中设置TextArea的高度/宽度

第二种方法是清洁工推荐一种方法，因为它在调整浏览器窗口大小时也会调整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或Widgets链，可以实现RequiresResize / ProvidesResize接口一直到您的自定义TextArea。

Answer 2

您将TextArea放在ScrollPanel中，但ScrollPanel不是必需的，因为TextArea已经内置了可滚动性。如果您取出ScrollPanel，它应该可以正常工作（在我的测试中它可以工作）。

Answer 3

我要跳过这个问题的大小调整部分，但是回答滚动部分（因为它似乎从未得到解决？）。

我遇到了同样的问题，因此我在标签中放置了ScrollPanel，并在其中嵌套了HTMLPanel，其大小为父ScrollPanel的宽度和高度的100％。然后，我使用panel.add( new HTML("my text" ) );来填充它。

我还在实际的长文本字符串中将"\n"替换为"<br />"。 （那适用于我的需要）。

现在，当然，这与TextArea并不完全相同，但它确实允许您在{{1}内显示长时间运行的滚动文字}}