java - 使用 StackLayoutPanel 时出现问题

Question

我在使用 StackPanel 布局时遇到问题。这是行不通的。它只显示标题，但不显示标签。即使文档中的示例也不起作用:

http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/StackLayoutPanel.html

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.HasText;
import com.google.gwt.user.client.ui.Widget;

public class NavigationWidget extends Composite implements HasText {

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

    interface NavigationWidgetUiBinder extends
            UiBinder<Widget, NavigationWidget> {
    }

    public NavigationWidget() {
        initWidget(uiBinder.createAndBindUi(this));

    }

    public void setText(String text) {
    }

    public String getText() {
        return null;
    }

}

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

    <g:HTMLPanel>
        <g:StackLayoutPanel unit='PX'>

            <g:stack>
                <g:header size='30'>
                    People
                </g:header>
                <g:VerticalPanel>
                    <g:Label>People Item 1</g:Label>
                    <g:Label>People Item 2</g:Label>
                    <g:Label>People Item 3</g:Label>
                    <g:Label>People Item 4</g:Label>
                </g:VerticalPanel>
            </g:stack>

            <g:stack>
                <g:header size='30'>
                    Groups  
                </g:header>
                <g:VerticalPanel>
                    <g:Label>Group Item 1</g:Label>
                    <g:Label>Group Item 2</g:Label>
                    <g:Label>Group Item 3</g:Label>
                    <g:Label>Group Item 4</g:Label>
                </g:VerticalPanel>
            </g:stack>

            <g:stack>
                <g:header size='30'>
                    Settings
                </g:header>
                <g:VerticalPanel>
                    <g:Label>Item 5</g:Label>
                    <g:Label>Item 6</g:Label>
                    <g:Label>Item 7</g:Label>
                    <g:Label>Item 8</g:Label>
                </g:VerticalPanel>
            </g:stack>

        </g:StackLayoutPanel>

    </g:HTMLPanel>
</ui:UiBinder> 

Answer 1

全部LayoutPanel s 必须位于实现 ProvidesResize 的容器中，或者在代码中明确设置它们的大小。对您来说最简单的事情就是显式设置 StackLayoutPanel 的大小:只需添加 height="100%"给您<StackLayoutPanel>元素。

要获得更多控制权，请更改 Composite基类为 ResizeComposite并摆脱 <g:HTMLPanel> element - 只需将 StackLayoutPanel 设置为 ui.xml 文件的根元素即可。您还必须确保仅使用 NavigationWidget其他LayoutPanel s - 例如，您不会将其添加到 RootPanel.get() ，而是改为RootLayoutPanel.get()

有关详细信息，请参阅 http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html