在滚动窗格中显示多个图像时如何在LabelView上附加标签？

Question

我正在尝试重新创建此设计->滚动窗格中的电影图像和标题[

将在滚动窗格内的下方显示带有标签文本的图像。现在，我正在练习，因此我使用的是一张可循环播放多次的图像和一个文本短语，但将来，我想对电影海报和图像标题进行上述操作。无论如何，这是我到目前为止提出的：

import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Region;
import javafx.scene.layout.TilePane;
import javafx.scene.layout.VBox;
import org.json.JSONException;

public class WorkController implements Initializable {

    @FXML
    private TilePane tp;

    @FXML
    private ImageView imageView;

    @FXML
    private Label labe;

    @FXML
    private ScrollPane mMoviesScrollPane;

    private int count = 0;

    private int nCols = 5;

    private int nRows = 5;

    private static final double ELEMENT_SIZE = 100;

    private static final double GAP = ELEMENT_SIZE / 10;

private void createElements() {
            tp.getChildren().clear();

            for (int i = 0; i < nCols; i++) {
                for (int j = 0; j < nRows; j++) {

                    tp.getChildren().add(createPage(count));
                    count++;

                      labe.setText("hi");

                }
            }
        }


    public VBox createPage(int index) {

         imageView = new ImageView();


         Image image = new Image("https://res.cloudinary.com/demo/image/upload/s--1tQspuaM--/c_imagga_crop/kitten.jpg");
         imageView.setImage(image);
         imageView.setFitWidth(ELEMENT_SIZE);
         imageView.setFitHeight(ELEMENT_SIZE);

         imageView.setSmooth(true);

         VBox pageBox = new VBox();
         pageBox.getChildren().add(imageView);        
         pageBox.setStyle("-fx-border-color: orange;");

         imageView = null;
         return pageBox;


}

    @Override
    public void initialize(URL url, ResourceBundle rb) {

        mMoviesScrollPane.setContent(tp);
        tp.setPrefColumns(nCols);
        tp.setPrefRows(nRows);
        tp.setMaxWidth(Region.USE_PREF_SIZE);

        tp.setHgap(4);
        tp.setVgap(10);
        tp.setPadding(new Insets(10, 8, 4, 8));

        tp.prefWidthProperty().bind(mMoviesScrollPane.widthProperty());

        createElements();

    } }

我的FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.TilePane?>

<AnchorPane id="AnchorPane" prefHeight="800.0" prefWidth="1333.0" styleClass="pane" stylesheets="@../View/css.css" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="apipractice.WorkController">
   <children>
      <ScrollPane fx:id="mMoviesScrollPane" hbarPolicy="NEVER" layoutX="832.0" layoutY="413.0" prefHeight="343.0" prefWidth="368.0">
         <content>
            <TilePane fx:id="tp" prefHeight="194.0" prefWidth="366.0">
               <children>
                  <Label fx:id="labe" prefHeight="58.0" prefWidth="70.0" text="Label" />
               </children>
            </TilePane>
         </content>
      </ScrollPane>
   </children>
</AnchorPane>

这是我能够创建的。我试图在图片下附加标签，但它没有出现在任何地方。我不确定这是否是最好的方法，所以任何建议都将有所帮助。谢谢。我创建的内容

Answer 1

发布的代码已关闭。根据index更改图像和文本：

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.geometry.Insets;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.TilePane;
import javafx.scene.layout.VBox;

public class WorkController implements Initializable {

    @FXML
    private TilePane tp;

    @FXML
    private ScrollPane mMoviesScrollPane;

    private int count = 0;
    private final int nCols = 3, nRows = 2;

    private static final double ELEMENT_SIZE = 100,  GAP = ELEMENT_SIZE / 10;

    private static final String[] BOXES_256 = {
            "https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Green.png",
            "https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png",
            "https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Yellow.png",
            "https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Blue.png",
            "https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Orange.png",
            "https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Grey.png"
    };

    private static final String[] TITLES = {
            "Box Green",
            "Box Red",
            "Box Yellow",
            "Box Blue",
            "Box Orange",
            "Box Grey"
    };

    private void createElements() {

        tp.getChildren().clear();
        for (int i = 0; i < nCols; i++) {
            for (int j = 0; j < nRows; j++) {
                tp.getChildren().add(createPage(count++));
            }
        }
    }

    public VBox createPage(int index) {

        ImageView imageView = new ImageView();
        Image image = new Image(BOXES_256[index]);
        imageView.setImage(image);
        imageView.setFitWidth(ELEMENT_SIZE);
        imageView.setFitHeight(ELEMENT_SIZE);
        imageView.setSmooth(true);

        VBox pageBox = new VBox();
        pageBox.getChildren().addAll(imageView, new Label(TITLES[index]));
        pageBox.setStyle("-fx-border-color: orange;");
        return pageBox;
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {

        mMoviesScrollPane.setContent(tp);

        tp.setPrefColumns(nCols);
        tp.setPrefRows(nRows);
        tp.setHgap(4);
        tp.setVgap(10);
        tp.setPadding(new Insets(10, 8, 4, 8));
        createElements();
    }
}

FxmlTest.fxml：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.TilePane?>

<AnchorPane id="AnchorPane" prefHeight="800.0" prefWidth="1333.0" styleClass="pane" xmlns="http://javafx.com/javafx/10.0.1" 
xmlns:fx="http://javafx.com/fxml/1" fx:controller="fx_tests.WorkController">
   <children>
      <ScrollPane fx:id="mMoviesScrollPane" hbarPolicy="NEVER" layoutX="418.0" layoutY="229.0" >
         <content>
            <TilePane fx:id="tp">   </TilePane>
         </content>
      </ScrollPane>
   </children>
</AnchorPane>

使用以下命令进行测试：

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class FxmlTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        try {

            FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("FxmlTest.fxml"));
            Pane root = fxmlLoader.load();
            primaryStage.setScene(new Scene(root));
            primaryStage.show();
        }
        catch (IOException e) {
            e.printStackTrace();
        }
    }

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