JavaFX:使用自定义样式表将文本颜色应用于 TableCell？

Question

JavaFX:如何使用自定义样式表将文本颜色应用于 TableCell？

当我直接在我的 CellFactory 中使用 setTextFill() 时它工作正常，但我想使用外部 CSS 文件应用自定义样式。我可以证明我的 CSS 类已应用，因为字体变为粗体。但是，未应用 CSS 文件的字体颜色。

@Override
protected void updateItem(MyObject item, boolean empty) {
    super.updateItem(item, empty);

    if (null != item) {        
        // EITHER:
        this.getStyleClass().add("styleImportant"); // Does NOT set color.

        // OR:
        this.setTextFill(Color.RED); // Does set color.
    }
    else {
        this.getStyleClass().remove("styleImportant");
    }

}

样式表:

.styleImportant {
    -fx-font-weight: bold; /** Does work. */
    -fx-text-fill: red; /** Does NOT work. */
}

它与 CSS 选择器的特殊性有某种关系，但我没有设法找到任何有效的设置。

---

编辑:我设法使用 CSS 应用自定义文本颜色和背景颜色。我的实现现在使用 Label 包装在 VBox 中，以使背景颜色填充整个表格单元格。但是，在删除自定义样式时，我仍然遇到一些背景颜色未被清除的问题。

有没有比应用清晰样式更好的解决方案？

colExample.setCellFactory(new Callback<TableColumn<Example, Example>, TableCell<Example, Example>>() {
  @Override
  public TableCell<Example, Example> call(TableColumn<Example, Example> tableColumn) {
     return new TableCell<Example, Example>() {
        private VBox container;
        private Label text;

        // Anonymous constructor
        {
           this.container = new VBox();
           this.text = this.createLabel();

           this.container.getChildren().add(this.text);
           this.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
           this.setStyle("-fx-padding: -1 -1 -1 -1;"); // Remove padding from cell

           this.setGraphic(this.container);
        }

        private final Label createLabel() {
           Label label = new Label();

           VBox.setVgrow(label, Priority.ALWAYS);
           label.setMaxWidth(Double.MAX_VALUE);
           label.setMaxHeight(Double.MAX_VALUE);
           label.setAlignment(Pos.CENTER);

           return label;
        }

        @Override
        protected void updateItem(Example example, boolean empty) {
           super.updateItem(example, empty);

           // Reset column styles
           if (null != this.text && null != this.text.getStyleClass()) {
              String[] possibleStyles = new String[] { "styleImportant", "clearStyle" };

              for (String style: possibleStyles) {
                 if (this.text.getStyleClass().contains(style)) {
                    // Will not reset background, even though style is removed?
                    this.text.getStyleClass().remove(style);
                 }
              }

              // Apply reset style to clear background color
              this.text.getStyleClass().add("clearStyle");
           }

           if (null != example) {
              this.text.setText(example.getContent());

              if (example.isImportant()) {
                 this.text.getStyleClass().add("styleImportant");
              }
           }
        }
     };
  }
});

我的样式表:

/** Keep black text color, when user selects row */
.table-row-cell:focused {
   -fx-dark-text-color: #000000;
   -fx-mid-text-color: #000000;
   -fx-light-text-color: #000000;
}

/** Style to reset background color */
.clearStyle {
   -fx-background-color: transparent;
}

/** Style for important cells */
.styleImportant {
   /** Red text color on any background */
   -fx-dark-text-color: #FF0000;
   -fx-mid-text-color: #FF0000;
   -fx-light-text-color: #FF0000;

   -fx-background-color: #FF9999;
}

Answer 1

正如 José 在他的回答中指出的那样，如果您在单元格中设置图形，您(可能)需要将 css 样式类应用到图形(取决于图形是什么)。如果您只是调用 setText(...)，您的代码应该可以工作。

设置为图形的 Label 不从表格单元格继承 -fx-text-fill 的原因是 Label 还有 -fx-text-fill 的设置。在默认样式表中，TableCell 和 Label 都有如下设置:

-fx-text-fill: -fx-text-background-color ;

fx-text-background-color 是 looked-up color定义为阶梯，如下所示:

-fx-text-background-color: ladder(
    -fx-background,
    -fx-light-text-color 45%,
    -fx-dark-text-color  46%,
    -fx-dark-text-color  59%,
    -fx-mid-text-color   60%
);

这个(相当复杂的)设置意味着 -fx-text-background-color 的值取决于 -fx-background 的值。如果 -fx-background 小于最大强度的 45%(即黑暗)，则 -fx-text-background-color 的值设置为 -fx-light-text-color。如果 -fx-background 强度介于 46% 和 59% 之间，则该值等于 -fx-drak-text-color。如果是 60% 或更多，则设置为 -fx-mid-text-color。这里的想法是文本颜色会自动调整以适应背景以保持可见。 -fx-dark-text-color、-fx-mid-text-color 和 -fx-light-text-color 的值> 分别设置为黑色、深灰色 (#333) 和白色。

由于 Label 不会覆盖 -fx-text-background-color 的值，您只需更改表格的值即可实现所需的效果细胞:

.styleImportant {
    -fx-text-background-color: red ;
}

现在这会覆盖表格单元格的查找颜色值，并且由于单元格内的图形不会覆盖该值本身，它会从单元格继承它。

一种更复杂的方法是重新定义 -fx-[light|mid|dark]-text-color。这样做的好处是，如果您更改背景，颜色会适当调整:特别是如果选择了单元格，您可以确保文本保持可见:

.styleImportant {
    -fx-light-text-color: white ;
    -fx-mid-text-color:   #c00 ;
    -fx-dark-text-color:  red ;
}