Wie FlowPanel seine Kinder vertikal wie VerticalPanel fließen lassen?

Question

Google-Vorschläge verwenden FlowPanel anstelle von VerticalPanel, da VerticalPanel im Standardmodus nicht gut funktioniert (http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html).

myflowPanel.getElement().getStyle().setFloat(Float.NONE); 

funktioniert nicht

So wie Flow fließen seine Kinder vertikal wie VerticalPanel zu machen?

Answer 1

Eine FlowPanel wird als html '< div>' gerendert, so dass alles, was hinzugefügt wird, abhängig von der Standardanzeige positioniert wird.

Zum Beispiel Kinder-Widgets wie ein gerenderte ‚< div>‘ wie Label vertikal positioniert werden, weil ihr Standardverhalten als ein Block ist, aber wenn Sie ein TextBox hinzufügen wird es als ‚< input>‘ gemacht werden, dessen Standard Anzeige ist Inline-Block.

So ist die Art, wie Kinder in einem FlowPanel setzt die Eigenschaft display angemessen für jede Kinder zu verfügen, mit der float Eigenschaft spielen, oder jedem anderen css zwicken wie flexbox. Normalerweise machen gwt-Designer diese Einstellung in ui-binder-Vorlagen. Aber wenn Sie mit dem Code tun möchten, können Sie dies tun:

// Example of a flow panel with all elements disposed in vertical 
    FlowPanel verticalFlowPanel = new FlowPanel(); 
    TextBox textBox = new TextBox(); 
    Label label = new Label("Foo"); 
    textBox.getElement().getStyle().setDisplay(Display.BLOCK); 
    verticalFlowPanel.add(textBox); 
    verticalFlowPanel.add(label); 
    RootPanel.get().add(verticalFlowPanel); 

    // Example of a flow panel with all elements disposed in horizontal 
    FlowPanel horizontalFlowPanel = new FlowPanel(); 
    TextBox textBox2 = new TextBox(); 
    Label label2 = new Label("Foo"); 
    label2.getElement().getStyle().setDisplay(Display.INLINE_BLOCK); 
    horizontalFlowPanel.add(textBox2); 
    horizontalFlowPanel.add(label2); 
    RootPanel.get().add(horizontalFlowPanel);