GWT FlowPanel不显示内容

Question

我是GWT的新手。我想要一个垂直splitpanel在左边和一个垂直splitpanel在右边，在一个FlowPanel内。这样，当从桌面到手机的尺寸变化时，右边的移动到左边的下面。但是什么也没有显示，除了一个TabPanel，我已经放在FlowPanel上面。以下是相关的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);
}

注意:我扔在一对夫妇的TextAreas在左边的垂直分裂面板希望，将使一些显示，但没有乐趣。有什么建议吗?

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

Answer 1

您的代码中有不少问题。从不重要的开始:

1. rightVerticalSplitPanel为空，因此将不可见
2. leftVerticalSplitPanel只有底部小部件，因为你调用setBottomWidget两次(我猜textAreaTop应该有setTopWidget)
3. 您需要设置leftVerticalSplitPanel(和rightVerticalSplitPanel)的高度，例如leftVerticalSplitPanel.setHeight("100px");
4. VerticalSplitPanel已弃用，只能在quirks模式下工作，您应该使用SplitLayoutPanel代替