0

我正在尝试创建一个 layoutPanel，跨越用户屏幕的宽度，其中将包含 4 个图像。无论屏幕高度如何，这些图像都应与其宽度成比例缩放。如：

Landscape:
+----+----+----+----+
| i1 | i2 | i3 | i4 |
|    |    |    |    |
+----+----+----+----+
|                   |
+-------------------+

Portrait:
+--+--+--+--+
|i1|i2|i3|i4|
+--+--+--+--+
|           |
|           |
|           |
+-----------+

我试图通过设置一个面板等于屏幕的宽度来做到这一点。这似乎工作正常。但是当我尝试设置相对于宽度的高度时，高度始终保持为零。

我通过eclipse插件使用GWT。我试图在任何给定时间使用一些换行符来获取变量，但我似乎无法让换行符做任何事情（运行为...，调试为...，在编译期间）。但是，无法进行调试是一个单独的问题。

下面是我正在使用的代码。如果有人能看到我做错了什么，请告诉我。非常感谢！

public void onModuleLoad() {
    int layout_panel_width;
    int layout_panel_height;
    RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();
    rootLayoutPanel.setSize("100%", "100%");

    LayoutPanel layoutPanel = new LayoutPanel();
    rootLayoutPanel.add(layoutPanel);
    rootLayoutPanel.setWidgetLeftWidth(layoutPanel, 0.0, Unit.PCT, 100.0, Unit.PCT);
    layout_panel_width = layoutPanel.getOffsetWidth();
    layout_panel_height = layout_panel_width * 70 / 128;
    rootLayoutPanel.setWidgetTopHeight(layoutPanel, 0.0, Unit.PCT, layout_panel_height, Unit.PX);

    LayoutPanel lp1 = new LayoutPanel();
    layoutPanel.add(lp1);
    layoutPanel.setWidgetLeftWidth(lp1, 0.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp1, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i1 = new Image("images/single_test_sprite.png");
    lp1.add(i1);
    lp1.setWidgetLeftWidth(i1, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp1.setWidgetTopHeight(i1, 0.0, Unit.PCT, 100.0, Unit.PCT);

    LayoutPanel lp2 = new LayoutPanel();
    layoutPanel.add(lp2);
    layoutPanel.setWidgetLeftWidth(lp2, 25.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp2, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i2 = new Image("images/single_test_sprite.png");
    lp2.add(i2);
    lp2.setWidgetLeftWidth(i2, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp2.setWidgetTopHeight(i2, 0.0, Unit.PCT, 100.0, Unit.PCT);

    LayoutPanel lp3 = new LayoutPanel();
    layoutPanel.add(lp3);
    layoutPanel.setWidgetLeftWidth(lp3, 50.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp3, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i3 = new Image("images/single_test_sprite.png");
    lp3.add(i3);
    lp3.setWidgetLeftWidth(i3, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp3.setWidgetTopHeight(i3, 0.0, Unit.PCT, 100.0, Unit.PCT);

    LayoutPanel lp4 = new LayoutPanel();
    layoutPanel.add(lp4);
    layoutPanel.setWidgetLeftWidth(lp4, 75.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp4, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i4 = new Image("images/single_test_sprite.png");
    lp4.add(i4);
    lp4.setWidgetLeftWidth(i4, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp4.setWidgetTopHeight(i4, 0.0, Unit.PCT, 100.0, Unit.PCT);
}
4

1 回答 1

1

这就是你需要的：

public void onModuleLoad() {
    RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();

    FlowPanel flowPanel = new FlowPanel();
    flowPanel.addStyleName("my_images_panel");
    rootLayoutPanel.add(flowPanel);

    Image i1 = new Image("images/single_test_sprite.png");
    Image i2 = new Image("images/single_test_sprite.png");
    Image i3 = new Image("images/single_test_sprite.png");
    Image i4 = new Image("images/single_test_sprite.png");

    flowPanel.add(i1);
    flowPanel.add(i2);
    flowPanel.add(i3);
    flowPanel.add(i4);
}

然后，在您的 CSS 文件中：

.my_images_panel img {
    float: left;
    width: 25%;
}

原始代码的问题（取自答案评论）：

在浏览器完成渲染之前，每个小部件的宽度和高度都为零。您需要使用Scheduler等到渲染完成，然后您可以使用getOffsetHeight()和getOffsetWidth()

于 2013-01-27T20:38:15.440 回答