JavaFX:如何使用自定义样式表将文本颜色应用于TableCell?
当我setTextFill()
直接在CellFactory中使用时,它工作正常,但我想使用外部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;
}
正如José在回答中指出的那样,如果您要在单元格中设置图形,则(可能)需要将css样式类应用于图形(取决于该图形是什么)。如果您只是简单地调用setText(...)
您的代码就可以。
Label
不能将图形集作为-fx-text-fill
表格继承自表格单元格的原因是该图形集Label
还具有的设置-fx-text-fill
。在默认的样式表,都TableCell
与Label
如下有这一套:
-fx-text-fill: -fx-text-background-color ;
fx-text-background-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
s。这样做的好处是,如果您更改背景,则颜色会适当调整:特别是如果选择了单元格,则可以确保文本保持可见:
.styleImportant {
-fx-light-text-color: white ;
-fx-mid-text-color: #c00 ;
-fx-dark-text-color: red ;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句