重置/清除/取消选择选择框javaFX

Question

当用户在同一框中选择另一个选项时，我一直试图取消选择或清除选择框的值。当我选择一个汽车品牌，然后选择另一个汽车品牌时，所有选择都会显示，如果我选择相同的一个，图像将重复，第一个图像将留空，仅保留按钮...我已尝试/ setValue null/isVisible /setVisible/ 但按钮的空间仍然存在......我什至尝试做 getchildren 删除...我迷路了..

public class HelloController implements Initializable {
    private Stage stage;
    private Scene scene;
    private Parent root;

    @FXML private Label lbMake;
    @FXML private Label lbBody;
    @FXML private Label lbColor;
    @FXML private Label lbEngine;
    @FXML private Label lbPerformance;
    @FXML private Label lbPrice;

    @FXML private TilePane tilePaneMain;

    @FXML private ChoiceBox<String> cbMake;
    @FXML private ChoiceBox<String> cbColor;
    @FXML private ChoiceBox<String> cbPerformance;

    @Override
    public void initialize(URL url, ResourceBundle resourceBundle) {
        displayGallery();

        cbMake.getItems().addAll("Clear Choice","Aston Martin","BMW","Ferrari","Genesis","Hummer","Lamborghini","Lincoln","Lucid","Maserati","Maybach","McLaren","Rolls-Royce","Tesla");
        cbMake.setOnAction(this::getMake);

        cbColor.getItems().addAll("Clear Choice","black","blue","green","orange","red","white","yellow","gold");
        cbColor.setOnAction(this::getColor);

        cbPerformance.getItems().addAll("Clear Choice","2.3","2.5","2.7","3.0","3.6","3.8","4.2");
        cbPerformance.setOnAction(this::getPerformance);

    }


    // This is the constructors for the data.
    Cars car0 = new Cars("Aston Martin", "220000.00", "black", "8", "3.6", new ImageView(new Image(getClass().getResourceAsStream("/car0.jpg"))),"yes");
    Cars car1 = new Cars("Aston Martin", "220000", "blue", "8", "3.6", new ImageView(new Image(getClass().getResourceAsStream("/car1.jpg"))),"no");
    Cars car2 = new Cars("Aston Martin", "220000", "green", "8", "3.6", new ImageView(new Image(getClass().getResourceAsStream("/car2.jpg"))),"no");
    Cars car3 = new Cars("Aston Martin", "220000", "red", "8", "3.6", new ImageView(new Image(getClass().getResourceAsStream("/car3.jpg"))),"yes");
    Cars car4 = new Cars("Cadillac", "110000", "blue", "0", "4.8", new ImageView(new Image(getClass().getResourceAsStream("/car4.jpg"))),"no");
    Cars car5 = new Cars("Cadillac", "110000", "red", "0", "4.8", new ImageView(new Image(getClass().getResourceAsStream("/car5.jpg"))),"no");
    Cars car6 = new Cars("Maserati", "200000", "black", "8", "3.8", new ImageView(new Image(getClass().getResourceAsStream("/car6.jpg"))),"no");
    Cars car7 = new Cars("Maserati", "200000", "blue", "8", "3.8", new ImageView(new Image(getClass().getResourceAsStream("/car7.jpg"))),"no");
    Cars car8 = new Cars("Maserati", "200000", "red", "8", "3.8", new ImageView(new Image(getClass().getResourceAsStream("/car8.jpg"))),"no");
    Cars car9 = new Cars("Maserati", "200000", "white", "8", "3.8", new ImageView(new Image(getClass().getResourceAsStream("/car9.jpg"))),"yes");
    Cars car10 = new Cars("Lamborghini", "400000", "black", "10", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car10.jpg"))),"no");
    Cars car11 = new Cars("Lamborghini", "400000", "black", "10", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car11.jpg"))),"yes");
    Cars car12 = new Cars("Lamborghini", "400000", "blue", "10", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car12.jpg"))),"yes");
    Cars car13 = new Cars("Lamborghini", "400000", "green", "10", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car13.jpg"))),"no");
    Cars car14 = new Cars("Lamborghini", "400000", "white", "10", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car14.jpg"))),"no");
    Cars car15 = new Cars("Lamborghini", "400000", "yellow", "10", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car15.jpg"))),"no");
    Cars car16 = new Cars("McLaren", "365000", "yellow", "8", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car16.jpg"))),"no");
    Cars car17 = new Cars("McLaren", "365000", "blue", "8", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car17.jpg"))),"no");
    Cars car18 = new Cars("McLaren", "365000", "green", "8", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car18.jpg"))),"no");
    Cars car19 = new Cars("McLaren", "365000", "black", "8", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car19.jpg"))),"no");
    Cars car20 = new Cars("McLaren", "365000", "red", "8", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car20.jpg"))),"no");
    Cars car21 = new Cars("McLaren", "400000", "orange", "10", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car21.jpg"))),"yes");
    Cars car22 = new Cars("Ferrari", "400000", "black", "12", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car22.jpg"))),"yes");
    Cars car23 = new Cars("Ferrari", "400000", "blue", "12", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car23.jpg"))),"yes");
    Cars car24 = new Cars("Ferrari", "400000", "red", "8", "2.7", new ImageView(new Image(getClass().getResourceAsStream("/car24.jpg"))),"no");
    Cars car25 = new Cars("Ferrari", "400000", "white", "12", "2.5", new ImageView(new Image(getClass().getResourceAsStream("/car25.jpg"))),"yes");
    Cars car26 = new Cars("Ferrari", "400000", "white", "8", "2.7", new ImageView(new Image(getClass().getResourceAsStream("/car26.jpg"))),"no");
    Cars car27 = new Cars("Ferrari", "400000", "yellow", "8", "2.7", new ImageView(new Image(getClass().getResourceAsStream("/car27.jpg"))),"no");
    Cars car28 = new Cars("Lincoln", "365000", "black", "12", "4.2", new ImageView(new Image(getClass().getResourceAsStream("/car28.jpg"))),"no");
    Cars car29 = new Cars("Lincoln", "365000", "gray", "12", "4.2", new ImageView(new Image(getClass().getResourceAsStream("/car29.jpg"))),"no");
    Cars car30 = new Cars("Hummer", "180000", "blue", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car30.jpg"))),"no");
    Cars car31 = new Cars("Hummer", "180000", "orange", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car31.jpg"))),"no");
    Cars car32 = new Cars("Hummer", "180000", "white", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car32.jpg"))),"no");
    Cars car33 = new Cars("Hummer", "180000", "gray", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car33.jpg"))),"no");
    Cars car34 = new Cars("Hummer", "180000", "white", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car34.jpg"))),"no");
    Cars car35 = new Cars("Lucid", "150000", "blue", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car35.jpg"))),"no");
    Cars car36 = new Cars("Lucid", "150000", "red", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car36.jpg"))),"no");
    Cars car37 = new Cars("Lucid", "150000", "white", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car37.jpg"))),"no");
    Cars car38 = new Cars("Rivian", "100000", "red", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car38.jpg"))),"no");
    Cars car39 = new Cars("Rivian", "100000", "blue", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car39.jpg"))),"no");
    Cars car40 = new Cars("Maybach", "400000", "red", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car40.jpg"))),"no");
    Cars car41 = new Cars("BMW", "250000", "gold", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car41.jpg"))),"no");
    Cars car42 = new Cars("Rolls-Royce", "500000", "gold", "0", "3.0", new ImageView(new Image(getClass().getResourceAsStream("/car42.jpg"))),"no");
    Cars car43 = new Cars("Genesis", "300000", "white", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car43.jpg"))),"yes");
    Cars car44 = new Cars("Tesla", "50000", "gray", "0", "2.3", new ImageView(new Image(getClass().getResourceAsStream("/car44.jpg"))),"no");

    // This is adding the constructor to an Array
    public ArrayList<Cars> getList() {
        ArrayList<Cars> carList = new ArrayList<>();
        return carList;
    }


    // This display the gallery to the opening scene.
    public void displayGallery() {
            int i =0;
        for (i = 0; i < getList().size(); i++) {
            ImageView imageView = new ImageView(new Image(getClass().getResourceAsStream("/car" + i + ".jpg")));
            imageView.setFitWidth(200);
            imageView.setFitHeight(155);
            Button btnGallery = new Button(Integer.toString(i),imageView);
            int finalI = i;
            btnGallery.setOnMouseEntered(event->{
                //btnGallery.setTextFill(Color.PURPLE);
                lbMake.setText(getList().get(finalI).getMake());
                lbColor.setText(getList().get(finalI).getColor());
                lbPerformance.setText(getList().get(finalI).getPerformance());
                lbPrice.setText(getList().get(finalI).getPrice());
                lbEngine.setText(getList().get(finalI).getCylinder());
                lbBody.setText(getList().get(finalI).getIsConvertable());

            });
            btnGallery.setOnMouseExited(event->{
                //btnGallery.setTextFill(Color.BLACK);
                lbMake.setText("");
                lbColor.setText("");
                lbPerformance.setText("");
                lbPrice.setText("");
                lbEngine.setText("");
                lbBody.setText("");


            });
            btnGallery.setOnAction(ae-> {
                    try {
                        String btnText = btnGallery.getText();
                        ArrayList<Cars> passList = getList();
                        FXMLLoader loader = new FXMLLoader(getClass().getResource("payment-view.fxml"));
                        root = loader.load();
                        PaymentController paymentController = loader.getController();
                        paymentController.displayName(btnText);
                        paymentController.getArrayList(passList);
                        stage = (Stage) ((Node) ae.getSource()).getScene().getWindow();
                        scene = new Scene(root);
                        stage.setScene(scene);
                        stage.show();

                    } catch (IOException ex) {
                        throw new RuntimeException(ex);
                    }
            });
            //tilePaneMain.getChildren().add(btnGallery);
        }
    }
// Display results but doesn't remove previous selection once another is made, if another enter //image description herechoice box selction is made,if images duplicate then empty buttons //remain.
    private void getMake(ActionEvent actionEvent) {
        for (int index = 0; index < getList().size();index++){
            if ((getList().get(index).getMake().contains(cbMake.getValue()))){
                getList().get(index).getImage().setFitWidth(175);
                getList().get(index).getImage().setFitHeight(150);
                Button btnMake = new Button();
                btnMake.setGraphic(getList().get(index).getImage());
                tilePaneMain.getChildren().add(btnMake);
            }
        }
    }
    private void getColor(ActionEvent actionEvent) {
        for (int index = 0; index < getList().size();index++){
            if ((getList().get(index).getColor().contains(cbColor.getValue()))){
                getList().get(index).getImage().setFitWidth(175);
                getList().get(index).getImage().setFitHeight(150);
                Button btnMake = new Button();
                btnMake.setGraphic(getList().get(index).getImage());
                tilePaneMain.getChildren().add(btnMake);
            }
        }
    }
    private void getPerformance(ActionEvent actionEvent) {
        for (int index = 0; index < getList().size();index++){
            if ((getList().get(index).getPerformance().contains(cbPerformance.getValue()))){
                getList().get(index).getImage().setFitWidth(175);
                getList().get(index).getImage().setFitHeight(150);
                Button btnMake = new Button();
                btnMake.setGraphic(getList().get(index).getImage());
                tilePaneMain.getChildren().add(btnMake);
            }
        }
    }
}

Answer 1

您想要做的是实现一组可应用于要显示的项目列表的过滤器。

您当前的方法存在问题

当前代码中的主要问题（可能还有其他问题）是：

• 在选择框选择的操作处理程序中，您需要先清除图库，然后再创建新项目。例如：

  tilePaneMain.getChildren().clear()

  。否则，您所做的就是保留先前选择的图库显示。
• 一个辅助问题是图库显示是基于节点（ImageView）的，您要多次将其添加到场景中。单个节点只能在场景图中出现一次，否则它将被默默地从原始位置删除。
• 在您的

  initialize

  方法中，您调用

  displayGallery

  来完成所有这些工作以创建具有自定义操作的按钮，然后您永远不会使用它们，因为此行已被注释掉：

  //tilePaneMain.getChildren().add(btnGallery);

  。

建议的解决方案：使用由过滤列表支持的 ControlsFX GridView

我会考虑使用 ControlsFX GridView。这是由

ObservableList

支持的，它可以是

FilteredList

，其中根据搜索建议的变化动态应用过滤器，类似于 ListView 中过滤的工作方式。

最好使用过滤列表并更新列表的过滤器以应用它们，即使您不使用 ControlsFX

GridView

。

示例解决方案

在此示例中，我将演示创建和应用过滤器以显示过滤后的图库中的项目。我不会使用 ControlsFX

GridView

（尽管这是首选），因为我不想在此处添加对第三方软件的依赖项。可以使用

ListView

代替

GridView

，但这可能不太接近您最终想要的行为，所以我不会在这里演示。

相反，我要做的是使用

TilePane

并过滤那里显示的内容。提供的过滤和实现比使用具有

ListView

或

GridView

等单元的虚拟化控件效率较低，但对于像这样的小示例来说是可以的。基于

TilePane

的解决方案也比虚拟化控制样式解决方案更接近您的原始实现。

我也不会使用 FXML 或外部 CSS 文件来使事情更加独立。

您需要为汽车经销商建模并为其提供 UI。

为此，您需要汽车类型：

record Car(int vin, String make, NamedColor namedColor) {}

汽车颜色的表示方法：

import javafx.scene.paint.Color;

record NamedColor(String name, Color color) implements Comparable<NamedColor> {
    private static final Color INDIA_INK = Color.web("#3c3f4a");

    public static final NamedColor BLACK = new NamedColor("black", INDIA_INK);
    public static final NamedColor BLUE = new NamedColor("blue", Color.BLUE);
    public static final NamedColor GREEN = new NamedColor("green", Color.GREEN);
    public static final NamedColor RED = new NamedColor("red", Color.RED);

    @Override
    public int compareTo(NamedColor o) {
        return name.compareTo(o.name);
    }

    @Override
    public String toString() {
        return name;
    }
}

一家拥有汽车的汽车经销商以及有关汽车的一些信息：

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

import java.util.List;

class Dealership {
    private final ObservableList<Car> cars = FXCollections.observableArrayList(
            new Car(1, "Aston Martin", NamedColor.BLACK),
            new Car(2, "Aston Martin", NamedColor.BLUE),
            new Car(3, "Aston Martin", NamedColor.GREEN),
            new Car(4, "Aston Martin", NamedColor.RED),
            new Car(5, "Cadillac", NamedColor.BLUE),
            new Car(6, "Cadillac", NamedColor.RED),
            new Car(7, "Maserati", NamedColor.BLACK),
            new Car(8, "Maserati", NamedColor.BLUE)
    );

    ObservableList<Car> getCars() {
        return cars;
    }

    List<NamedColor> getColors() {
        return cars.stream()
                .map(Car::namedColor)
                .distinct()
                .sorted()
                .toList();
    }

    List<String> getMakes() {
        return cars.stream()
                .map(Car::make)
                .distinct()
                .sorted()
                .toList();
    }
}

展示个人汽车的方式：

import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.control.Label;
import javafx.scene.layout.Background;
import javafx.scene.layout.StackPane;

class CarPanel extends StackPane {
    private static final String CSS_DATA_URL = "data:text/css,";
    private static final String CSS = CSS_DATA_URL + // language=CSS
            """
            .car-info .text {
                 -fx-font-size: 30px;
                 -fx-fill: cornsilk;
            }
            """;

    CarPanel(Car car) {
        getStylesheets().add(CSS);
        getStyleClass().add("car-info");

        setBackground(
                Background.fill(
                        car.namedColor().color()
                )
        );
        setPadding(new Insets(10));

        Label label = new Label(
                """
                Make: %s
                Vin: %d
                Color: %s
                """.formatted(car.make(), car.vin(), car.namedColor().name())
        );
        StackPane.setAlignment(label, Pos.TOP_LEFT);

        getChildren().add(label);
    }
}

经销店现有汽车的陈列室：

import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.layout.TilePane;

class Showroom extends TilePane {
    private final ObservableList<Car> cars;

    Showroom(ObservableList<Car> cars) {
        this.cars = cars;
        setHgap(10);
        setVgap(10);
        setPrefColumns(4);
        setPadding(new Insets(10));

        showCars();
        cars.addListener((ListChangeListener<Car>) c ->
                showCars()
        );
    }

    private void showCars() {
        // for debug info if you need it . . .
        // System.out.println(cars);

        getChildren().clear();
        cars.stream().map(CarPanel::new).forEach(
                carPane -> getChildren().add(carPane)
        );
    }
}

一些用于过滤显示的汽车的控件：

import javafx.collections.transformation.FilteredList;
import javafx.geometry.Insets;
import javafx.scene.Parent;
import javafx.scene.control.ChoiceBox;
import javafx.scene.layout.HBox;

class FilterControls {
    private final FilteredList<Car> filteredCars;
    private final ChoiceBox<String> makeChoice = new ChoiceBox<>();
    private final ChoiceBox<NamedColor> colorChoice = new ChoiceBox<>();
    private final HBox filterControls;

    FilterControls(Dealership dealership) {
        filteredCars = new FilteredList<>(dealership.getCars());

        makeChoice.getItems().add(null);
        makeChoice.getItems().addAll(dealership.getMakes());
        makeChoice.setOnAction(e -> updateFilter());

        colorChoice.getItems().add(null);
        colorChoice.getItems().addAll(dealership.getColors());
        colorChoice.setOnAction(e -> updateFilter());

        filterControls = new HBox(10, makeChoice, colorChoice);
        filterControls.setPadding(new Insets(10));
    }

    Parent getUI() {
        return filterControls;
    }

    private void updateFilter() {
        filteredCars.setPredicate(car ->
            isMakeMatch(car, makeChoice.getValue()) && isColorMatch(car, colorChoice.getValue())
        );
    }

    private boolean isMakeMatch(Car car, String make) {
        return make == null || make.equals(car.make());
    }

    private boolean isColorMatch(Car car, NamedColor color) {
        return color == null || color.equals(car.namedColor());
    }

    FilteredList<Car> getFilteredCars() {
        return filteredCars;
    }
}

还有一个将它们结合在一起的应用程序：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class CarDealershipApp extends Application {
    private final Dealership dealership = new Dealership();

    @Override
    public void start(Stage stage) throws Exception {
        FilterControls filterControls = new FilterControls(dealership);

        BorderPane layout = new BorderPane();
        layout.setTop(filterControls.getUI());
        layout.setCenter(
                new Showroom(
                        filterControls.getFilteredCars()
                )
        );

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

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

然后你会得到这样的结果：

所有汽车：

所有阿斯顿马丁：

全绿色阿斯顿马丁：