FlowPanel이 VerticalPanel처럼 세로로 자식을 흐르게 만드는 방법은 무엇입니까?

Question

Google 수트는 VerticalPanel이 표준 모드 (http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html)에서 제대로 작동하지 않으므로 VerticalPanel 대신 FlowPanel을 사용합니다.

는

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

는

그래서 어떻게 FlowPanel이 VerticalPanel처럼 수직으로 어린이 흐름을 만들기 위해 작동하지 않는 이유는 무엇입니까?

Answer 1

FlowPanel은 html '< div>'로 렌더링되므로 추가 된 항목은 기본 표시에 따라 배치됩니다. 인스턴스 어린이를위한

는 다음과 같이 렌더링 위젯에 '< DIV>'Label이 기본 동작은 블록으로하기 때문에 수직으로 위치 할 것이다, 그러나 당신이 TextBox를 추가하는 경우가 그 기본에 '< 입력>'로 렌더링 될 것 같은 디스플레이가 인라인 블록입니다.

그래서 FlowPanel 어린이를 처리 할 수있는 방법은 float 속성 또는 flexbox 같은 다른 CSS를 팅겨와 함께 연주, 각각의 아이들을 위해 적절하게 재산 display을 설정하는 것입니다. 일반적으로 gwt 디자이너는 UI 바인더 템플릿에서이 설정 스타일을 수행합니다. 당신이 코드에 의해 수행하려는 경우 그러나 당신은이 작업을 수행 할 수 있습니다

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