将图像添加到 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;

    }
}

我有桌面视图的参与者场景：

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;
    }
}

还添加讲座模型，以防有帮助：

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：

为什么我应该避免在 JavaFX 中使用 PropertyValueFactory？

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

如果需要，可以将 LRU 缓存用于图像（可能不需要）。

表格中显示的图像通常可能小于全尺寸图像，即缩略图。为了提高效率，您可能需要使用调整图像大小的构造函数在后台加载图像。

如果您需要帮助放置和定位图像资源，请参阅：

如何确定 JavaFX 应用程序所需的 FXML 文件、CSS 文件、图像和其他资源的正确路径？

示例代码

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

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

虽然我没有测试它，但这个解决方案应该可以很好地扩展到具有数千行的表，每行都有不同的图像。

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

JavaFX：带有自定义单元工厂的 ComboBox - 渲染错误

ImageCell.java

import javafx.scene.control.TableCell;
import javafx.scene.image.ImageView;

public class ImageCell<S> extends TableCell<S, 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);
        }
    }
}

ImageCache.java

import javafx.scene.image.Image;

import java.util.LinkedHashMap;
import java.util.Map;
import java.util.Objects;

public 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;
        }
    }
}

学生.java

public record Student(
        String last,
        String first,
        String avatar
) {}

StudentTableApp.java

import javafx.application.Application;
import javafx.beans.property.ReadOnlyStringWrapper;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class StudentTableApp extends Application {
    @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 ImageCell<>()
        );
        avatarColumn.setPrefWidth(70);

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

        return table;
    }

    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")
        );
    }
}

将图像添加到 JavaFX TableView 列中

问题描述投票：0回答：1

1个回答

最新问题

将图像添加到 JavaFX TableView 列中

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1