GWT Grid 未与 uiBinder 一起出现

Question

我在一个使用 uiBuilder 初始化的项目中有一个 2 x 2 网格，但是，该网格从未出现在页面上。标题和副标题看起来不错。我已经为此苦苦挣扎了好几天。非常感谢任何建议（这是我的第一个 gwt 项目）。谢谢你！

有 3 个文件：Test.java、TaskSelect.java 和 TaskSelect.ui.xml

*Test.java***

package org.client;  
    import com.google.gwt.core.client.*;  
    import com.google.gwt.user.client.ui.*;

    public class Test extends DeckPanel implements EntryPoint 
    {

    public void onModuleLoad()
    {
        Test t = new Test();
    TaskSelect taskselect = new TaskSelect();
    t.add(taskselect);
    t.showWidget(0);
        RootPanel.get().clear();
        RootPanel.get().add(t);
    }
}

* TaskSelect.java**

package org.client;

    import com.google.gwt.user.client.ui.*;
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.uibinder.client.*;

    public class TaskSelect extends Composite {
    interface Binder extends UiBinder<Widget, TaskSelect> { }
    private static final Binder binder = GWT.create(Binder.class);
    @UiField Button buttonA;
    @UiField Button buttonB;
    @UiField Button buttonC;
    @UiField Button buttonD;
    @UiField Grid mygrid;

    public TaskSelect() {
        initWidget(binder.createAndBindUi(this));
    }
}

*TaskSelect.ui.xml**

<ui:UiBinder
  xmlns:ui='urn:ui:com.google.gwt.uibinder'
  xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:style>
    .bigbutton {
    font-size: 24pt;
    width: 300px;
    height: 95px;
    }

    .h1 {
    font-size: 36pt;
    font-weight: bold;
    text-align: center;
    margin: auto;
    }

    .subheading {
    font-size: 24pt;
    text-align: center;
    margin: auto;
    }

    .panel {
    margin: auto;
    }
    </ui:style>
      <g:DockLayoutPanel unit='EM' addStyleNames='{style.panel}'>
    <g:north size='10'>
      <g:VerticalPanel addStyleNames='{style.panel}'>
        <g:Label addStyleNames='{style.h1}'>Title is here</g:Label>
        <g:Label addStyleNames='{style.subheading}'>Sub heading</g:Label>
      </g:VerticalPanel>
    </g:north>
    <g:center size='10'>
      <g:Grid ui:field='mygrid' addStyleNames='{style.panel}' cellSpacing='50'>
        <g:row>
          <g:customCell>
            <g:Button ui:field='buttonA'>Button A</g:Button>
          </g:customCell>
          <g:customCell>
            <g:Button addStyleNames='{style.bigbutton}' text='Button B' ui:field='buttonB' />
          </g:customCell>
        </g:row>
        <g:row>
          <g:customCell>
            <g:Button addStyleNames='{style.bigbutton}' text='Button C' ui:field='buttonC' />
          </g:customCell>
          <g:customCell>
            <g:Button addStyleNames='{style.bigbutton}' text='Button D' ui:field='buttonD' />
          </g:customCell>
        </g:row>
      </g:Grid>
    </g:center>
  </g:DockLayoutPanel>
</ui:UiBinder>

Answer 1

网格的高度/宽度由 DockLayoutPanel 设置，因为 DockLayoutPanel 自动缩放以填充整个区域。检查布局小部件的文档，看看您是否需要 DockLayoutPanel 或 DockPanel。

无论如何，将其添加到 .panel 样式中应该可以使其工作：

height:100%;

是的，这听起来不合逻辑...

-edit-

并使用 RootLayoutPanel.get( ) 而不是 RootPanel.get()。这是因为您使用了 LayoutPanel。