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

在DockLayoutPanel中居中控件

2 个答案: