GWT：動態地將Horizo​​ntalPanel轉換為VerticalPanel

Question

如何以編程方式將Horizo​​ntalPanel轉換為VerticalPanel？ 可能嗎？

從：

<g:HorizontalPanel ui:field="panel">

</g:HorizontalPanel>

至：

<g:VerticalPanel ui:field="panel">

</g:VerticalPanel>

Answer 1

下面的代碼片段會起作用嗎？ （不要使用GWT環境設置進行測試）：

public SomeClass extends Composite {

@UiField
CellPanel panel;

    public SomeClass() {    
        panel = new VerticalPanel;
    }
}

甚至更好，為什么不在ui.xml中使用

<g:CellPanel ui:field="panel">

</g:CellPanel >

並在Java代碼中做任何您想做的事情（因為Horizo​​ntalPanel和VerticalPanel是CellPanel的子類）？

Answer 2

不，不可能以您想象的方式。 將小部件填充到DOM樹中后，您將無法動態地重新發布它們。

最糟糕的方法

1. 復制垂直面板子窗口小部件的列表
2. 從DOM樹中刪除垂直面板
3. 改為插入水平面板
4. 將垂直面板的所有子節點添加到水平面板

更好的方法

如果您可以放棄對IE6，IE7的支持，那么您實際可以做的是在display: flex;使用<g:FlowPanel> display: flex; 這是給你的一個例子：

<ui:style>
.flexPanel{
  display: flex;
}
.vertical{
  flex-direction: column;
}
</ui:style>
<!-- then in your uibinder-->
<g:FlowPanel ui:field="panel" addStyleName="{style.flexPanel}"> 
<!-- will act as horizontal panel by default-->
</g:FlowPanel>

然后，只要您想更改方向，都可以執行以下操作：

panel.addStyleName(style.vertical());
//or if you want it back to horizontal
panel.removeStyleName(style.vertical());

為了簡單起見，我沒有在flex-properties中添加css前綴，如果您不僅針對現代瀏覽器，還應為這兩個類添加前綴：

.flexPanel{
 display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.vertical{
-webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

是的，請仔細閱讀CSS。 不要使用那些舊的表格布局，現在是2016年。 查看這篇簡單的文章，它可以幫助我們的團隊快速過渡： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/