如何使FlowPanel像VerticalPanel一样垂直流动它的子节点？

Question

Google建议使用FlowPanel替换VerticalPanel，因为VerticalPanel在标准模式下无效（http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html）。

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

不起作用

那么如何使FlowPanel像VerticalPanel一样垂直流动它的孩子？

Answer 1

FlowPanel呈现为html'＆lt; div＆gt;'，因此添加到其中的所有内容都将根据其默认显示进行定位。

例如，子窗口小部件呈现为'＆lt; div＆gt;'像Label一样，因为它们的默认行为是一个块，所以TextBox会被垂直定位，但如果你添加一个FlowPanel，它将被渲染为'＆lt; input＆gt;'其默认显示为内联块。

因此，在display中处置子项的方法是为每个孩子设置属性float，使用 // 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); 属性或任何其他css调整{{3} }。通常gwt设计师在ui-binder模板中执行此设置样式。但是如果你想通过代码来做，你可以这样做：

{{1}}

Answer 2

对孩子们使用display:block;然后就可以了。 在将VerticalPanel转换为FlowPanel之后，我发现我的应用程序运行得更快。