如何在TreeView（JavaFX）中更改单个项目的背景颜色？

Question

我第一次使用JavaFX，到目前为止我已经成功完成了我想要的一切，但现在我卡住了。我正在使用Treeview来显示对象列表，每个对象都包含一个数字值（表示使用次数），我想根据使用计数器单独更改树视图中每个对象的背景颜色。

例如，如果一个对象被使用了100次，它应该是红色的，而一个使用较少的对象则更接近黄色，类似于温度读数。

非常感谢您的任何帮助！

谢谢， 安德烈斯

- AndreasTh

---

当树形视图显示时，该值（项目使用次数）是否会更改，还是对于每个单独的项目都是固定的？ - James_D

目前不行，因为我正在从预先编写的日志文件中读取。将来，我会将日志文件替换为实时服务器并更改该值。 - AndreasTh

Answer 1

使用单元格工厂创建树单元格，其中styleProperty绑定到树中显示的项目的值：

import java.util.Random;

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TreeCell;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class TreeViewChangeBackgroundOnItem extends Application {

    private TreeView<Item> tree;

    @Override
    public void start(Stage primaryStage) {
        tree = new TreeView<>();
        tree.setRoot(new TreeItem<>(new Item(0)));
        tree.getRoot().setExpanded(true);
        Random rng = new Random();
        for (int i = 0 ; i < 10 ; i++) {
            tree.getRoot().getChildren().add(
                    new TreeItem<>(new Item(rng.nextInt(100))));
        }

        tree.setCellFactory(tv -> new TreeCell<Item>() {
            @Override
            protected void updateItem(Item item, boolean empty) {
                super.updateItem(item, empty);
                styleProperty().unbind();
                textProperty().unbind();
                if (empty) {
                    setText("");
                    setStyle("");
                } else {
                    textProperty().bind(item.valueProperty().asString("Value: %d"));
                    styleProperty().bind(Bindings.createStringBinding(() -> 
                        String.format("-fx-background: #ff%02x00;",
                                computeGreen(item.getValue())), 
                        item.valueProperty()));
                }
            }
        });

        Button inc = createAdjustButton("Increment", 1);

        Button dec = createAdjustButton("Decrement", -1);

        HBox buttons = new HBox(5, inc, dec);
        buttons.setAlignment(Pos.CENTER);
        buttons.setPadding(new Insets(10));

        BorderPane root = new BorderPane(tree, null, null, buttons, null);
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private int computeGreen(int value) {
        int clamped = Math.max(0, Math.min(value, 100));
        return 255-255*clamped/100 ;
    }

    private Button createAdjustButton(String text, int delta) {
        Button button = new Button(text);
        button.setOnAction(e -> adjust(delta));
        button.disableProperty().bind(tree.getSelectionModel().selectedItemProperty().isNull());
        return button ;
    }

    private void adjust(int delta) {
        Item selected = tree.getSelectionModel().getSelectedItem().getValue();
        selected.setValue(selected.getValue()+delta);
    }

    public static class Item {
        private final IntegerProperty value = new SimpleIntegerProperty();

        public Item(int value) {
            setValue(value);
        }

        public final IntegerProperty valueProperty() {
            return this.value;
        }


        public final int getValue() {
            return this.valueProperty().get();
        }


        public final void setValue(final int value) {
            this.valueProperty().set(value);
        }

    }

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

- James_D

---

谢谢你！我忘了检查单元格工厂！ - AndreasTh

Answer 2

可以使用自定义的cellFactory来根据显示的项目更改Background。这假设树形项目仅包含IntegerProperty以保持简单：

private final static double FACTOR = -Math.log(5d) * 0.01;


    treeView.setCellFactory((t) -> new TreeCell<IntegerProperty>() {

        @Override
        protected void updateItem(IntegerProperty item, boolean empty) {
            super.updateItem(item, empty);
            if (empty || item == null) {
                textProperty().unbind();
                backgroundProperty().unbind();
                setText(null);
                setBackground(null);
            } else {
                textProperty().bind(item.asString());
                backgroundProperty().bind(Bindings.createObjectBinding(()
                        -> new Background(new BackgroundFill(
                                        Color.color(1, Math.exp(FACTOR * item.get()), 0, 1),
                                        CornerRadii.EMPTY, Insets.EMPTY)), item));
            }

        }

    });

我还使用指数函数来确定绿色通道的值，以允许所有非负int值。

如果您需要更复杂的颜色选择算法，可以参考这个页面http://www.tannerhelland.com/4435/convert-temperature-rgb-algorithm-code/

- fabian

---

谢谢你的回答和链接！:-) - AndreasTh