如何在JavaFX中创建可滚动的组件面板？ [英] How to create a scrollable panel of components in JavaFX?

问题描述

所以，基本上，我正在尝试使用间距等来实现这个可滚动的组件集，并且能够添加更多组件。
组件列表是自定义的anchorpane组件。

So, basically, I'm trying to achieve this a scrollable set of components with spacing etc. and the ability to add more components. The list of components are custom anchorpane components.

这是我工作的一个例子：

Here's an example that I got working:

问题是在滚动窗格内部使用了网格窗格因为gridpane根本没有填充滚动窗格的宽度。因此，如果我调整大小，一切都保持原样，而不是在gridpane列内拉伸。另外，如果我要坚持使用gridpane（在tilepane上看起来效果更好，除非组件彼此浮动，尽管方向是垂直的并且prefcolumns为1），我将如何添加更多行？这个想法是以一种不错的，用户体验令人愉悦的方式列出github repos。

The problem is that that uses a gridpane inside of a scrollpane and for some reason the gridpane does not fill the width of the scrollpane at all. So, if I resize, everything stays where it is instead of stretching inside the gridpane columns. Also, if I were to stick to a gridpane (over a tilepane which seems to work better except when the components float next to each other despite the orientation being vertical and prefcolumns being 1), how would I add more rows? The idea of this is to list github repos in a nice, UX pleasing, fashion.

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

Thanks for any insight. Also: those repos aren't mine - I have none and a guy on a website made that (it's not well made so don't compare me to him lol).

推荐答案

这看起来你应该使用 VBox 来保存你的 AnchorPane s并将它们放在 ScrollPane 中。在 ScrollPane 上将 fitToWidth 设置为 true ，它应该强制假设你没有更改上的 maxWidth 属性，锚窗格占据滚动窗格视口的整个宽度（而不是更多） AnchorPane 来自默认值。

This looks like you should use a VBox to hold your AnchorPanes and put them in a ScrollPane. Set fitToWidth to true on the ScrollPane and it should force the anchor panes to take up the whole width (and no more) of the scroll pane's viewport, assuming you don't change the maxWidth property on the AnchorPane from its default.

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

Mocked-up example (which can easily be done in FXML if you prefer):

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 中显示的项目以及一个自定义列表单元格以显示它们。

Another solution might be to use a ListView. (This would be preferable if you had many items to display.) Create a class representing the items you are displaying in each AnchorPane and a custom list cell to display them.

这篇关于如何在JavaFX中创建可滚动的组件面板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！