如何更改 TreeView (JavaFX) 中单个项目的背景颜色？

Question

我是第一次使用 JavaFX，到目前为止，我设法完成了我想做的所有其他事情，但现在我陷入了死胡同。我正在使用Treeview 来显示对象列表，每个对象都有一个数值（使用了多少次），我想根据使用计数器在树视图上单独更改每个对象的背景颜色。

即如果一个物体被使用了 100 次，它应该是红色的，而使用较少的物体则更像是一个黄色的温度读数器。

非常感谢任何帮助！

谢谢， 安德烈亚斯

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);
    }
}

Answer 2

自定义cellFactory 可用于根据显示的项目更改Background。为简单起见，这假设树项包含 IntegerPropertys：

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));
            }

        }

    });

我还对 green 通道的值使用指数函数来允许所有非负的int 值。

更复杂的选色算法可以参考这个页面http://www.tannerhelland.com/4435/convert-temperature-rgb-algorithm-code/