JavaFX TableView列值显示错误问题排查与修复

问题描述 #

我想用JavaFX创建一个展示“Product”“Price”“Quantity”的表格，但实际运行后Price列显示的是Quantity的值，Quantity列没有内容。我正在学习JavaFX，代码参考YouTube教程，确认和教程代码一致但结果不符，以下是相关代码：

原demo16TableView类代码 #

public class demo16TableView extends Application {
    Stage window;
    Scene scene;
    TableView<Product> table;

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

    @Override
    public void start(Stage stage) throws Exception {
        window = stage;
        window.setTitle("Table view");

        //Set up name colum
        TableColumn<Product, String> nameColum = new TableColumn<>("Product Name");
        nameColum.setMinWidth(200);
        nameColum.setCellValueFactory(new PropertyValueFactory<>("name"));

        //Set up price colum
        TableColumn<Product, Double> priceColum = new TableColumn<>("Price");
        priceColum.setMinWidth(100);
        priceColum.setCellValueFactory(new PropertyValueFactory<>("price"));

        //Set up quantity colum
        TableColumn<Product, Integer> quantityColum = new TableColumn<>("Quantity");
        quantityColum.setMinWidth(100);
        priceColum.setCellValueFactory(new PropertyValueFactory<>("quantity"));

        //Add to table
        table = new TableView<>();
        table.setItems(getProducts());
        table.getColumns().add(nameColum);
        table.getColumns().add(priceColum);
        table.getColumns().add(quantityColum);

        VBox layout = new VBox();
        //layout.setAlignment(Pos.CENTER);
        layout.getChildren().addAll(table);

        scene = new Scene(layout);
        window.setScene(scene);
        window.show();

    }

    public ObservableList<Product> getProducts(){
        ObservableList<Product> products = FXCollections.observableArrayList();
        products.add(new Product("Macbook Pro", 1799.50, 50));
        products.add(new Product("Apple Watch", 349.99, 60));
        products.add(new Product("iPad", 499.00, 70));
        products.add(new Product("iPhone", 999.00, 80));
        products.add(new Product("Sony HeadPhone", 499.00, 90));
        return products;
    }
}

原Product类代码 #

public class Product {
    private String name;
    private double price;
    private int quantity;

    public Product(){};

    public Product(String name, double price, int quantity) {
        this.name = name;
        this.price = price;
        this.quantity = quantity;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public int getQuantity() {
        return quantity;
    }

    public void setQuantity(int quantity) {
        this.quantity = quantity;
    }
}

错误原因 #

这是一个低级的变量调用错误：在设置Quantity列的单元格值工厂时，错误操作了priceColum对象而非quantityColum对象。原本应为quantityColum绑定"quantity"数据源，结果却把priceColum的数据源改成了"quantity"，导致Price列显示Quantity的值，而Quantity列未配置任何数据源，因此为空。

修正后的代码 #

只需修改Quantity列的设置代码，将priceColum.setCellValueFactory(...)改为quantityColum.setCellValueFactory(...)即可：

//Set up quantity colum
TableColumn<Product, Integer> quantityColum = new TableColumn<>("Quantity");
quantityColum.setMinWidth(100);
// 修正：把priceColum改成quantityColum
quantityColum.setCellValueFactory(new PropertyValueFactory<>("quantity"));

完整修正后的demo16TableView类代码：

public class demo16TableView extends Application {
    Stage window;
    Scene scene;
    TableView<Product> table;

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

    @Override
    public void start(Stage stage) throws Exception {
        window = stage;
        window.setTitle("Table view");

        //Set up name colum
        TableColumn<Product, String> nameColum = new TableColumn<>("Product Name");
        nameColum.setMinWidth(200);
        nameColum.setCellValueFactory(new PropertyValueFactory<>("name"));

        //Set up price colum
        TableColumn<Product, Double> priceColum = new TableColumn<>("Price");
        priceColum.setMinWidth(100);
        priceColum.setCellValueFactory(new PropertyValueFactory<>("price"));

        //Set up quantity colum
        TableColumn<Product, Integer> quantityColum = new TableColumn<>("Quantity");
        quantityColum.setMinWidth(100);
        quantityColum.setCellValueFactory(new PropertyValueFactory<>("quantity"));

        //Add to table
        table = new TableView<>();
        table.setItems(getProducts());
        table.getColumns().add(nameColum);
        table.getColumns().add(priceColum);
        table.getColumns().add(quantityColum);

        VBox layout = new VBox();
        //layout.setAlignment(Pos.CENTER);
        layout.getChildren().addAll(table);

        scene = new Scene(layout);
        window.setScene(scene);
        window.show();

    }

    public ObservableList<Product> getProducts(){
        ObservableList<Product> products = FXCollections.observableArrayList();
        products.add(new Product("Macbook Pro", 1799.50, 50));
        products.add(new Product("Apple Watch", 349.99, 60));
        products.add(new Product("iPad", 499.00, 70));
        products.add(new Product("iPhone", 999.00, 80));
        products.add(new Product("Sony HeadPhone", 499.00, 90));
        return products;
    }
}

Product类代码无需修改，保持原样即可。

内容的提问来源于stack exchange，提问作者Steve1132