GWT FlowPanel 不显示内容

Question

我是 GWT 的新手。我想要一个在左侧的 VerticalSplitPanel 和一个在右侧的 VerticalSplitPanel，在 FlowPanel 内。这样，当尺寸从桌面变为手机时，右侧的会移动到左侧的下方。但是什么都没有显示，除了我放在 FlowPanel 上方的 TabPanel。这是相关的 HTML：

<div id="tabPanel"></div>
<div id="flowPanel"></div>

这里是java GWT：

  public void onModuleLoad() {
    //create TabPanel
    final TabPanel tabPanel = new TabPanel();
    tabPanel.add(new HTML("Add Watchlist Here"),"Watchlists");
    tabPanel.add(new HTML("Add Strategies Here"),"Strategies");
    tabPanel.add(new HTML("Add Backtests Here"),"Backtests");
    tabPanel.selectTab(0);
    RootPanel.get("tabPanel").add(tabPanel);
    
    //create FlowPanel for responsive design to work on small screens
    final FlowPanel flowPanel = new FlowPanel();
    
    //create the left VerticalSplitPanel
    final VerticalSplitPanel leftVerticalSplitPanel = new VerticalSplitPanel();
    leftVerticalSplitPanel.setSize("300px", "500px");
    leftVerticalSplitPanel.setSplitPosition("35%");
            
    //add dummy TextArea to left top VerticalSplitPanel
    TextArea leftTextAreaTop = new TextArea();
    leftTextAreaTop.setVisibleLines(5);
    leftTextAreaTop.setText("dummy text to show left top widget");
    leftVerticalSplitPanel.setTopWidget(leftTextAreaTop);

    //add notes TextArea to left bottom VerticalSplitPanel
    TextArea leftTextAreaBottom = new TextArea();
    leftTextAreaBottom.setVisibleLines(5);
    leftTextAreaBottom.setText("dummy text to show left bottom widget");
    leftVerticalSplitPanel.setBottomWidget(leftTextAreaBottom);

    //add the left VerticalSplitPanel to the FlowPanel
    flowPanel.add(leftVerticalSplitPanel);
    
    //create the right VerticalSplitPanel
    final VerticalSplitPanel rightVerticalSplitPanel = new VerticalSplitPanel();
    rightVerticalSplitPanel.setSize("300px", "500px");
    rightVerticalSplitPanel.setSplitPosition("35%");
    
    //add dummy TextArea to right top VerticalSplitPanel
    TextArea rightTextAreaTop = new TextArea();
    rightTextAreaTop.setVisibleLines(5);
    rightTextAreaTop.setText("dummy text to show right top widget");
    rightVerticalSplitPanel.setTopWidget(rightTextAreaTop);

    //add notes TextArea to right bottom VerticalSplitPanel
    TextArea rightTextAreaBottom = new TextArea();
    rightTextAreaBottom.setVisibleLines(5);
    rightTextAreaBottom.setText("dummy text to show right bottom widget");
    rightVerticalSplitPanel.setBottomWidget(rightTextAreaBottom);
      
    //add the right VerticalSplitPanel to the FlowPanel
    flowPanel.add(rightVerticalSplitPanel);
    
    //add the FlowPanel to the RootPanel
    RootPanel.get("flowPanel").add(flowPanel);
  }

注意：我在左侧的 VerticalSplitPanel 中添加了几个 TextArea，希望这会显示一些东西，但没有乐趣。有什么建议吗？

编辑：我修复了一个错误并为两个垂直面板设置了大小。现在他们中的一些人出现了，但顺序很奇怪。左上角小部件是正确的。左下角小部件丢失。右下小部件在左上小部件下方。右上角的小部件是underneath！

Answer 1

您的代码中有很多问题。从不太重要的开始：

1. rightVerticalSplitPanel 为空，因此不可见
2. leftVerticalSplitPanel 只有底部小部件，因为您调用了两次setBottomWidget（我想textAreaTop 应该有setTopWidget）
3. 需要设置leftVerticalSplitPanel（和rightVerticalSplitPanel）的高度，例如leftVerticalSplitPanel.setHeight("100px");
4. VerticalSplitPanel 已弃用，只能在怪癖模式下使用，您应该改用 SplitLayoutPanel