JavaFX：如何正确着色所选 TableCell 的背景？

Question

我想在选择行时将行背景颜色更改为绿色。然而，虽然选择的行被改变了颜色，但是另外错误的行也被改变了颜色。 我不知道为什么？？

这是一个在 Windows 10 的 Intellij 中编码的 JavaFX 程序。

TestFXML.java：

public class TestFXML implements Initializable {
    @FXML
    TableView<ItemLog> table;
    @FXML
    TableColumn<ItemLog,String> column1,column2,column4;
    @FXML
    TableColumn<ItemLog,Number> column3;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        ObservableList<ItemLog> root=FXCollections.observableArrayList();
        root.addAll(
                new ItemLog("E0001","2.5㎟ XLPE", 1.2,"m"),
                new ItemLog("E0002","4㎟ XLPE",1.5,"m"),
                new ItemLog("E0003","6㎟ XLPE",2.0,"m"),
                new ItemLog("E0004","10㎟ XLPE",4.0,"m"),
                new ItemLog("E0005","16㎟ XLPE",6.2,"m"),
                new ItemLog("E0006","25㎟ XLPE",9.1,"m"),
                new ItemLog("E0007","35㎟ XLPE",14.5,"m"),
                new ItemLog("E0008","50㎟ XLPE",20.6,"m"),
                new ItemLog("E0009","70㎟ XLPE",31.2,"m"),
                new ItemLog("E00010","120㎟ XLPE",40.5,"m"),
                new ItemLog("E00011","150㎟ XLPE",55.3,"m"),
                new ItemLog("E00012","185㎟ XLPE",78.8,"m"),
                new ItemLog("E00013","240㎟ XLPE",96.0,"m"),
                new ItemLog("E0101","2.5㎟ PVC", 1.2,"m"),
                new ItemLog("E0102","4㎟ PVC",0.8,"m"),
                new ItemLog("E0103","6㎟ PVC",1.2,"m"),
                new ItemLog("E0104","10㎟ PVC",2.1,"m"),
                new ItemLog("E0105","16㎟ PVC",4.3,"m"),
                new ItemLog("E0106","25㎟ PVC",6.8,"m"),
                new ItemLog("E0107","35㎟ PVC",9.5,"m"),
                new ItemLog("E0108","50㎟ PVC",12.8,"m"),
                new ItemLog("E0109","70㎟ PVC",16.9,"m"),
                new ItemLog("E01010","120㎟ PVC",21.5,"m"),
                new ItemLog("E01011","150㎟ PVC",27.6,"m"),
                new ItemLog("E01012","185㎟ PVC",38.4,"m"),
                new ItemLog("E01013","240㎟ PVC",52.9,"m")
                );
        table.setItems(root);
        column1.setCellValueFactory(param -> param.getValue().code);
        column2.setCellValueFactory(param -> param.getValue().description);
        column3.setCellValueFactory(param -> param.getValue().price);
        column4.setCellValueFactory(param -> param.getValue().unit);
        //To change selected row color into green
        table.getFocusModel().focusedCellProperty().addListener((observable, oldValue, newValue) -> {
            if(newValue.getTableColumn() != null){
                newValue.getTableColumn().setCellFactory(param -> new TableCell(){
                    @Override
                    protected void updateItem(Object item, boolean empty) {
                        super.updateItem(item, empty);
                        if (empty) {
                            setText(null);
                            setGraphic(null);
                        }else{
                            setText(item.toString());
                            if(this.getIndex()==newValue.getRow()){
                                this.getTableRow().setStyle("-fx-background-color:green");
                            }
                        }
                    }
                });
            }
        });
    }
    private class ItemLog {
        StringProperty code=new SimpleStringProperty();
        StringProperty description=new SimpleStringProperty();
        DoubleProperty price=new SimpleDoubleProperty();
        StringProperty unit=new SimpleStringProperty();
        ItemLog(String code, String description, Double price, String unit) {
            this.code.set(code);
            this.description.set(description);
            this.price.set(price);
            this.unit.set(unit);
        }
    }
}

TestFXML.fxml：

<Pane prefHeight="414.0" prefWidth="602.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.TestFXML">
    <children>
       <TableView fx:id="table" maxHeight="1.7976931348623157E308" prefHeight="421.0" prefWidth="602.0">
         <columns>
           <TableColumn fx:id="column1" editable="false" prefWidth="100.0" text="A" />
           <TableColumn fx:id="column2" editable="false" prefWidth="300.0" text="B" />
             <TableColumn fx:id="column3" editable="false" prefWidth="100.0" text="C" />
             <TableColumn fx:id="column4" editable="false" prefWidth="100.0" text="D" />
        </columns>
      </TableView>
    </children>
</Pane>

我预计当我选择第一行时，只有第一行变为绿色。 实际结果是当我选择第 1 行时，第 1 行和第 19 行变为绿色。

Answer 1

您的方法存在 3 个问题：

1. 如果单元格变空或项目更改为其他项目，您永远不会重置单元格的外观。
2. 如果cellFactory 更改，TableView 通常不会重新创建单元格。每个cellFactory 都选择根据焦点单元格突出显示一个单元格在创建单元格的cellFactory 创建时。即使重新创建了单元格，您仍然会在其他列中看到突出显示的单元格，因为您永远不会改回不突出显示单元格的 cellFactory。
3. 重点单元格和选定单元格可能不同。

如果您使用 CSS 样式表，这些修改会简单得多，因为 TableCells 在获得焦点时会被分配一个伪类，这样您就可以只定义焦点单元格的样式而无需担心 cellFactory年代：

style.css

.table-cell:selected {
    -fx-background-color: green;
}

fxml

<Pane stylesheets="style.css" prefHeight="414.0" prefWidth="602.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.TestFXML">
    ...
</Pane>

从您的 java 代码中删除 cellFactory 分配，以使上述方法正常工作。

以这种方式仅设置特定 TableViews 的样式，例如给TableView添加样式类，根据TableView的样式类选择，例如

.my-tableview .table-cell:selected {
    -fx-background-color: green;
}

此外，组合不同的标准也变得更加简单，例如

/* style for selected and hovered cell */
.table-cell:selected:hover {
    -fx-background-color: yellow;
}

Answer 2

我自己找到了解决方案。修改：

if(this.getIndex()==newValue.getRow()){
    this.getTableRow().setStyle("-fx-background-color:green");
}

进入：

if(this.getIndex()==newValue.getRow()){
    this.getTableRow().setStyle("-fx-background-color:green");
}else{
    this.getTableRow().setStyle("");
}