java - 如何根据javafx中的复选框选择生成按钮(图片)

Question

我的问题是如何根据用户在javafx中选择的复选框和/或单选按钮生成带有汽车图片设置的按钮？

我正在用汽车图片模拟汽车经销商网站。用户应该能够通过单击复选框和/或单选按钮选择来过滤显示的图片。

我首先使用 foreach 循环创建所有图片按钮。我可以使用 if 和 if/else 语句来过滤图片，但会有重复。我听说过 observablelist，但还没学过。

有人可以帮我解决这个问题吗？谢谢!

ArrayList<Car> cars;

for (Car r : cars)
{
    for (int i = 0; i < SIZE; i++)
    {
       // create buttons and set car pictures
       carButton[i] = new Button();
       carButton[i].setId(String.format("%d", i));
       carButton[i].setGraphic(cars.get(i).getCarPicture());
    }
}

Answer 1

我建议您使用 ObservableList，而不是为您的汽车使用 ArrayList:

ObservableList<Car> carsList = FXCollections.observableArrayList<>();

ObservableList 允许您监听更改并做出相应响应。例如，当新的 Car 添加到列表中时，您可以触发一个事件，自动将新的 Button 添加到场景中。

这是一个简短的演示应用程序，展示了它是如何工作的。我也对下面的代码进行了注释，所使用的许多概念可能超出了您的水平，但至少这是一种方法。

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.ImageView;
import javafx.scene.layout.FlowPane;
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) {

        VBox root = new VBox(5);
        root.setPadding(new Insets(10));
        root.setAlignment(Pos.CENTER);

        // Create an ObservableList to hold our Cars
        ObservableList<Car> carsList = FXCollections.observableArrayList();

        // For our sample, let's use a FlowPane to display all of our buttons. We will add new buttons to this FlowPane
        // automatically as new Cars are added to carsList
        FlowPane flowPane = new FlowPane();
        flowPane.setHgap(10);
        flowPane.setVgap(5);
        flowPane.setAlignment(Pos.TOP_CENTER);

        // Create a ListChangeListener for our carsList. This allows us to perform some actions whenever an item is added
        // to or removed from the list. For our example, we will only do something when a new Car is added.
        carsList.addListener(new ListChangeListener<Car>() {
            @Override
            public void onChanged(Change<? extends Car> c) {

                System.out.println(carsList.size());
                // Get the first change
                c.next();

                // If an item was added to the list...
                if (c.wasAdded()) {

                    // Create a new button and add it to the FlowPane
                    // The Change (c) provides access to a List of items that were added during this change. Since we
                    // are only going to add one Car at a time, we only need to get the first item from the AddedSubList
                    Button button = new Button(c.getAddedSubList().get(0).getName());
                    button.setGraphic(c.getAddedSubList().get(0).getIcon());
                    button.setOnAction(event -> {
                        // The code to be executed when this button is clicked goes here
                    });

                    // Add the button to our FlowPane
                    flowPane.getChildren().add(button);
                }

            }
        });

        // Now we need a Button that will add a new car to the List
        Button button = new Button("Add Car");
        button.setOnAction(event -> {
            // We'll just add a random car to the carsList
            carsList.add(new Car("Car #" + (carsList.size() + 1), new ImageView("icon.png")));
        });

        // Add our FlowPane and Button to the root layout
        root.getChildren().addAll(button, flowPane);

        primaryStage.setScene(new Scene(root, 550, 250));
        primaryStage.show();
    }
}

class Car {

    private final String name;
    private final ImageView icon;

    public Car(String name, ImageView icon) {
        this.name = name;
        this.icon = icon;
    }

    public String getName() {
        return name;
    }

    public ImageView getIcon() {
        return icon;
    }
}

<小时/>

The Results: (after clicking the "Add Car" button a few times)