GWT FlowPanel 不添加小部件

Question

我有一个扩展 FlowPanel 的 class。我像这样添加一个 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 中所有可用的 space。然后您告诉 Grid 小部件执行相同的操作。结果是您的 Grid 的高度为零，因为在 DataGrid 占据了 FlowPanel 高度的 100% 之后没有 space 留给它。

您要么必须使用“50%”作为高度，要么使您的 DataGrid 固定大小（“100px”），然后告诉 Grid 占用其余部分。实现这一点的最简单方法是使用 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 模型。所有现代浏览器都支持它。

Answer 2

@Patrick，关于你的评论，我使用 DockLayoutPanel 来为我调整大小：

DockLayoutPanel gridPanel = new DockLayoutPanel(Unit.PCT);
gridPanel.addNorth(dataGrid, 60);  //datagrid will take 60% of the panel
gridPanel.add(grid);  //grid will take the remaining space

GWT FlowPanel 不添加小部件

GWT FlowPanel not adding widget

css

gwt

datagrid

flowpanel