JAVAFX：使用圖像 + 文本更新列表視圖

Question

我正在嘗試使用 javafx 創建一個簡單的國際象棋游戲。 我有 2 個充滿圖像的列表視圖和每個圖像附近的計數器，它們代表從棋盤上移除的每個棋子的計數器。 有沒有辦法更新圖像的計數器？ 這是我用來創建起始列表的代碼，所有的部分都帶有 0x 計數器。

        lista2.setCellFactory(listview -> new ListCell<String>() {
        private ImageView imageView = new ImageView();
        @Override
        public void updateItem(final String item, final boolean empty) {
            Image img = null;
            super.updateItem(item, empty);
            if (empty) {
                setGraphic(null);
            } else {
                try(InputStream is = Files.newInputStream(Paths.get(GameView.RESFOLDER + item + GameView.FORMAT))){
                    img = new Image(is);                
                } catch(IOException e) {
                    System.out.println("Couldn't load image" + Paths.get(GameView.RESFOLDER + item + GameView.FORMAT));
                }        
                // true makes this load in background
                // see other constructors if you want to control the size, etc 
                imageView.setImage(img);
                setGraphic(imageView);
                setText("x0");
            }
        }
    });

Answer 1

您在ListView updateItem()方法中做了太多事情。 您應該改為使用適當的數據模型對象來填充ListView 。

您應該更新底層對象，而不是在CellFactory中進行任何類型的計算等。

這是一個快速的示例應用程序來演示。 你會看到我為ChessPiece創建了一個單獨的類。 該對象包含您需要在ListView顯示的所有信息。

然后，在我們的CellFactory ，您只需使用ChessPiece的值更新顯示的項目。

編碼

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

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

    @Override
    public void start(Stage primaryStage) {

        // Build a simple UI
        VBox root = new VBox(5);
        root.setPadding(new Insets(10));
        root.setAlignment(Pos.CENTER);

        // Create a list of Chess pieces
        ObservableList<ChessPiece> chessPieces = FXCollections.observableArrayList();

        // Add a sample Chess piece, a queen in this case
        chessPieces.add(new ChessPiece(
                "Queen",
                new ImageView("sample/listViewImages/queen.png"),
                0
        ));

        // Create the ListView
        ListView<ChessPiece> lvChessPieces = new ListView<>();

        // Setup the CellFactory
        lvChessPieces.setCellFactory(listView -> new ListCell<ChessPiece>() {
            @Override
            protected void updateItem(ChessPiece piece, boolean empty) {
                super.updateItem(piece, empty);

                if (empty) {
                    setGraphic(null);
                } else {

                    // Create a HBox to hold our displayed value
                    HBox hBox = new HBox(5);
                    hBox.setAlignment(Pos.CENTER);

                    // Add the values from our piece to the HBox
                    hBox.getChildren().addAll(
                            piece.getImage(),
                            new Label(piece.getName()),
                            new Label("x " + piece.getCount())
                    );

                    // Set the HBox as the display
                    setGraphic(hBox);
                }
            }
        });

        // Bind our list of pieces to the ListView
        lvChessPieces.setItems(chessPieces);

        // Create a button to add change the Queen count
        Button button = new Button("Add a Queen");
        button.setOnAction(e -> {
            // Get the queen from the list of Chess Pieces. For this sample we only have one piece in our List,
            // but in a real application, you'll need to build a method for retrieving the correct piece.
            ChessPiece queen = chessPieces.get(0);
            queen.setCount(queen.getCount() + 1);

            // Refresh the ListView to show the updated counts
            lvChessPieces.refresh();
        });

        root.getChildren().addAll(lvChessPieces, button);
        primaryStage.setScene(new Scene(root));

        primaryStage.show();
    }
}

/**
 * Defines a Chess piece, including it's name, image, and current count
 */
class ChessPiece {

    private final String name;
    private final ImageView image;
    private int count;

    public ChessPiece(String name, ImageView image, int count) {
        this.name = name;
        this.image = image;
        this.count = count;

        // Resize the image, if necessary
        this.image.setFitHeight(25);
        this.image.setFitWidth(20);

    }

    public String getName() {
        return name;
    }

    public ImageView getImage() {
        return image;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }
}

結果

這是此應用程序生成的屏幕截圖：