GWT FlowPanel 不显示内容

Question

我是 GWT 新手。我想要左侧的 VerticalSplitPanel 和右侧的 VerticalSplitPanel，在 FlowPanel 内。这样一来，当尺寸从桌面变为 phone 时，右侧的移动到左侧的下方。但是除了我放置在 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 中添加了几个 TextAreas，希望能显示一些内容，但并不令人高兴。有什么建议吗？

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

Answer 1

您的代码中有不少问题。从次要的开始：

rightVerticalSplitPanel是空的，所以不可见
leftVerticalSplitPanel 只有底部小部件，因为您调用了 setBottomWidget 两次（我猜 textAreaTop 应该有 setTopWidget）
需要设置leftVerticalSplitPanel（和rightVerticalSplitPanel）的高度，例如leftVerticalSplitPanel.setHeight("100px");
VerticalSplitPanel 已弃用，只能在 quirks 模式下工作，您应该使用 SplitLayoutPanel 而不是

GWT FlowPanel 不显示内容

GWT FlowPanel not showing contents

javascript

java

html

gwt