gwt - 使用 RootLayoutPanel 和 DockPanel 时如何设置 5% 的边距

Question

我一直在研究 GWT 2，我发现很难获得我想要的基本页面布局。基本上，我使用的是 DocLayoutPanel，我在其中添加了北(页眉)、南(页脚)、西(导航)和内容区域。我希望文档面板占据页面的 90% 并居中。这将提供不错的 5% 利润率。但是，由于 GWT 使用顶部、左侧、右侧和底部样式，因此使用我的常规策略(边距:自动)居中不起作用。

我怎样才能以 GWT 的方式完成我想要的事情？

Answer 1

通过阅读您的问题，您并不清楚您在问什么，但我认为您希望整个 Dock 面板有 5% 的边距？

Gwt 2.0 中所有新的 *LayoutPanels 使用 css 绝对定位，这就是您看到顶部/左侧/右侧/底部样式的原因。这就是为什么您的 margin:auto 策略不起作用。

DockLayoutPanel 实际上只是用于布局。我建议调整您放置在 DockLayoutPanel 中的小部件的边距，以达到您想要的效果。

我自己试了一下，我接近了一个答案，但它并不完美。我将标签放入每个 DockPanel 中，边距为 10 像素，但右边框和底部边框不显示该边距。

<!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">

<ui:style>.label {
        background: #666;
        color: #fff;
        font-size: 14pt;
        padding: 5px;
        margin: 10px;
        height: 100%;
        width: 100%;
    }</ui:style>

<g:DockLayoutPanel unit='PCT'> 
        <g:north size='10'> 
                <g:Label addStyleNames="{style.label}">Top</g:Label> 
        </g:north> 
        <g:center> 
                <g:Label addStyleNames="{style.label}">Body</g:Label> 
        </g:center> 
        <g:west size='10'> 
                <g:Label addStyleNames="{style.label}">West</g:Label> 
        </g:west> 
        <g:south size="10"> 
                <g:Label addStyleNames="{style.label}">South</g:Label> 
        </g:south> 
</g:DockLayoutPanel>