css - GWT FlowPanel 不添加小部件

Question

我有一个扩展 FlowPanel 的类。我像这样添加一个 DataGrid 小部件和一个 Grid 小部件:

dataGrid.setWidth("100%");
dataGrid.setHeight("100%");

grid.setWidth("100%");
grid.setHeight("100%");

this.add(dataGrid);
this.add(grid);

this.setWidth("100%");
this.setHeight("100%");

仅显示 DataGrid 小部件。我试过从 FlowPanel 切换到 VerticalPanel 并将 Grid 包装在 FlowPanel 中，但没有任何乐趣。我尝试将 DataGrid 和 Grid 放入 2 行 1 列的 Grid 中，但没有显示任何内容。这是 Safari 上的 GWT 2.6.0。

我怀疑我对 setHeight() 和 setWidth() 在这种情况下的作用有误解，但我不确定。有什么方法可以查看 GWT 在布局方面的想法？

谢谢。

Answer 1

您告诉 DataGrid 占用 FlowPanel 内的所有可用空间。然后您告诉 Grid 小部件执行相同的操作。结果是您的 Grid 的高度为零，因为在 DataGrid 占据了 FlowPanel 高度的 100% 之后就没有剩余空间了。

您要么必须使用“50%”作为高度，要么使您的 DataGrid 固定大小(“100px”)，然后告诉网格占用其余部分。实现这一点的最简单方法是使用 LayoutPanel，然后，例如:

layoutPanel.setWidgetTopHeight(dataGrid, 0, Unit.PX, 100, Unit.PX);
layoutPanel.setWidgetTopBottom(grid, 100, Unit.PX, 0, Unit.PX);

编辑:

这是我用来调整 DataGrid 大小的代码:

public void resize(final boolean addHeader, final boolean addFooter) {
    Scheduler.get().scheduleDeferred(new ScheduledCommand() {

        @Override
        public void execute() {
            // 37 is the height of header and footer based on my CSS
            int height = addHeader ? 37 : 0;
            if (addFooter) {
                height += 37;
            }
            for (int i = 0; i < getRowCount(); i++) {
                height += getRowElement(i).getOffsetHeight();
            }
            setHeight(height + "px");
        }
    });
}

如果您使用这种方法，只需将您的 DataGrid 添加到 FlowPanel，然后将您的 Grid 添加到 FlowPanel。在 DataGrid 上调用 resize()，并且不要在 DataGrid 或 Grid 上设置任何高度或宽度。

要更好地控制，请查看 flex-box layout模型。所有现代浏览器都支持它。