如何使FlowPanel像垂直面板一样垂直流动？

Question

Google Suggets使用FlowPanel替代VerticalPanel，因为VerticalPanel在标准模式（http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html）下运行不正常。

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

不起作用

因此如何使FlowPanel流及其子垂直像VerticalPanel？

Answer 1

A FlowPanel呈现为html'< div>'，因此添加到它的任何内容都将根据其默认显示进行定位。

例如孩子小部件呈现为“< DIV>”像Label将被垂直放置，因为它们的默认行为是为块，但如果添加一个TextBox将呈现为“<输入>”，并将其缺省显示内嵌块。

所以处置在FlowPanel孩子的方式是设置属性display适当为每个孩子，与float财产，或任何其他的CSS的调整像flexbox播放。通常gwt设计者在ui-binder模板中设置样式。但如果你想通过代码你可以做到这一点：

// 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);