gwt - 如何让 FlowPanel 像 VerticalPanel 一样垂直流动它的 child ？

Question

Google 建议使用 FlowPanel 代替 VerticalPanel，因为 VerticalPanel 在标准模式 ( http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html ) 下不能很好地工作。

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

不起作用

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

Answer 1

A FlowPanel呈现为 html '

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

例如，子小部件呈现为“

”，如 Label将被垂直定位，因为它们的默认行为是作为一个块，但如果你添加一个 TextBox它将被呈现为一个“ ”，其默认显示为 inline-block。

所以在 FlowPanel中处置 child 的方法正在设置属性 display适合每个 child ，一起玩 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); 

关于gwt - 如何让 FlowPanel 像 VerticalPanel 一样垂直流动它的 child ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19264238/

上一篇：r - 如何在多年前拟合的逻辑回归中使用 R 中的预测函数？

下一篇：meteor - Meteor.com meteor 托管什么时候才能足够可靠以供生产使用？