如何在GWT中让小部件填充垂直布局中的空间

编辑后包含以下建议：此代码块现在可以在屏幕截图中生成布局

我有一个UIBinder，我正在尝试做一个布局，以便内容窗格有一个主要部分，填充可用的宽度和高度，将页脚向下推到底部。我试过这个

<!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>
.eastPanel {
        background-color: #F60;
    }

    .westPanel {
        background-color: #EEE;
    }

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

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

    .centrePanel {
        background-color: #FFC;
    }

    .headerPanel {
        font-weight: bold;
        background-color: #37B6CE;
    }

    .mainPanel {
        font-weight: bold;
        background-color: #123;
    }

    .footerPanel {
        font-weight: bold;
        background-color: #206876;
    }
</ui:style>
<g:DockLayoutPanel unit='EM'>
    <g:north size='8'>
        <g:FlowPanel styleName="{style.northPanel}">
            <g:SimplePanel ui:field="northPanel" />
            <g:Label>This is the NORTH panel</g:Label>
        </g:FlowPanel>
    </g:north>
    <g:west size='13'>
        <g:FlowPanel styleName="{style.westPanel}">
            <g:SimplePanel ui:field="westPanel" />
            <g:Label>This is the WEST panel</g:Label>
        </g:FlowPanel>
    </g:west>
    <g:center>
        <g:LayoutPanel styleName="{style.centrePanel}"  ui:field="centrePanel">
            <g:layer top="0em" height="2em">
                <g:HTMLPanel  styleName="{style.headerPanel}"  ui:field="headerPanel">                  
                fixed header - usually a search box
                </g:HTMLPanel>
            </g:layer>
            <g:layer top="2em" bottom="2em">
                <g:HTMLPanel styleName="{style.mainPanel}"  ui:field="meainPanel">
Expanding main area
                </g:HTMLPanel>
            </g:layer>
            <g:layer bottom="0px" height="2em">
                <g:HTMLPanel  styleName="{style.footerPanel}" ui:field="footerPanel">

                fixed footer - maybe some copyright information
                </g:HTMLPanel>
            </g:layer>
        </g:LayoutPanel>
    </g:center>

    <g:east size='0'>
        <g:FlowPanel styleName="{style.eastPanel}">
            <g:Label>This is the EAST panel</g:Label>
        </g:FlowPanel>
    </g:east>
    <g:south size="0">
        <g:FlowPanel styleName="{style.southPanel}">
            <g:Label>This is the SOUTH panel</g:Label>
        </g:FlowPanel>
    </g:south>
</g:DockLayoutPanel>

.东板{
背景色：#F60；
}
westPanel先生{
背景色：#EEE；
}
northPanel先生{
背景色：#39F；
}
南方小组{
背景色：#99C；
}
.centrePanel{
背景色：#FFC；
}
海德尔帕内尔酒店{
字体大小：粗体；
背景色：#37B6CE；
}
.主面板{
字体大小：粗体；
背景色：#123；
}
.页脚面板{
字体大小：粗体；
背景色：#206876；
}
这是北面板
这是西面板
固定标题-通常为搜索框
扩大主要区域
固定页脚-可能是一些版权信息
这是东面板
这是南面板

`

这是旧代码，它不工作，因为它使用了一个表来尝试布局主要内容区域

<!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:wids="urn:import:org.limepepper.JavaCart.gwt.ui.client.widgets">
<ui:style>
    .mainPanel {
        background-color: #AFC;
        width: 100%;
        height: 100%;
    }
</ui:style>
<g:DockLayoutPanel unit='EM'>
    <g:north size='8'>
        <g:FlowPanel styleName="{style.northPanel}">
            <g:SimplePanel ui:field="northPanel" />
            <g:Label>This is the NORTH panel</g:Label>
        </g:FlowPanel>
    </g:north>
    <g:west size='13'>
        <g:FlowPanel styleName="{style.westPanel}">
            <g:SimplePanel ui:field="westPanel" />
            <g:Label>This is the WEST panel</g:Label>
        </g:FlowPanel>
    </g:west>
    <g:center>
        <g:HTMLPanel>
            <g:VerticalPanel>
                <g:HTMLPanel>
                    A heade panel
                </g:HTMLPanel>
                <g:HTMLPanel styleName="{style.mainPanel}">
                I want this panel to fill the space
                th
                rh
                tr
                h
                <br>
                </br>
                <br></br>
                <p></p>

                </g:HTMLPanel>
                <g:HTMLPanel>
                    Footer here
                </g:HTMLPanel>
            </g:VerticalPanel>

        </g:HTMLPanel>
    </g:center>
    <g:east size='0'>
        <g:FlowPanel styleName="{style.eastPanel}">
            <g:Label>This is the EAST panel</g:Label>
        </g:FlowPanel>
    </g:east>
    <g:south size="0">
        <g:FlowPanel styleName="{style.southPanel}">
            <g:Label>This is the SOUTH panel</g:Label>
        </g:FlowPanel>
    </g:south>
</g:DockLayoutPanel>

.主面板{
背景色：#AFC；
宽度：100%；
身高：100%；
}
这是北面板
这是西面板
头饰板
我想让这个面板填满这个空间
th
相对湿度
tr
H








页脚在这里
这是东面板
这是南面板

`

---

但这并没有填满空间，我可以通过编程实现，但我认为有一些GWT方法可以使用。

您可以嵌入另一个

DockLayoutPanel

作为外部

DockLayoutPanel

的

中心
小部件

i、 e:


...
我想让这个面板填满这个空间
标题板
页脚在这里
...

DockLayoutPanel
是一个专门的
LayoutPanel
允许您相对于其自身的边缘定位对象，例如，当您希望某个对象掉落到其容器底部时，这非常有用。如果您需要比
DockLayoutPanel
提供的内容更高级的东西，我建议您检查。
首先，您必须了解
VerticalPanel
是如何实现的，以及它是如何布局其子部件的。如果检查页面生成的HTML，您将立即看到它是作为
实现的

一旦你意识到这一点，你就可以马上看到，再多地使用
垂直面板
或
标签来实现你想要的效果也无济于事

实现
DockLayoutPanel
的
的正确方法是使用
布局面板
，并使用它的
…
子项定位页眉、页脚和内容
LayoutPanel
（很像
DockLayoutPanel
）使用绝对定位来定位其层，从而实现像素完美的放置

因此，它应该是这样的：

...
<g:center>
  <g:layer top="0px" height="YOUR HEADER HEIGHT">
    <g:HTMLPanel>
      A heade panel
    </g:HTMLPanel>
  </g:layer>
  <g:layer top="YOUR HEADER HEIGHT" bottom="YOUR FOOTER HEIGHT">
    <g:HTMLPanel styleName="{style.mainPanel}">
        I want this panel to fill the space
    </g:HTMLPanel>
  </g:layer>
  <g:layer bottom="0px" height="YOUR FOOTER HEIGHT">
    <g:HTMLPanel>
        Footer here
    </g:HTMLPanel>
  </g:layer>
</g:center>
...

。。。
头饰板
我想让这个面板填满这个空间
页脚在这里
...

为一个层在X轴或Y轴上指定2个坐标就足够了，LayoutPanel将使层内的小部件占用另一个轴上的所有可用空间。因此，如果您指定
top
和
height
值，例如，小部件将占用水平轴上的所有可用空间，并定位在
top
坐标处，并指定
height
。
我认为DocLayoutPanels只能附加到RootLayout，因此，如果没有侧面板，则可以展开。如果将嵌套的DocklayoutPanel放入HTMLPanel，则可能必须为HTMLPanel指定显式大小，因为它没有实现RequireResize和ProviderSize接口。因此，您直接将其放入parnet DockLayoutPanel的中心元素@Tom H:DocklayoutPanels与所有其他布局面板一样，可以连接到实现ProviderSize接口的任何面板。所以你可以嵌套任意数量的LayoutPanels@timeu哎呀，我不小心把DockLayoutPanel包在了HTMLPanel中。我已经编辑了我的答案，把它删掉了。@TomH我不知道你的意思。可以在LayoutPanels中嵌入LayoutPanels。限制是，如果要在应用程序中的任何位置使用布局面板，则整个应用程序的顶级容器必须是RootLayoutPanel（而不是RootPanel）。
...
<g:center>
  <g:layer top="0px" height="YOUR HEADER HEIGHT">
    <g:HTMLPanel>
      A heade panel
    </g:HTMLPanel>
  </g:layer>
  <g:layer top="YOUR HEADER HEIGHT" bottom="YOUR FOOTER HEIGHT">
    <g:HTMLPanel styleName="{style.mainPanel}">
        I want this panel to fill the space
    </g:HTMLPanel>
  </g:layer>
  <g:layer bottom="0px" height="YOUR FOOTER HEIGHT">
    <g:HTMLPanel>
        Footer here
    </g:HTMLPanel>
  </g:layer>
</g:center>
...