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

Question

所以,基本上,我正在努力实现这个具有间距等的可滚动组件集以及添加更多组件的能力.组件列表是自定义anchorpane组件.

这是我工作的一个例子:

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

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

Answer 1

这看起来你应该使用a VBox来保存你的AnchorPanes并将它们放入ScrollPane.设置fitToWidth为trueon ScrollPane,它应该强制锚定窗格占据滚动窗格视口的整个宽度(而不是更多),假设您没有更改其默认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);
    }
}

另一种解决方案可能是使用a ListView.(如果您要显示许多项目,这将是更可取的.)创建一个表示您在每个项目中显示的项目的类AnchorPane以及一个自定义列表单元格以显示它们.