在TableCell中更改背景颜色会去掉选中颜色并使其难以阅读。

Question

我做了这个更改：

如何在保留交替行颜色的情况下更改TableView中TableColumn的背景？

未被选中时看起来很好：

:

然而当您选择一个单元格时：

看起来是这样的，但我希望在选择/聚焦时它能正常工作。

我相当确定我需要使用一个样式类，但是，我不知道你需要保留一个TableCell的其他特性的属性，只是背景颜色不同。另外，我应该在单元格级别还是列级别应用样式类？

更新

我的css文件： custom.css

.customhighlight .table-cell {
    -fx-background-color: rgba(0, 128, 0, 0.3);
}

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

如何将此应用于一列？

我尝试过

table.getStyleClass().add("customhighlight");

然而，它改变了整个表格。

我尝试过

tableCol.getStyleClass().add("customhighlight");

我尝试了它，但没有任何作用。

我还在单元格级别尝试了它...

- trilogy

Answer 1

如果我理解正确，您想要：

- 使某一列的所有单元格都具有半透明的背景。 - 当选择这些单元格时，它们应该看起来像默认的modena.css所选的外观。

换句话说，用那种深蓝色替换半透明的背景，并使文本变为白色。

您应该为适当的单元格添加样式类，然后可以在CSS文件中使用它。以下是一个小例子： Main.java

import static java.util.stream.Collectors.collectingAndThen;
import static java.util.stream.Collectors.toCollection;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;
import javafx.util.Pair;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        var table = System.getProperties().stringPropertyNames().stream()
                .map(name -> new Pair<>(name, System.getProperty(name)))
                .collect(collectingAndThen(toCollection(FXCollections::observableArrayList), TableView::new));
        table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
        table.getSelectionModel().setCellSelectionEnabled(true); // Not sure if you're using cell or row selection

        var keyCol = new TableColumn<Pair<String, String>, String>("Key");
        keyCol.setCellValueFactory(new PropertyValueFactory<>("key"));
        table.getColumns().add(keyCol);

        var valCol = new TableColumn<Pair<String, String>, String>("Value");
        valCol.setCellValueFactory(new PropertyValueFactory<>("value"));
        valCol.setCellFactory(tc -> new TableCell<>() {
            { getStyleClass().add("highlighted-table-cell"); }
            @Override protected void updateItem(String item, boolean empty) {
                super.updateItem(item, empty);
                if (empty || item == null) {
                    setText(null);
                } else {
                    setText(item);
                }
            }
        });
        table.getColumns().add(valCol);

        var scene = new Scene(table, 600, 400);
        scene.getStylesheets().add("Main.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

Main.css

.highlighted-table-cell {
    -fx-background-color: rgba(0, 128, 0, 0.3);
}

/* Needed by cell selection mode */
.highlighted-table-cell:selected {
    -fx-background-color: inherit;
}

/* Needed by row selection mode */
.table-row-cell:selected > .highlighted-table-cell {
    -fx-background-color: inherit;
}

- Slaw

Answer 2

类似于

table.getSelectionModel().setCellSelectionEnabled(true);

.table-cell:selected {
    -fx-background-color: white;
    -fx-text-fill: black;
}

应该可以工作

- Tim Wickstrom

---

这就是问题所在，我必须使用 getStyleClass.add("something.css") 而不是 setStyle(String)，因为你不能在代码中进行目标定位（或者至少很麻烦）。 - trilogy

这应该能解决问题。显然，根据您的应用程序更改颜色为任何有意义的颜色。 - Tim Wickstrom

Answer 3

你可以通过订阅所选属性，在TableCell的updateItem()方法中切换样式：

String style = "-fx-background-color: rgba(0, 128, 0, 0.3);";
setStyle(style);
selectedProperty().addListener((observableValue, value, old) -> {
    if (value) {
        setStyle(style);
    } else {
        setStyle(null);
    }
});

或者通过使用CSS文件：

.table-cell {
    -fx-background-color: rgba(0, 128, 0, 0.3);
}

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

这将会给表格中的所有单元格上色。如果你只想给单独一列上色，我建议使用自定义类：

getStyleClass().add("customhighlight");

这样修改CSS文件：

.table-cell.customhighlight {
    -fx-background-color: rgba(0, 128, 0, 0.3);
}

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

所有解决方案都使用默认的选择样式来选择单元格，通过重置背景颜色来实现。结果看起来像这样：

- Samuel Philipp

---

如何将CSS文件应用于某一列？我知道可以通过table.getStyleClass().add("customhighlight");来更改整个表格，但如何仅影响一列呢？我尝试对一列进行操作，但没有成功。 - trilogy

如果您使用 getStyleClass().add("customhighlight"); 将类添加到表格单元格中，则必须删除两个 CSS 类之间的空格，因为它们位于同一元素上：.customhighlight.table-cell。或者您可以将 .table-cell 替换为 .customhighlight。 - Samuel Philipp