Question

我正在尝试创建一个包含三个部分的屏幕布局，其中前两个是固定大小，最后一个应该展开以填充屏幕上的剩余空间。我正在使用VerticalLayoutContainer（VLC），它包含三个HorizontalLayoutContainer（HLC）。我试图使用VerticalLayoutData定义来控制HLC的大小。我不想为HLC指定固定高度，因为我不知道它们在运行时将包含什么。我遇到的问题是HLC都被放置在VLC中的位置0,0，因此彼此重叠。这就是它的样子（这是一团糟！）：

HLCs in a VLC

这是我正在使用的UiBinder代码：

<!DOCTYPE ui:UiBinder SYSTEM 'http://dl.google.com/gwt/DTD/xhtml.ent'>
<ui:UiBinder
  xmlns:gwt='urn:import:com.google.gwt.user.client.ui'
  xmlns:gxtbutton='urn:import:com.sencha.gxt.widget.core.client.button'
  xmlns:gxtcontainer='urn:import:com.sencha.gxt.widget.core.client.container'
  xmlns:gxtform='urn:import:com.sencha.gxt.widget.core.client.form'
  xmlns:gxt='urn:import:com.sencha.gxt.widget.core.client'
  xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <!-- VerticalLayoutData declarations ========================================================= -->
  <ui:with
    type='com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData'
    field='fillRemainingLayoutData'>
    <ui:attributes height='1' width='1'/>
  </ui:with>
  <ui:with
    type='com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData'
    field='sizeToContentsLayoutData'>
    <ui:attributes height='-1' width='1'/>
  </ui:with>
  <!-- ========================================================================================= -->
  <gxtcontainer:Viewport>
    <gxtcontainer:VerticalLayoutContainer>
      <gxtcontainer:child layoutData='{sizeToContentsLayoutData}'>
        <gxtcontainer:HorizontalLayoutContainer>
          <gxtcontainer:VerticalLayoutContainer>
            <gxtform:FieldLabel text='Person.FirstName'/>
          </gxtcontainer:VerticalLayoutContainer>
          <gxtcontainer:VerticalLayoutContainer>
            <gxtform:FieldLabel text='Person.EmailAddress'/>
          </gxtcontainer:VerticalLayoutContainer>
        </gxtcontainer:HorizontalLayoutContainer>
      </gxtcontainer:child>
      <gxtcontainer:child layoutData='{sizeToContentsLayoutData}'>
        <gxtcontainer:HorizontalLayoutContainer>
          <gxtbutton:TextButton text='Save Changes'/>
          <gxtbutton:TextButton text='Undo Changes'/>
        </gxtcontainer:HorizontalLayoutContainer>
      </gxtcontainer:child>
      <gxtcontainer:child layoutData='{fillRemainingLayoutData}'>
        <gxtcontainer:HorizontalLayoutContainer>
          <gxtcontainer:VerticalLayoutContainer>
            <gxtbutton:TextButton text='Organizations'/>
            <gxtbutton:TextButton text='Relationships'/>
          </gxtcontainer:VerticalLayoutContainer>
          <gxtcontainer:CardLayoutContainer>
            <gxt:ContentPanel headerVisible='false'/>
            <gxt:ContentPanel headerVisible='false'/>
          </gxtcontainer:CardLayoutContainer>
        </gxtcontainer:HorizontalLayoutContainer>
      </gxtcontainer:child>
    </gxtcontainer:VerticalLayoutContainer>
  </gxtcontainer:Viewport>
</ui:UiBinder>

只是为了完整性，这里是UiBinder 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.Widget;

public class PersonDetailsWidget extends Composite {
//==================================================================================================
interface PersonDetailsWidgetUiBinder extends UiBinder<Widget, PersonDetailsWidget> { //
}
//==================================================================================================
public PersonDetailsWidget() {
  final PersonDetailsWidgetUiBinder uiBinder = GWT.create(PersonDetailsWidgetUiBinder.class);
  initWidget(uiBinder.createAndBindUi(this));
}
//--------------------------------------------------------------------------------------------------
}

这是入口点类：

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootLayoutPanel;

public class GXTGrid implements EntryPoint {
//--------------------------------------------------------------------------------------------------
@Override
public void onModuleLoad() {
  final PersonDetailsWidget personDetailsWidget = new PersonDetailsWidget();
  RootLayoutPanel.get().add(personDetailsWidget);
}
//--------------------------------------------------------------------------------------------------
}

我对任何有关替代/“正确”方法的建议持开放态度！

**编辑**

将VerticalLayoutContainer窗口小部件替换为VBoxLayoutContainer窗口小部件，将HorizontalLayoutContainer窗口小部件替换为HBoxLayoutContainer窗口小部件，并删除布局数据条目后，解决了重叠问题。但现在标签和按钮被截断了。结果如下：

enter image description here

注意：如果我在最外面的ResizeContainer#forceLayout执行VBoxLayoutContainer，那么这些按钮都是可见的;但是字段标签仍然被截断。

Answer 1

VerticalLayoutContainer 中的HorizontalLayoutContainer具有以设置高度。这就是它的工作原理。您应该使用HBoxLayoutContainer。这是一个简单的例子（不使用UIBinder）：

    VerticalLayoutContainer vlc = new VerticalLayoutContainer();

    HBoxLayoutContainer hbc1 = new HBoxLayoutContainer();
    hbc1.add(new Label("Person.FirstName:"));
    hbc1.add(new Label("Person.EmailAddress:"));
    vlc.add(hbc1, new VerticalLayoutData(1, -1));

    HBoxLayoutContainer hbc2 = new HBoxLayoutContainer();
    hbc2.add(new TextButton("Save Changes"));
    hbc2.add(new TextButton("Undo Changes"));
    vlc.add(hbc2, new VerticalLayoutData(1, -1));

这就是它的样子：

enter image description here

在GXT布局容器中调整子项大小

1 个答案: