在DockLayoutPanel中居中放置一个小部件

Question

我想在DockLayoutPanel中放置一个小部件（复合），我希望它位于 中心（垂直和水平方向）。不使用uibinder。怎么做？

Answer 1

请注意，在布局DockLayoutPanel时，“center”的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);