Javascript GWT FlowPanel不显示内容

我是GWT的新手。我想要一个VerticalSplitPanel在左边，一个VerticalSplitPanel在右边，在FlowPanel内部。这样，当大小从桌面变为手机时，右边的手机会移到左边的手机下面。但除了我放在FlowPanel上方的选项卡面板之外，什么都没有显示。以下是相关的HTML：

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

注意：我在左侧垂直拆分面板中添加了几个文本区域，希望能显示一些内容，但没有乐趣。有什么建议吗

---

编辑：我修复了一个bug，并为两个垂直面板设置了大小。现在他们中的一些人出现了，但顺序很奇怪。左上方的小部件是正确的。缺少左下角小部件。右下小部件位于左上小部件的下方。右上方的小部件就在它的下方

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

rightVerticalSplitPanel

为空，因此不可见

leftVerticalSplitPanel

只有底部小部件，因为您调用了两次

setBottomWidget

（我想

textAreaTop应该有
setTopWidget
）

您需要设置

leftVerticalSplitPanel

（和

rightVerticalSplitPanel

）的高度，例如

leftVerticalSplitPanel.setHeight（“100px”）

---

VerticalSplitPanel

已弃用，只能在怪癖模式下工作，您应该改用

---

1.好啊2.修正了。请参阅文章中编辑的代码。3.我设定了尺寸，现在我可以看到它们了，但方式很奇怪。见文章末尾的评论。4.我试试看。非常感谢。我按照您的建议更改为SplitLayoutPanel。现在，所有4个部分都显示正确，但右侧的SplitLayoutPanel位于左侧的下方，而不是右侧。顶部和底部之间有2个分隔符，而不是1个。

VerticalSplitPanel

s呈现为HTML

div

元素，而

div

s呈现为（块级元素总是从新行开始）。所以它在

FlowPanel

中无法按预期工作。我应该包装一些东西使其按预期工作吗？对不起，我不是响应式布局方面的专家。您可以尝试将

显示

更改为

内联块

：

leftVerticalSplitPanel.getElement（）.getStyle（）.setDisplay（display.inline_块）（与右面板相同）。
  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);
  }