javafx 8：如何在SlectedItemProperty更改时更新TreeView中的TreeCell

Question

我有服装TreeCell的树视图。 树单元是自定义的，看起来像下面的图像。

在右侧，我选择了一个树单元格或树项。 如您所见，每个单元格的左侧都有手的图像视图。 默认情况下它是黑色的，但是我想用白色图标代替它。 如上面的模拟。

我怎样才能做到这一点？

我希望所有选中的文本和图像视图图标都变为白色。 最后选择的树单元恢复为正常的黑色。

我的树单元代码如下。

private final class AlertTreeCell extends TreeCell<AlertListItem> {

    private Node cell;
    private Rectangle rectSeverity;
    private Label mIncedentname;
    private Label mAlertTitle;
    private Label mSentTime;
    private Label mSender;
    private ImageView ivCategory;
    public AlertTreeCell() {

        FXMLLoader fxmlLoader = new FXMLLoader(
                MainController.class
                        .getResource("/fxml/alert_list_item.fxml"));
        try {
            cell = (Node) fxmlLoader.load();
            rectSeverity = (Rectangle) cell.lookup("#rectSeverity");
            mIncedentname = (Label) cell.lookup("#lblIncidentName");
            mAlertTitle = (Label) cell.lookup("#lblAlertTitle");
            mSentTime = (Label) cell.lookup("#lblSentTime");
            mSender = (Label) cell.lookup("#lblSender");
            ivCategory = (ImageView) cell.lookup("#ivCategory");
        } catch (IOException ex) {
            mLogger.error(ex.getLocalizedMessage(),ex);
        }           
    }

    @Override
    public void updateItem(AlertListItem item, boolean empty) {
        super.updateItem(item, empty);
        if (empty) {
            setText(null);
            setGraphic(null);
        } else {
            setText(null);
             mAlertTitle.setText(item.getEvent());
             mIncedentname.setText(item.getHeadline());                                   
             mSentTime.setText(MyUtils.getListDateFormattedString(item.getReceivedTime()));
             mSender.setText(item.getSenderName());
             Image image = new Image("/images/ic_cat_" + item.getCategoryIcon().toLowerCase() + "_black.png");
             if(image != null){
                ivCategory.setImage(image);
             }
             if(item.getSeverity() != null){
                 String severityColor = item.getSeverity().toString();
                 String severityColorCode = null;
                 if(severityColor != null) {
                     SeverityColorHelper severityColorHelper = new SeverityColorHelper();
                     severityColorCode = severityColorHelper.getColorBySeverity(AlertInfo.Severity.fromValue(severityColor));
                 }
                 rectSeverity.setFill(Color.web(severityColorCode,1.0) );
             }
             final AlertTreeCell this$=this;
             setOnMouseClicked(new EventHandler<MouseEvent>() {
                @Override
                public void handle(MouseEvent event) {
                     if(event.getClickCount()==1){                                
                            Node cell$ = this$.getGraphic();
                            ImageView ivCategory$ = (ImageView) cell.lookup("#ivCategory");
                            Image image = new Image("/images/ic_cat_" + item.getCategoryIcon().toLowerCase() + "_white.png");
                            if(image != null){
                                ivCategory$.setImage(image);
                            }                                                           
                     }

                }
             });
             this$.
             setGraphic(cell);

        }
    }
}

问题是正确选择并添加了新的白色图标，但是如何将最后选择的树项目的图像视图改回黑色图标。 实际上我有两个相同类型的彩色图像。 一个是黑色，同一张图片是白色。 在选择时，我希望将图像和文本更改为白色，并将所有其他树项目更改为黑色文本和黑色图标。

Answer 1

我不太确定鼠标处理程序是否应该在选择时更改图标：如果是，请将其删除。 不要使用鼠标处理程序来检测选择（例如，如果用户使用键盘在树中导航会怎样？）。

在构造函数中，将侦听器添加到selectedProperty ，然后相应地更改项目：

public AlertTreeCell() {

    FXMLLoader fxmlLoader = new FXMLLoader(
            MainController.class
                    .getResource("/fxml/alert_list_item.fxml"));
    try {
        cell = (Node) fxmlLoader.load();
        rectSeverity = (Rectangle) cell.lookup("#rectSeverity");
        mIncedentname = (Label) cell.lookup("#lblIncidentName");
        mAlertTitle = (Label) cell.lookup("#lblAlertTitle");
        mSentTime = (Label) cell.lookup("#lblSentTime");
        mSender = (Label) cell.lookup("#lblSender");
        ivCategory = (ImageView) cell.lookup("#ivCategory");

        this.selectedProperty().addListener((obs, wasSelected, isNowSelected) -> {
            String col ;
            if (isNowSelected) {
                col = "_black.png" ;
            } else {
                col = "_white.png" ;
            }
            if (getItem() != null) {
                Image img = new Image("/images/ic_cat_" + item.getCategoryIcon().toLowerCase() + col);
                ivCategory.setImage(img);
            }
        });

    } catch (IOException ex) {
        mLogger.error(ex.getLocalizedMessage(),ex);
    }           
}

在updateItem(...)方法中，只需检查isSelected()并在此处相应地设置图像，但没有侦听器。