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