java - 将图像添加到 JavaFX TableView 列中

Question

我是 Java 和 OOP 的新手，在向 tableview 列添加图像时遇到了困难。代码似乎有效，我可以看到学生的姓名正确，但列中未显示图像。我收到此错误，无法理解如何使其工作:

javafx.scene.control.cell.PropertyValueFactory getCellDataReflectively
WARNING: Can not retrieve property 'picture' in PropertyValueFactory: javafx.scene.control.cell.PropertyValueFactory@5b0da50f with provided class type: class model.StudentModel
java.lang.IllegalStateException: Cannot read from unreadable property picture

学生模型:

package model;

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.image.ImageView;

import java.util.ArrayList;
import java.util.List;

public class StudentModel {

    private ImageView picture;
    private String name;
    private SubjectModel major;
    private SubjectModel minor;
    private String accountPassword;
    public String getAccountPassword()
    {
        return accountPassword;
    }
    public List<LectureModel> lectureModelList = new ArrayList<>();

    public StudentModel(String name, SubjectModel major, SubjectModel minor, ImageView picture, String accountPassword)
    {
        this.name = name;
        this.major = major;
        this.minor = minor;
        this.picture = picture;
        this.accountPassword = accountPassword;
    }
    public String getName()
    {
        return name;
    }

    public ObservableList<LectureModel> myObservableLectures(){
        ObservableList<LectureModel> observableList = FXCollections.observableArrayList(lectureModelList);
        return observableList;
    }


    public ImageView getPhoto(){
        return picture;
    }


    public void setPhoto(ImageView photo)
    {
        this.picture =  photo;

    }
}

我有tableview的参与者场景:

public class ParticipantsScene extends Scene {

    private final StudentController studentController;
    private final ClientApplication clientApplication;
    private final TableView<StudentModel> allParticipantsTable;
    private final ObservableList<StudentModel> enrolledStudents;
    private LectureModel lecture;

    public ParticipantsScene(StudentController studentController, ClientApplication application, LectureModel lecture) {
        super(new VBox(), 800 ,500);
        this.clientApplication = application;
        this.studentController = studentController;
        this.lecture = lecture;
        enrolledStudents=lecture.observeAllParticipants();


        TableColumn<StudentModel, String > nameCol = new TableColumn<>("Name");
        nameCol.setMinWidth(200);
        nameCol.setCellValueFactory(new PropertyValueFactory<>("name"));

        TableColumn<StudentModel, ImageView> picCol = new TableColumn<>("Images");
        picCol.setPrefWidth(200);
        picCol.setCellValueFactory(new PropertyValueFactory<>("picture"));

        allParticipantsTable = new TableView<>();
        allParticipantsTable.getColumns().addAll(nameCol,picCol);
        allParticipantsTable.setItems(enrolledStudents);

        VBox vBox = new VBox(10, allParticipantsTable, createButtonBox());
        vBox.setAlignment(Pos.CENTER);
        setRoot(vBox);

    }
    private HBox createButtonBox() {
        var backButton = new Button("Back");
        backButton.setOnAction(event -> clientApplication.showAllLecturesScene());

        var buttonBox = new HBox(10, backButton);
        buttonBox.setAlignment(Pos.CENTER);
        return buttonBox;
    }
}

还添加 Lectures 模型以防万一:

public class LectureModel {

    private String lectureName;
    private String lectureHall;
    private String subjectName;
    private SubjectModel subject;
    private TimeSlot timeSlot;
    //private Button actionButton1;
    //private Button actionButton2;

    private List<StudentModel> enrolledStudents = new ArrayList<>();
    private String name;



    public LectureModel(String lectureName, String lectureHall, SubjectModel subject, TimeSlot timeSlot){
        this.lectureName = lectureName;
        this.lectureHall = lectureHall;
        this.subject = subject;
        this.timeSlot = timeSlot;
        this.subjectName = this.subject.getSubjectName();
    }

    public String getLectureName()
    {
        return lectureName;
    }
    public String getLectureHall()
    {
        return lectureHall;
    }
    public SubjectModel getSubject()
    {
        return subject;
    }
    public String getSubjectName()
    {
        return subjectName;
    }
    public List<StudentModel> getEnrolledStudents()
    {
        return enrolledStudents;
    }

    public ObservableList<StudentModel> observeAllParticipants() {
        ObservableList<StudentModel> observableList = FXCollections.observableArrayList(getEnrolledStudents());
        return observableList;
    }
    public TimeSlot getTimeSlot() {
        return timeSlot;
    }

    public void addStudent(StudentModel studentModel){ enrolledStudents.add(studentModel);}
    public void removeStudent(StudentModel studentModel)
    {
        enrolledStudents.remove(studentModel);
    };

感谢任何形式的帮助，谢谢!

Answer 1

您将 PropertyValueFactory 中使用的属性名称命名错误。

一般情况下，不要使用 PropertyValueFactories，而是使用 lambda:

• Why should I avoid using PropertyValueFactory in JavaFX?

此外，作为一般原则，将数据放置在模型中，而不是节点中。例如，在模型中存储图像或图像的 URL，而不是 ImageView。然后仅在模型 View 中使用节点。例如，要在表格单元格中显示图像，请使用 cell factory .

安LRU cache如果需要，可以用于图像(可能不需要)。

通常，表格中显示的图像可能小于全尺寸图像，即类似于缩略图。为了提高效率，您可能希望使用 sizing image constructor 在后台加载图像。 .

如果您在放置和定位图片资源方面需要帮助，请参阅:

• How do I determine the correct path for FXML files, CSS files, Images, and other resources needed by my JavaFX Application?

示例代码

此答案中的示例使用了答案文本中的一些原则:

• 使用 Lambda 而不是 PropertyValue。
• 列表项的模型使用不可变数据表示为记录。
  • 如果您想要对数据进行读/写访问，请将记录替换为标准类。
• 图像 URL 在模型中存储为字符串，而不是 ImageView 节点。
• 单元工厂用于提供 ImageView 节点来查看图像。
• 图片在后台加载并在加载时调整为缩略图大小。
  • 如果您的应用需要，您可以跳过缩略图大小并使用全尺寸图片。
  • 如果您希望 UI 等到图像加载完毕后再显示，您可以在前台加载(不推荐，但对于小的本地镜像您不会看到任何差异)。
• 图像加载到 LRU 缓存中。
  • 如果您没有很多图像(例如数千张)，您可以将图像(而不是 ImageView)直接存储在模型中并使用它，从解决方案中删除 LRU 缓存。

虽然我没有对其进行测试，但该解决方案应该可以很好地扩展到包含数千行的表格，每行都有不同的图像。

此处提供了此答案中使用的图像:

• JavaFX: ComboBox with custom cell factory - buggy rendering

import javafx.application.Application;
import javafx.beans.property.*;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.util.*;

public class StudentTableViewer extends Application {
    public record Student(String last, String first, String avatar) {}

    @Override
    public void start(Stage stage) {
        TableView<Student> table = createTable();
        populateTable(table);

        VBox layout = new VBox(
                10,
                table
        );
        layout.setPadding(new Insets(10));
        layout.setPrefSize(340, 360);

        layout.setStyle("-fx-font-size:20px; -fx-base: antiquewhite");

        stage.setScene(new Scene(layout));
        stage.show();
    }

    private TableView<Student> createTable() {
        TableView<Student> table = new TableView<>();

        TableColumn<Student, String> lastColumn = new TableColumn<>("Last");
        lastColumn.setCellValueFactory(
                p -> new ReadOnlyStringWrapper(p.getValue().last()).getReadOnlyProperty()
        );

        TableColumn<Student, String> firstColumn = new TableColumn<>("First");
        firstColumn.setCellValueFactory(
                p -> new ReadOnlyStringWrapper(p.getValue().first()).getReadOnlyProperty()
        );

        TableColumn<Student, String> avatarColumn = new TableColumn<>("Avatar");
        avatarColumn.setCellValueFactory(
                p -> new ReadOnlyStringWrapper(p.getValue().avatar()).getReadOnlyProperty()
        );
        avatarColumn.setCellFactory(
                p -> new AvatarCell()
        );
        avatarColumn.setPrefWidth(70);

        //noinspection unchecked
        table.getColumns().addAll(lastColumn, firstColumn, avatarColumn);

        return table;
    }

    public static class AvatarCell extends TableCell<Student, String> {
        private final ImageView imageView = new ImageView();
        private final ImageCache imageCache = ImageCache.getInstance();

        @Override
        protected void updateItem(String url, boolean empty) {
            super.updateItem(url, empty);

            if (url == null || empty || imageCache.getThumbnail(url) == null) {
                imageView.setImage(null);
                setGraphic(null);
            } else {
                imageView.setImage(imageCache.getThumbnail(url));
                setGraphic(imageView);
            }
        }
    }

    private void populateTable(TableView<Student> table) {
        table.getItems().addAll(
                new Student("Dragon", "Smaug", "Dragon-icon.png"),
                new Student("Snake-eyes", "Shifty", "Medusa-icon.png"),
                new Student("Wood", "Solid", "Treant-icon.png"),
                new Student("Rainbow", "Magical", "Unicorn-icon.png")
        );
    }
}

class ImageCache {
    private static final int IMAGE_CACHE_SIZE = 10;
    private static final int THUMBNAIL_SIZE = 64;

    private static final ImageCache instance = new ImageCache();

    public static ImageCache getInstance() {
        return instance;
    }

    private final Map<String, Image> imageCache = new LruCache<>(
            IMAGE_CACHE_SIZE
    );

    private final Map<String, Image> thumbnailCache = new LruCache<>(
            IMAGE_CACHE_SIZE
    );

    public Image get(String url) {
        if (!imageCache.containsKey(url)) {
            imageCache.put(
                    url,
                    new Image(
                            Objects.requireNonNull(
                                    ImageCache.class.getResource(
                                            url
                                    )
                            ).toExternalForm(),
                            true
                    )
            );
        }

        return imageCache.get(url);
    }

    public Image getThumbnail(String url) {
        if (!thumbnailCache.containsKey(url)) {
            thumbnailCache.put(
                    url,
                    new Image(
                            Objects.requireNonNull(
                                    ImageCache.class.getResource(
                                            url
                                    )
                            ).toExternalForm(),
                            THUMBNAIL_SIZE,
                            THUMBNAIL_SIZE,
                            true,
                            true,
                            true
                    )
            );
        }

        return thumbnailCache.get(url);
    }

    private static final class LruCache<A, B> extends LinkedHashMap<A, B> {
        private final int maxEntries;

        public LruCache(final int maxEntries) {
            super(maxEntries + 1, 1.0f, true);
            this.maxEntries = maxEntries;
        }

        @Override
        protected boolean removeEldestEntry(final Map.Entry<A, B> eldest) {
            return super.size() > maxEntries;
        }
    }
}