Question

我正在尝试创建一个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);
}

Answer 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()

GWT - 相对于屏幕宽度设置面板高度？

1 个答案: