FlowPane内容调整

Question

我在中间有一个流动窗格，我应用了一个滑块效果，单击右侧的按钮会调用该效果（因此滑块在展开时从右向左移动）。我已经按照这里提到的 JewelSea 滑块教程 Slider

现在我在两个不同的节点中有两个不同的流程窗格。两个流程窗格都包含标签数组，但唯一的区别是，一个流程窗格包含滚动条并包含在 TitlePane 中，而另一个没有滚动条，也没有标题窗格。

所以现在如果我点击滑块，流程窗格中的内容（没有滚动条和标题窗格）会自动调整，但它与包含滚动条的流程窗格不同。

这里是带滚动条的flowpane的相关代码-

public void loadCase() {
    ScrollPane s = null;
    if (!homeController.mainTabPane.getTabs().contains(testTab)) {
        int app = 0;
        if (appareaList.size() > 0) {
            FlowPane fpTestmoduleContainer = new FlowPane();
            FlowPane example = new FlowPane();
            for (ApplicationAreas appttribute : appareaList) {
                appTestTitledPane[app] = new TitledPane();
                appTestTitledPane[app].setText(appttribute.getApplication_name());
                appTestTitledPane[app].setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);

                /*Module loop start*/
                fpTestmoduleContainer.setHgap(10);
                fpTestmoduleContainer.setVgap(10);
               // fpTestmoduleContainer.setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);

                List<TestModuleAttribute> testmoduleList = WSData.getTestingModuleList(appttribute.getApplication_id());
                ArrayList<Label> listTestlbs = new ArrayList<Label>(testmoduleList.size());
                System.out.println("testmoduleList.size()" + testmoduleList.size());
                int i = 0;
                for (TestModuleAttribute testmattribute : testmoduleList) {
                    listTestlbs.add(new Label());
                    listTestlbs.get(i).setText(testmattribute.getModule_name());

                    listTestlbs.get(i).setAlignment(Pos.CENTER);
                    listTestlbs.get(i).setTextAlignment(TextAlignment.CENTER);
                    listTestlbs.get(i).setWrapText(true);
                    listTestlbs.get(i).setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
                    listTestlbs.get(i).setId(testmattribute.getFxnode_css());
                    Image imgInstalled = new Image(getClass().getResourceAsStream("/upgradeworkbench/View/Icons/ok.png"));
                    listTestlbs.get(i).setGraphic(new ImageView(imgInstalled));
                    listTestlbs.get(i).setContentDisplay(ContentDisplay.BOTTOM);
                    Tooltip testtp = new Tooltip();
                    testtp.setText("Total No. Of test Cases :" + testmattribute.getTest_case());
                    testtp.setWrapText(true);

                    listTestlbs.get(i).setTooltip(testtp);
                    addModuleMouseClickListener(listTestlbs.get(i), testmattribute.getModule_name(), testmattribute.getFxnode_css(), testmattribute.getTest_case());
                    i = i + 1;
                }
               s = new ScrollPane();
                s.setContent(fpTestmoduleContainer);
                fpTestmoduleContainer.setPrefWidth(1500);
                fpTestmoduleContainer.getChildren().addAll(listTestlbs);
                //appTestTitledPane[app].setContent(fpTestmoduleContainer[app]);
                listTestlbs.clear();
                app = app + 1;
            }
            appareaTestmoduleContainer.getPanes().addAll(appTestTitledPane);
            appareaTestmoduleContainer.setExpandedPane(appTestTitledPane[0]);
            testTab.setText("Test Cases Wizard");
            testTab.setText("Testing Application Foot Print");
        //mainTab.setClosable(true);

            // testTab.getContent().setVisible(true);
            HBox hb = new HBox();

            testTab.setContent(s);

            }
    }
}

滑块按预期工作的图片 - 滑动前

滑动后（无滚动条） 4 个模块进入下一行，因为 space 被滑块占据

添加滚动面板并在其中嵌入流程面板后。滑块与流程窗格内容重叠，如图所示

我想知道为什么滚动条导致在自动调整流程窗格中的内容时出现问题，我该如何解决？

Answer 1

此处滚动窗格的宽度是固定的。然后，流的宽度 pane.You 需要更改滚动窗格的大小，以便重置其内容。使用以下代码。

scroll[app].setFitToHeight(true);
scroll[app].setFitToWidth(true);

此代码将根据视图设置滚动窗格的大小。流动窗格也将相应地调整。

FlowPane内容调整

Adjustment of contents in FlowPane

javafx

slider

scrollbar

flowpane