gwt - 如何使FlowPanel像VerticalPanel一样垂直地使其子级流动？

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

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

不起作用

那么，如何使FlowPanel像VerticalPanel一样垂直地流动其子级呢？

最佳答案

FlowPanel呈现为html'

'，因此添加到其中的任何内容都将根据其默认显示位置进行放置。

例如，呈现为像Label这样的'

'的子代小部件将被垂直放置，因为它们的默认行为是作为一个块，但是如果添加TextBox它将被呈现为默认值的''显示是内联块。

因此，将子级放置在FlowPanel中的方法是为每个子级设置适当的属性display，并使用float属性或其他任何类似flexbox的css调整。通常，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);