5

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

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

不工作

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

4

2 回答 2

11

AFlowPanel呈现为 html '<div>'，因此添加到其中的任何内容都将根据其默认显示进行定位。

例如，呈现为 '<div>' 的子小部件Label将垂直定位，因为它们的默认行为是作为一个块，但如果添加 aTextBox它将被呈现为一个默认显示为 inline-block 的 '<input>'。

因此，在 a 中处理子项的方法是为每个子项FlowPanel设置适当的属性，使用该属性或任何其他 css 调整，如flexbox。通常，gwt 设计人员在 ui-binder 模板中执行此设置样式。但是如果你想通过代码来做，你可以这样做：displayfloat

  // 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);
于 2013-10-09T06:59:29.963 回答
0

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

于 2013-10-09T07:04:55.790 回答