如何使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);