1

我正在尝试使用 DockLayoutPanel 布局我的页面，并且我正在使用 gwt-platfrom 插件来创建演示者和视图对。当我在 view.ui.xml 中添加以下代码时，我只能看到标题部分而其余部分不可见，我的方法有什么问题？

    <ui:style>        
    .eastPanel {
        background-color: #F60;
    }
    .westPanel {
        background-color: #EEE;
    }
    .northPanel {
        background-color: #39F;
    }
    .southPanel {
        background-color: #99C;
    }
    .centerPanel {
        background-color: #FFC;
    }       
</ui:style>
 <g:DockLayoutPanel unit='EM'>
   <g:north size='5'>
     <g:FlowPanel styleName="{style.northPanel}">
       <g:Label>This is the NORTH panel</g:Label>
     </g:FlowPanel>
   </g:north>
   <g:west size='15'>
     <g:FlowPanel styleName="{style.westPanel}">
       <g:Label>This is the WEST panel</g:Label>
     </g:FlowPanel>
   </g:west>
   <g:center>
     <g:FlowPanel styleName="{style.centerPanel}">
       <g:Label>This is the CENTER panel</g:Label>
     </g:FlowPanel>
   </g:center>
 </g:DockLayoutPanel>

谢谢，

4

5 回答 5

1

发现页面不显示的原因，写的时候有两个错误，1.只用一个Unit(UM/PX/Percent)来构造DockLayoutPanel的各个面 2.由于我用的是gwt平台，所以需要使用 RevealRootLayoutContentEvent.fire(this,this); 在我的演示者的revealInParent() 而不是 RevealRootContentEvent.fire(this,this);

于 2012-11-24T10:38:08.003 回答
0

如果您没有在任何地方更改 em，它的默认大小为 16px。因此，192 em 很容易意味着 3,072 像素。我不知道当区域大于屏幕时 DockLayoutPanel 的行为如何，但我很确定它看起来并不漂亮。

另一种可能性是您需要设置 DockLayoutPanel 的高度，如果它没有从父小部件获取它。

于 2012-11-19T22:52:35.670 回答
0

我以前遇到过这个问题。只需设置中心面板的高度。一切都会好起来的。

于 2012-11-21T12:58:40.690 回答
0

您需要添加DockLayoutPanel到LayoutPanel.

LayoutPanel panel = new LayoutPanel();
panel.add(Your DockLayoutPanel);
于 2014-07-15T12:35:10.537 回答
0

我解决了这个问题。我正在使用 GWTP：

<ui:style>
.eastPanel {
    background-color: #F60;
}

.westPanel {
    background-color: #EEE;
}

.northPanel {
    background-color: #39F;
}

.southPanel {
    background-color: #99C;
}

.centerPanel {
    background-color: #FFC;
}

header {
    background: red;
}
</ui:style>


<g:RootLayoutPanel>
    <g:layer>
        <g:DockLayoutPanel >
            <g:north size='60'>
                <g:FlowPanel styleName="{style.northPanel}">
                    <g:Label>This is the WEST panel</g:Label>
                </g:FlowPanel>
            </g:north>
            <g:west size='300'>
                <g:FlowPanel styleName="{style.westPanel}">
                    <g:Label>This is the WEST panel</g:Label>
                </g:FlowPanel>
            </g:west>
            <g:center>
                <g:FlowPanel styleName="{style.centerPanel}">
                    <g:Label>This is the CENTER panel</g:Label>
                </g:FlowPanel>
            </g:center>
        </g:DockLayoutPanel>
    </g:layer>
</g:RootLayoutPanel>

于 2015-07-02T08:40:13.120 回答