Gwt 如何使用UiBinder将StackLayoutPanel包装在装饰面板中？

在使用GWT成功地以编程方式构建了一个非平凡的UI之后，我正在尝试使用UiBinder重新创建相同的UI。我以前从未使用过任何类型的声明性UI系统，尽管我正在取得进展，并且可以看到这种方法的好处，但我无法让装饰面板正确包装StackLayoutPanel

StackNavigator.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class StackNavigator extends Composite {

    private static StackNavigatorUiBinder uiBinder = GWT.create(StackNavigatorUiBinder.class);

    interface StackNavigatorUiBinder extends UiBinder<Widget, StackNavigator> {}

    public StackNavigator() {
        initWidget(uiBinder.createAndBindUi(this));
    }

}  

import com.google.gwt.core.client.gwt；
导入com.google.gwt.uibinder.client.uibinder；
导入com.google.gwt.user.client.ui.Composite；
导入com.google.gwt.user.client.ui.Widget；
公共类StackNavigator扩展了复合{
私有静态StackNavigatorUiBinder uiBinder=GWT.create（StackNavigatorUiBinder.class）；
接口StackNavigatorUiBinder扩展UiBinder{}
公共StackNavigator（）{
initWidget（uiBinder.createAndBindUi（this））；
}
}  

StackNavigator.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:bandmates="urn:import:org.redboffin.bandmates.client">

    <ui:style>  
        .gwt-DecoratorPanel {
            width: 200px;
            height: 200px;
        }
        .gwt-DecoratorPanel .middleCenter {
            height: 100%;
            width: 100%;
        }
    </ui:style>

    <g:DecoratorPanel>
        <g:StackLayoutPanel unit='PX'>
            <g:stack>
                <g:header size='20'>Item One</g:header>
                <g:Label>TODO : Item One List Widget</g:Label>
            </g:stack>
            <g:stack>
                <g:header size='20'>Item Two</g:header>
                <g:Label>TODO : Item Two List Widget</g:Label>
            </g:stack>
             <g:stack>
                <g:header size='20'>Item Three</g:header>
                <g:Label>TODO : Item Three List Widget</g:Label>
            </g:stack>
        </g:StackLayoutPanel> 
    </g:DecoratorPanel>

</ui:UiBinder>

.gwt装饰板{
宽度：200px；
高度：200px；
}
.gwt装饰板米德尔中心{
身高：100%；
宽度：100%；
}
项目一
TODO:ItemOne列表小部件
项目二
TODO:第二项列表小部件
项目三
TODO:第三项列表小部件

StackLayoutPanel没有包装在DecororPanel中，而是按预期显示和运行。当包装在装饰面板中时，无法看到StackLayoutPanel。取而代之的是一个小小的蓝色圆圈，我猜是装饰板的角落图形紧紧地聚在一起。这就是为什么我尝试在decorpanel上设置宽度和高度，并按照GWTAPI中的建议将中间区域设置为100%

它没有达到我的预期，所以我一定是误解了什么。有人能帮忙吗

---

谢谢：-）

如果LayoutPanel没有包含在提供Resize（本质上是另一种类型的LayoutPanel）的内容中，那么它就不能正常工作。DecororPanel不是布局面板，也不打算包含布局面板

---

如果没有UiBinder，这个问题仍然会发生，这不是您如何声明它的问题。

如果LayoutPanels没有包含在提供Resize（本质上是另一种类型的LayoutPanel）的内容中，那么它就不能正常工作。DecororPanel不是布局面板，也不打算包含布局面板

如果没有UiBinder，这个问题仍然会发生，这不是如何声明它的问题。

试试这个类，它是

装饰面板

的子类

布局面板

的实现。因此，它与

LayoutPanel

框架兼容（与

decororpanel

不同），并且应该正确包装

StackLayoutPanel

（免责声明：代码免费提供，没有许可证限制。它托管在我的博客上，这是一个非营利博客。）

更新：

作为解释，这个

DecoratorLayoutPanel

类模仿GWT的

DecoratorPanel

，将9个小部件添加到自身中，并将它们排列到一个3x3的网格中。最外层的8个小部件是使用

decororpanel

圆角的CSS样式，默认大小为5px。“一个中心”小部件是可扩展的，用于保存

布局面板

内容

好处是，您可以获得与

DecoratorPanel

相同的圆角效果，同时可以作为子类添加任何

LayoutPanel

，并自动调整其大小以适应需要。

试试这个类，它是

DecoratorPanel

子类的实现。因此，它与

LayoutPanel

框架兼容（与

decororpanel

不同），并且应该正确包装

StackLayoutPanel

（免责声明：代码免费提供，没有许可证限制。它托管在我的博客上，这是一个非营利博客。）

更新：

作为解释，这个

DecoratorLayoutPanel

类模仿GWT的

DecoratorPanel

，将9个小部件添加到自身中，并将它们排列到一个3x3的网格中。最外层的8个小部件是使用

decororpanel

圆角的CSS样式，默认大小为5px。“一个中心”小部件是可扩展的，用于保存

布局面板

内容

---

这样做的好处是，您可以获得与

装饰面板

相同的圆角效果，同时还可以在孩提时代添加任何

布局面板

，并使其自动调整大小以适应需要。

感谢您为我澄清这一点Matt感谢您为我澄清Matt