GWT - 如何在FlowPanel中水平布局组件？

Question

GWT文档recommends使用FlowPanel（float：设置在其子级上的左侧）作为Horizo​​ntalPanel到布局组件的替代品。但如何做到这一点？

Answer 1

说，在文档这样的权利：

，并使用浮动：左; CSS属性的子项。

如何设置GWT部件的样式：

widget.getElement().getStyle().setProperty("float", "left"); 

Answer 2

为了避免使用HorizontalPanel我用下面的代码在可能：

FlowPanel panel = new FlowPanel() { 
    @Override 
    public void add(Widget child) { 
     super.add(child); 
     child.getElement().getStyle().setDisplay(Display.INLINE_BLOCK); 
    } 
}; 

，并使用UiBinder的我做这样的事情：

<ui:UiBinder ...> 
    <ui:style> 
     .vertical > * { 
      display: inline-block; 
     } 
    </ui:style> 

    <g:FlowPanel styleName="{style.vertical}"> 
     ... 
    </g:FlowPanel> 
</ui:UiBinder> 

或者你可以通过这个HorizontalFlowPanel类替代所有HorizontalPanel引用：

public class HorizontalFlowPanel extends FlowPanel { 
    private static final String BASIC_CLASS_NAME = "___" + Math.abs(Random.nextInt()); 
    private static final String HORIZONTAL_CLASS_NAME = BASIC_CLASS_NAME + "_H_"; 
    private static final String VERTICAL_CLASS_NAME = BASIC_CLASS_NAME + "_V_"; 

    static { 
     newCssClass(HORIZONTAL_CLASS_NAME + " > *", "display: inline-block; vertical-align: top;"); 
     newCssClass(VERTICAL_CLASS_NAME + " > *", "display: block;"); 
    } 

    private static int count = 0; 

    private final String myClassName = BASIC_CLASS_NAME + count++; 

    public HorizontalFlowPanel() { 
     super(); 
     setStylePrimaryName(HORIZONTAL_CLASS_NAME + " " + myClassName); 
    } 

    public void setSpacing(int spacing) { 
     newCssClass(myClassName + " > *", "margin-bottom: " + spacing + "px; margin-right: " + spacing + "px;"); 
    } 

    public void setPadding(int padding) { 
     newCssClass(myClassName, "padding: " + padding + "px;"); 
    } 

    public static void newCssClass(String className, String content) { 
     StringBuilder builder = new StringBuilder(); 
     builder.append("." + className + " { " + content + " }\n"); 

     Element style = DOM.createElement("style"); 
     style.setAttribute("type", "text/css"); 
     style.setInnerHTML(builder.toString()); 

     Document.get().getHead().appendChild(style); 
    } 
}