java - JavaFX 使用 Vbox 作为产品列表的容器

Question

我想创建 POS 应用程序。我很欣赏 odoo erp 创建要搜索的产品列表的方式。每个产品都列在带有图像和一些产品信息的容器中。我想在 JavaFX 中使用 TilePane -> Hbox -> ImageView + Vbox -> 每个产品的标签来做到这一点。所以，我需要专家的建议。4000+ 产品列表的性能保证。有什么方法可以在 JavaFX 中正确实现

这是控制器代码中的一个块：

/*   The code get a list of products from database using JPA repositories
    Create a filtredlist in to filter list based on textfiled
   for each product :
      create a Hbox node that contains ImageView and Vbox witch contains some lables
    add the Hbox to Tilepane
*/ 

@FXML
TilePane tpListProduct;
@FXML
JFXTextField tfsearch;

  private void initData() {
        List<Product> productList = Lists.newArrayList(productRepository.findAll());
        FilteredList<Product> filtredList = new FilteredList(FXCollections.observableArrayList(productList), e -> true);


        ObjectProperty<Predicate<Product>> productFiltredPredicate = new SimpleObjectProperty<>();
        productFiltredPredicate.bind(Bindings.createObjectBinding(() ->
                        product -> {
                            if (Objects.equals(product.getNameFR(), null))
                                return false;
                            if (product.getNameFR().toLowerCase().contains(tfsearch.getText().trim().toLowerCase()))
                                return true;
                            else return false;
                        }
                , tfsearch.textProperty()));


        filtredList.predicateProperty().bind(productFiltredPredicate);


        productFiltredPredicate.addListener((observable, oldValue, newValue) -> {
            tpListProduct.getChildren().clear();
            filtredList.forEach(product -> {
                tpListProduct.getChildren().add(createProductTile(product));
            });
        });


    }

    private Node createProductTile(Product product) {
        String cssLayout = "-fx-border-color: red;\n" +
                "-fx-border-insets: 5;\n" +
                "-fx-border-width: 3;\n" +
                "-fx-border-style: dashed;\n";
        HBox hBox = new HBox();
        hBox.setStyle(
                cssLayout
                );
        VBox vBox = new VBox();
        ImageView iv = new ImageView();
        iv.setFitWidth(200);
        iv.setFitHeight(200);
        //  iv.setViewport(new Rectangle2D(2, 2, 2, 2));

        if (product.getImagePath() != null)
            iv.setImage(new Image("file:///" + product.getImagePath()));

        vBox.getChildren().add(new Label(product.getNameFR()));
        hBox.getChildren().addAll(iv, vBox);
        hBox.setOnMouseClicked(event -> {
            System.out.println(event.getSource());
        });

        return hBox;
    }

标签： javajavafxodoodesktop-application