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

Question

由于VerticalPanel在标准模式下无法正常工作(http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html),因此Google建议使用FlowPanel替换VerticalPanel .

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

不起作用

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

Answer 1

A FlowPanel呈现为html'<div>',因此添加到它的任何内容都将根据其默认显示进行定位.

例如,呈现为'<div>'的子窗口小部件Label将被垂直定位,因为它们的默认行为是块,但是如果添加TextBox它,它将呈现为'<input>',其默认显示为inline-block.

因此,将孩子安置在a中的方法FlowPanel是display为每个孩子设置适当的float属性,使用属性或任何其他CSS调整,如flexbox.通常gwt设计师在ui-binder模板中执行此设置样式.但是如果你想通过代码来做,你可以这样做:

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