Java GWT：将水平面板动态转换为垂直面板

如何以编程方式将水平面板转换为垂直面板？可能吗

发件人：

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

</g:HorizontalPanel>

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

</g:VerticalPanel>

至：

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

</g:HorizontalPanel>

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

</g:VerticalPanel>

---

下面的代码片段行得通吗？（没有GWT环境设置来测试它）：

或者更好，为什么不在ui.xml中使用呢

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

</g:CellPanel >

---

在java代码中做任何你想做的事情（因为HorizontalPanel和VerticalPanel都是CellPanel的子类）？

下面的代码片段可以工作吗？（没有GWT环境设置来测试它）：

或者更好，为什么不在ui.xml中使用呢

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

</g:CellPanel >

---

用java代码做任何你想做的事情（因为HorizontalPanel和VerticalPanel是CellPanel的子类）？

不，这不可能以你想象的方式实现。 一旦小部件填充到DOM树中，就不能动态地重新转换它们 建议的一些变通方法

可能的最差方法

复制垂直面板子窗口小部件的列表

从DOM树中删除垂直面板

改为插入水平面板

将垂直面板的所有子节点添加到水平面板

更好的方法

如果您可以放弃对IE6、IE7的支持，那么您实际上可以使用

和

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>

为了简单起见，我没有在flex属性中添加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;
}

是的，好好看看。不要使用那些旧的表格布局，现在是2016年。查看这篇简单的文章，它帮助我们的团队快速过渡：
不，以你想象的方式这是不可能的。
一旦小部件填充到DOM树中，就不能动态地重新转换它们
建议的一些变通方法

可能的最差方法

复制垂直面板子窗口小部件的列表
从DOM树中删除垂直面板
改为插入水平面板
将垂直面板的所有子节点添加到水平面板
更好的方法

如果您可以放弃对IE6、IE7的支持，那么您实际上可以使用
和
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>

为了简单起见，我没有在flex属性中添加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;
}

是的，好好看看。不要使用那些旧的表格布局，现在是2016年。查看这篇简单的文章，它帮助我们的团队快速过渡：
您的代码无法工作。第一个组合没有初始化，因此在构造函数中应该有initWidget（uiBinder.createAndBindUi（this）），然后将填充-DOM，因此要延迟CellPanel的创建，您需要将注释更改一点'@UiField（提供=true）'并将面板创建置于initWidgetMy代码之前。我的代码不完整，当然不会按原样运行。我认为这是很明显的。或多或少，我想为原始海报提供一些提示。你的代码不起作用。第一个组合没有初始化，因此在构造函数中应该有initWidget（uiBinder.createAndBindUi（this）），然后将填充-DOM，因此要延迟CellPanel的创建，您需要将注释更改一点'@UiField（提供=true）'并将面板创建置于initWidgetMy代码之前。我的代码不完整，当然不会按原样运行。我认为这是很明显的。或多或少，我想为原始海报提供一些提示。