Question

GWT文档recommends使用FlowPanel（float：在子节点上设置左侧）作为HorizontalPanel到布局组件的替代。但是怎么做呢？

Answer 1

在文档中说得对：

并使用float：left;其子项的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>

或者您可以使用此HorizontalPanel类替换所有HorizontalFlowPanel引用：

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

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

2 个答案: