0

ユーザーの画面の幅にまたがるlayoutPanelを作成しようとしています。これには4つの画像が含まれます。これらの画像は、画面の高さに関係なく、幅に比例してスケーリングする必要があります。そのような：

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

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

1 つのパネルを画面の幅に等しく設定して、これを実行しようとしています。それはうまくいくようです。しかし、幅に対して高さを設定しようとすると、高さは常にゼロのままです。

私はEclipseプラグインを介してGWTを使用しています。任意の時点でいくつかの改行を使用して変数を取得しようとしましたが、改行で何かを実行できないようです (run as...、debug as...、コンパイル中)。ただし、デバッグが機能しないことは別の問題です。

以下は私が使用しているコードです。誰かが私が間違っていることを見ることができれば、私に知らせてください。どうもありがとう！

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 に答える