ListView javafx中的自定义文本答案

【问题标题】：Customized Text in ListView javafxListView javafx中的自定义文本
【发布时间】：2020-10-01 13:23:22
【问题描述】：

我想在 JavaFX 中设计一个自定义列表视图，我需要添加一些不同大小的不同字体，但我的代码不起作用。

这是我的 updateItem 函数：

list.setCellFactory(param -> new ListCell<String>() {
        @Override
        protected void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);
            if (empty) {
                setText(null);
                setGraphic(null);
            } else {
                ImageView imageView = new ImageView();
                switch (item) {
                    case "Back":
                        imageView.setImage(image1);
                        System.out.println(imageView.getImage());
                        break;
                    case "Shop":
                        imageView.setImage(image0);
                        break;
                }
                imageView.setFitHeight(100);
                imageView.setFitWidth(100);
                Text text = new Text(item);
                text.setFont(Font.font("B Aria", 500));
                Text text1 = new Text("100");
                text1.setFont(Font.font("Arial", 200));
                setText(text.getText() + "\n" + text1.getText());
                setGraphic(imageView);
                setStyle("-fx-background-color: white");
                setStyle("-fx-text-fill:#5aa6f0;");
            }
        }
    });

如您所见，两个文本的字体和大小相同：

我该如何解决这个问题？谢谢。

【问题讨论】：

标签： java listview javafx text

【解决方案1】：

单元格的text 属性只是一个字符串：它不携带任何样式或字体信息。所以你在这里所做的就是将单元格的文本设置为两个字符串的连接，它们之间有一个换行符。文本的样式完全由单元格本身设置的样式决定（即#5aa6f0 的文本填充）。

要在此处实现您想要的，您需要将两个 Text 对象及其样式显示为 graphic 的一部分。由于您已经将图像视图作为图形，因此您需要将它们组合起来：例如您可以拥有一个包含两个Texts 的VBox，以及一个包含图像和VBox 的HBox。您可能需要对布局进行试验才能完全按照您的意愿进行布局，但这应该会给您一些想法：

list.setCellFactory(param -> new ListCell<String>() {

    private final VBox textContainer = new VBox();
    private final Text itemText = new Text();
    private final Text valueText = new Text();
    private final HBox graphic = new HBox();
    private final ImageView imageView = new ImageView();

    {
        textContainer.getChildren().addAll(itemText, valueText);
        graphic.getChildren().addAll(imageView, textContainer);
        // may be better to put styles in an external CSS file:
        itemText.setFill(Color.web("#5aa6f0"));
        itemText.setFont(Font.font("B Aria", 500));
        valueText.setFill(Color.web("#5aa6f0"));
        valueText.setFont(Font.font("Arial", 200));
        setStyle("-fx-background-color: white;");
        imageView.setFitHeight(100);
        imageView.setFitWidth(100);
    }

    @Override
    protected void updateItem(String item, boolean empty) {
        super.updateItem(item, empty);
        if (empty) {
            setGraphic(null);
        } else {
            switch (item) {
                case "Back":
                    imageView.setImage(image1);
                    break;
                case "Shop":
                    imageView.setImage(image0);
                    break;
            }
            itemText.setText(item);
            valueText.setText("100");
            setGraphic(graphic);
        }
    }
});

【讨论】：