在DockLayoutPanel中将小部件居中

Question

我试图放置一个小部件(复合)在一个DockLayoutPanel，我希望这是在中心(垂直以及水平)。不使用uibinder。该怎么做呢？

Answer 1

请注意，在布局DockLayoutPanel时，“中心”的UIBinder表示法并不是指小部件在面板中物理居中，而是指中心小部件占据了包含面板中的所有空间，而不是那些添加到边上的小部件所使用的空间。也就是说，在下面的布局中，小部件C是“中心”面板，即使它一直流向容器的右侧。

<g:DockLayoutPanel>
  <g:north><g:Label>A</g:Label></g:north>
  <g:west><g:Label>B</g:Label></g:north>
  <g:center><g:Label>C</g:Label></g:center>
  <g:south><g:Label>D</g:Label></g:south>
</g:DockLayoutPanel>

----------------
|      A       |
----------------
|B|    C       |
----------------
|      D       |
----------------

如果你要向DockLayoutPanel添加一个“居中”的子控件，它将会用完面板中所有的垂直和水平空间--它不会居中。

如果您想要使用绝对定位布局面板之一实现物理居中，我建议只使用LayoutPanel

LayoutPanel panel = new LayoutPanel();
MyWidget myWidget = new MyWidget();
panel.add(myWidget);

// Note that this assumes that both widgets are attached and have meaningful
// sizes - use the RequiresResize interface to get notification of when the
// positioning of myWidget needs change. Note also that if panel or myWidget
// have any decoration that modifies its offsetWidth (margin, border, padding)
// that will need to be taken into account to correctly center myWidget.
int top = panel.getOffsetHeight() - (myWidget.getOffsetHeight() / 2);
int left = panel.getOffsetWidth() - (myWidget.getOffsetWidth() / 2);
panel.setWidgetTopHeight(myWidget, top, Unit.PX, myWidget.getOffsetHeight(), Unit.PX);
panel.setWidgetLeftWidth(myWidget, left, Unit.PX, myWidget.getOffsetWidth(), Unit.px);

Answer 2

问题是，除非您假设窗口不会调整大小，否则不可能在没有WindowResizeHandler的LayoutPanel中解决这个问题，但是可以使用表轻松地解决这个问题。

DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
// some code here
Button button = new Button("center");
FlexTable wrapper = new FlexTable();
wrapper.setSize("100%", "100%");
wrapper.setWidget(0, 0, button);
wrapper.getFlexCellFormatter().setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_MIDDLE);
wrapper.getFlexCellFormatter().setHorizontalAlignment(0, 0, HasHorizontalAlignment.ALIGN_CENTER);
dockLayoutPanel.add(wrapper);