Jak sprawić, aby FlowPanel przesyłał swoje dzieci w pionie jak VerticalPanel?

Question

Sugestie Google używają FlowPanel zamiast VerticalPanel, ponieważ VerticalPanel nie działa dobrze w trybie standardów (http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html).

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

nie działa

Tak Jak FlowPanel płynąć jej dzieci w pionie jak VerticalPanel?

Answer 1

A FlowPanel jest renderowany jako html '< div>', więc wszystko dodane do niego zostanie umieszczone w zależności od jego domyślnego wyświetlania.

Na przykład dzieci Widgety renderowane jako „< div>” jak Label zostanie umieszczony pionowo, ponieważ ich zachowanie domyślne jest jako blok, ale jeśli dodać TextBox zostanie wygenerowana jako „< input>”, którego domyślna wyświetlanie to blok inline.

Więc droga do dysponowania dzieci w A FlowPanel jest ustawienie właściwości display odpowiednio dla każdego z dzieci, grając z właściwością float lub jakiegokolwiek innego css uszczypnąć jak flexbox. Zazwyczaj projektanci gwt wykonują te style ustawień w szablonach ui-binder. Ale jeśli chcesz zrobić za pomocą kodu można to zrobić:

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