Question

我正在尝试使用SplitPanelLayout提出布局。我基本上在这里复制了这段代码并稍微改编了一下：

http://www.giantflyingsaucer.com/blog/?p=2324

我的版本

<!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: red;
    }

    .westPanel {
        background-color: green;
    }

    .northPanel {
        background-color: blue;
    }

    .southPanel {
        background-color: yellow;
    }

    .centerPanel {
        background-color: orange;
    }
    </ui:style>
    <g:SplitLayoutPanel>
        <g:north size="60" unit="EM">
            <g:FlowPanel styleName="{style.northPanel}">
                <g:Label>This is the NORTH panel</g:Label>
            </g:FlowPanel>
        </g:north>
        <g:west size="200" unit="EM">
            <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:east size="200" unit="EM">
            <g:FlowPanel styleName="{style.eastPanel}">
                <g:Label>This is the EAST panel</g:Label>
            </g:FlowPanel>
        </g:east>
        <g:south size="60" unit="EM">
            <g:FlowPanel styleName="{style.southPanel}">
                <g:Label>This is the SOUTH panel</g:Label>
            </g:FlowPanel>
        </g:south>
    </g:SplitLayoutPanel>
</ui:UiBinder>

问题在于片段彼此堆叠在一起。我该如何解决这个问题？是否有关于某处uibinder-tag的概述？

修改

<g:SplitLayoutPanel>
        <g:north size="60" unit="EM">
            <g:FlowPanel styleName="{style.northPanel}">
                <g:Label>This is the NORTH panel</g:Label>
            </g:FlowPanel>
        </g:north>
        <g:west size="3200" unit="PX">
            <g:FlowPanel styleName="{style.westPanel}">
                <g:Label>This is the WEST panel</g:Label>
            </g:FlowPanel>
        </g:west>
        <g:center size="60" unit="EM">
            <g:FlowPanel styleName="{style.centerPanel}">
                <g:Label>This is the CENTER panel</g:Label>
            </g:FlowPanel>
        </g:center>
        <g:east size="3200" unit="PX">
            <g:FlowPanel styleName="{style.eastPanel}">
                <g:Label>This is the EAST panel</g:Label>
            </g:FlowPanel>
        </g:east>
        <g:south size="60" unit="EM">
            <g:FlowPanel styleName="{style.southPanel}">
                <g:Label>This is the SOUTH panel</g:Label>
            </g:FlowPanel>
        </g:south>
    </g:SplitLayoutPanel>

Answer 1

你的EM是什么？如果它是标准的16px，则将东区和西区分别设置为3200像素宽。尝试为您的尺寸使用像素（std::thread）或百分比（PX）。

gwt：使用UIBinder创建SplitLayoutPanel

1 个答案: