GWT 复合动态高度调整大小答案

【问题标题】：GWT composite dynamic height resizeGWT 复合动态高度调整大小
【发布时间】：2010-12-20 21:52:22
【问题描述】：

我有一个 GWT 组合，其中一些其他组合是动态添加的。我想让可能的父复合调整大小以自动适应其所有子小部件的高度。我尝试为 Composite 设置 setHeight("100%") 但这不起作用。任何想法如何完成此功能？

谢谢。编辑：

final DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
    dockLayoutPanel.setStyleName("EntryPanel");
    dockLayoutPanel.setSize("142px", "72px");
    initWidget(dockLayoutPanel);

    final VerticalPanel panel = new VerticalPanel();
    panel.setSize("140px", "72px");

    chckbxExport = new CheckBox("Export");
    putField(CommonPresenter.CONSTANTS.EXPORT, chckbxExport);

    dateBox = new DateBox();

    dateBox.addValueChangeHandler(new ValueChangeHandler<Date>() {
        @Override
        public void onValueChange(final ValueChangeEvent<Date> event) {
            dateChanged = true;
        }
    });

    panel.add(dateBox);

    final ListBox visibility = new ListBox();

    final Label lblVisibility = new Label("Visibility:");
    LabeledWidget vis = new LabeledWidget(lblVisibility, visibility);

    for (int i = 0; i < CommonPresenter.CONSTANTS.VISIBILITIES.length; i++) {
        visibility.addItem(CommonPresenter.CONSTANTS.VISIBILITIES[i]);
    }

    putField(CommonPresenter.CONSTANTS.VISIBILITY, visibility);

    panel.add(vis);
    panel.add(chckbxExport);

    dockLayoutPanel.add(panel);

更新：设置复合宽度以填充所有可用的窗口水平空间：

 final int scrollBarWidth = 25;
// editPanel.setHeight("180px");
setWidth(Window.getClientWidth() - scrollBarWidth + "px");
// editPanel.setStyleName("EditorPanel");

Window.addResizeHandler(new ResizeHandler()
{
  public void onResize(ResizeEvent event)
  {
    int width = event.getWidth();
    setWidth(width - scrollBarWidth + "px");
  }
});

【问题讨论】：

标签： gwt composite autoresize

【解决方案1】：

下面是一般使用 HTML+CSS 的方法：

创建父级，不要设置其高度（或设置为auto）。
然后添加孩子（只要确保您不使用 absolute/fixed 定位孩子）。
如果需要，设置孩子的身高。

然后会自动调整父级的高度。 GWT Composites 也是如此——只要确定哪些 CSS（包括样式属性）适用于您的元素！如果不确定，请使用 Firebug。

如果您需要更多细节，那么您必须发布一些代码来展示您如何构造父复合材料（UiBinder，...？）

【讨论】：

你好，我在编辑下包含的合成有一个奇怪的行为。仅显示导出复选框。我怀疑它与 VerticalPanel 有关，但无法弄清楚。上面的代码有什么问题？
@othman: DockLayoutPanel s 使用 absolute 定位...正如我的回答中提到的，孩子们不能使用这个 - 它永远不会起作用，因为绝对定位的孩子不会影响父母的大小（这就是绝对定位）！尝试改用FlowPanel。您可能也不需要VerticalPanel (?)
感谢 chris-if DockLayoutPanel 不应该被使用，这意味着我应该寻找其他 GWT 面板来布局我的小部件。哪些标准 GWT 面板不使用绝对定位并为我的小部件布局提供灵活性？非常感谢
@othman：我推荐的基本面板是FlowPanel - 其他一切都完全取决于您想要实现的目标。顺便说一句，如果你使用 CSS 来定位孩子，可以使用 FlowPanel 完成很多事情（这可能是一个很好的技术，GWT 团队甚至是 suggested）。
克里斯，我不知道你说的绝对定位是什么意思？事实上，有一个 AbsolutePanel 可以做到这一点，但 DockLayoutPanel 将其子项定位在区域（北、南、西、中）这不是绝对定位，除非这个词对你有其他含义。你的评论是什么？

【解决方案2】：

您可以通过 Window#getClientHeight() 获取实际高度，而不是使用“100%”。要处理用户调整浏览器大小的情况，您可以使用 ResizeHandler。

【讨论】：

如果我正确阅读了问题，OP 不想根据浏览器窗口大小调整复合材料的大小。

【解决方案3】：

尝试覆盖 Resize()（您的类必须扩展为 ResizeComposite）。在这个 re-size 方法中设置你想要的大小。

这是动态的，因为每次调整窗口大小时都会调用此方法并相应地设置值。

【讨论】：