Question

如何以编程方式将HorizontalPanel转换为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代码中执行任何操作（因为HorizontalPanel和VerticalPanel是CellPanel的子类）？

Answer 2

不可能以你想象的方式实现它。一旦窗口小部件填充到DOM树中，您就无法动态地重新构建它们一些建议的解决方法

最糟糕的方法

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

更好的方法

如果您可以放弃IE6，IE7支持，您实际可以做的是<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());

为了简单起见，我没有将css前缀添加到flex-properties中，如果您不仅仅针对现代浏览器，请在这两个类之前加上前缀：

.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/

GWT：将HorizontalPanel动态转换为VerticalPAnel

2 个答案:

GWT：将Horizo​​ntalPanel动态转换为VerticalPAnel

2 个答案:

GWT：将HorizontalPanel动态转换为VerticalPAnel