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>

我希望在選擇第一行時，只有第一行變為綠色。 實際結果是當我選擇第一行，第一行和第19行變為綠色時。

Answer 1

您的方法存在3個問題：

1. 如果單元格為空或該項目更改為其他單元格，則永遠不會重置單元格的外觀。
2. 如果cellFactory發生更改， TableView通常不會重新創建單元格。 每個cellFactory 在創建創建該單元格的cellFactory時根據突出顯示的單元格選擇突出顯示一個單元格 。 即使重新創建了單元格，您仍然會在其他列中看到突出顯示的單元格，因為您永遠都不會回到不突出顯示單元格的cellFactory 。
3. 重點和選定的單元格可能會有所不同。

如果使用CSS樣式表，則進行這些修改要簡單得多，因為TableCell在獲得焦點時會被分配一個偽類，從而使您只需定義焦點單元格的樣式即可，而不必擔心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分配，以使上述方法起作用。

要僅風格特異TableView s這個方式，你可以如樣式類添加到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("");
}