如何在滚动窗格中的图像之间保持空间

Question

我需要在滚动窗格中的图像之间留出空间。我正在向 Vbox 添加一个图像视图和一个按钮。然后该 vbox 到一个 gridpane.gridpane 被添加到滚动窗格。但是，滚动窗格变得过于拥挤。我用过gridpane.setPadding()，但没有效果。 这是我的代码：

            File file = new File("D:\\SERVER\\Server Content\\Apps\\icons");
            File[] filelist1 = file.listFiles();
            ArrayList<File> filelist2 = new ArrayList<>();


            for (File file1 : filelist1) {
                filelist2.add(file1);

            }
            btnar=new ArrayList<>();
            for (int i = 0; i < filelist2.size(); i++) {
               downloadbtn=new Button("Download");
               btnar.add(downloadbtn);
            }


            System.out.println(filelist2.size());
            gridpane.setAlignment(Pos.CENTER);
            gridpane.setPadding(new Insets(50, 50, 50, 50));

            gridpane.setHgap(50);
            gridpane.setVgap(50);


            ColumnConstraints columnConstraints = new ColumnConstraints();
            columnConstraints.setFillWidth(true);
            columnConstraints.setHgrow(Priority.ALWAYS);
            gridpane.getColumnConstraints().add(columnConstraints);

            int imageCol = 0;
            int imageRow = 0;

            for (int i = 0; i < filelist2.size(); i++) {
                System.out.println(filelist2.get(i).getName());
                image = new Image(filelist2.get(i).toURI().toString());

                pic = new ImageView();
                pic.setFitWidth(130);
                pic.setFitHeight(130);


                pic.setImage(image);
                vb = new VBox();
                vb.getChildren().addAll(pic,btnar.get(i));

                gridpane.add(vb, imageCol, imageRow);
                GridPane.setMargin(pic, new Insets(2,2,2,2));
                imageCol++;

                // To check if all the 3 images of a row are completed
                if (imageCol > 2) {
                    // Reset Column
                    imageCol = 0;
                    // Next Row
                    imageRow++;

                } 
            }

这里'添加图像后我的舞台是什么样子的

Answer 1

您的代码对我来说看起来不错。我已经用一个充满图像的文件夹尝试了你的代码。我将 GridPane 包裹在 ScrollPane 上，并为 ScrollPane 指定了定义的大小。 ImageViews 之间的空间是按照 HGap 和 VGap 提供的。这是支持我的发现的图片。

注意

如果您正在寻找GridPane 中ImageView 之间的差距，请使用setHgap() 和setVgap()

setPadding() 用于设置网格周围的边距。您当然可以像我在下面所做的那样混合使用两者

请找到这个MCVE来支持你发现你的错误

import java.io.File;
import java.util.ArrayList;
import java.util.List;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class LoadingImages extends Application {


    @Override
    public void start(Stage primaryStage) throws Exception {

        ScrollPane scrollPane = new ScrollPane();
        GridPane gridpane = new GridPane();
        scrollPane.setHbarPolicy(ScrollBarPolicy.AS_NEEDED);
        scrollPane.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);
        scrollPane.setPrefSize(500, 500);
        scrollPane.setContent(gridpane);
        Scene scene = new Scene(scrollPane);
        primaryStage.setScene(scene);
        primaryStage.show();

        File file = new File("Path to folder with images");
        File[] filelist1 = file.listFiles();
        ArrayList<File> filelist2 = new ArrayList<>();


        for (File file1 : filelist1) {
            filelist2.add(file1);

        }
        List btnar=new ArrayList<>();
        for (int i = 0; i < filelist2.size(); i++) {
           Button downloadbtn=new Button("Download");
           btnar.add(downloadbtn);
        }


        System.out.println(filelist2.size());
        gridpane.setAlignment(Pos.CENTER);
        gridpane.setPadding(new Insets(50, 50, 50, 50));

        gridpane.setHgap(50);
        gridpane.setVgap(50);


        ColumnConstraints columnConstraints = new ColumnConstraints();
        columnConstraints.setFillWidth(true);
        columnConstraints.setHgrow(Priority.ALWAYS);
        gridpane.getColumnConstraints().add(columnConstraints);

        int imageCol = 0;
        int imageRow = 0;

        for (int i = 0; i < filelist2.size(); i++) {
            System.out.println(filelist2.get(i).getName());
            Image image = new Image(filelist2.get(i).toURI().toString());

            ImageView pic = new ImageView();
            pic.setFitWidth(130);
            pic.setFitHeight(130);


            pic.setImage(image);
            VBox vb = new VBox();
            vb.getChildren().addAll(pic,(Button)btnar.get(i));

            gridpane.add(vb, imageCol, imageRow);
            GridPane.setMargin(pic, new Insets(2,2,2,2));
            imageCol++;

            // To check if all the 3 images of a row are completed
            if (imageCol > 2) {
                // Reset Column
                imageCol = 0;
                // Next Row
                imageRow++;

            } 
        }

    }

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