如何在 JavaFX 中创建可滚动的组件面板？答案

【问题标题】：How to create a scrollable panel of components in JavaFX?如何在 JavaFX 中创建可滚动的组件面板？
【发布时间】：2015-07-18 06:11:53
【问题描述】：

所以，基本上，我正在尝试实现一组具有间距等的可滚动组件以及添加更多组件的能力。组件列表是自定义锚窗格组件。

这是我开始工作的一个例子：

问题在于，它在滚动窗格内使用了网格窗格，并且由于某种原因，网格窗格根本没有填充滚动窗格的宽度。因此，如果我调整大小，所有内容都将保持原位，而不是在网格窗格列内拉伸。此外，如果我要坚持使用网格窗格（在似乎工作得更好的瓷砖窗格上，除非组件彼此相邻浮动，尽管方向为垂直且 prefcolumns 为 1），我将如何添加更多行？这样做的想法是以一种很好的、UX 令人愉悦的方式列出 github 存储库。

感谢您的任何见解。另外：那些回购不是我的 - 我没有，网站上的一个人做了那个（它做得不好，所以不要把我和他比较哈哈）。

【问题讨论】：

Enrich your List UI by using the MediaListCell 怎么样。否则提供一些代码。
@Roland - 目前我正在对场景构建器中的所有内容进行原型设计，但我认为我可能必须尽快开始使用代码制作自定义组件才能获得我想要的功能。不过，该链接很有趣，我将在程序的另一部分使用它。现在，我只是在寻找一个纯粹基于 FXML 的解决方案。
看起来您只需在 ScrollPane 中添加 VBox 即可。 fillWidth="true" 用于VBox 和fitToWidth="true" 用于ScrollPane。如果您想要GridPane，请使用columnConstraints 来控制宽度。但是，如果您想要更完整的答案，请创建一个简单的示例并发布一些代码。
@James_D 你的想法很有效。是否有可能使 VBox（锚板）中的组件拉伸以适应 VBox 的宽度？
在滚动窗格上将fitToWidth 设置为true 就足够了。

标签： javafx panel scrollpane

【解决方案1】：

看起来您应该使用VBox 来保存您的AnchorPanes 并将它们放入ScrollPane。将fitToWidth 设置为ScrollPane 上的true，假设您不更改maxWidth 上的属性AnchorPane 从它的默认值。

模拟示例（如果您愿意，可以在 FXML 中轻松完成）：

import java.util.Random;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ScrollingVBox extends Application {


    @Override
    public void start(Stage primaryStage) {

        final Random rng = new Random();
        VBox content = new VBox(5);
        ScrollPane scroller = new ScrollPane(content);
        scroller.setFitToWidth(true);

        Button addButton = new Button("Add");
        addButton.setOnAction(e -> {
            AnchorPane anchorPane = new AnchorPane();
            String style = String.format("-fx-background: rgb(%d, %d, %d);"+
                    "-fx-background-color: -fx-background;",
                    rng.nextInt(256),
                    rng.nextInt(256),
                    rng.nextInt(256));
            anchorPane.setStyle(style);
            Label label = new Label("Pane "+(content.getChildren().size()+1));
            AnchorPane.setLeftAnchor(label, 5.0);
            AnchorPane.setTopAnchor(label, 5.0);
            Button button = new Button("Remove");
            button.setOnAction(evt -> content.getChildren().remove(anchorPane));
            AnchorPane.setRightAnchor(button, 5.0);
            AnchorPane.setTopAnchor(button, 5.0);
            AnchorPane.setBottomAnchor(button, 5.0);
            anchorPane.getChildren().addAll(label, button);
            content.getChildren().add(anchorPane);
        });

        Scene scene = new Scene(new BorderPane(scroller, null, null, addButton, null), 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

另一种解决方案可能是使用ListView。（如果您有很多项目要显示，这会更好。）创建一个类来表示您在每个 AnchorPane 中显示的项目，并创建一个自定义列表单元格来显示它们。

【讨论】：