我想拥有具有不同状态的实体(控件或属性),它们可以由 CSS 着色。
例如,以 TextField 为例,它可以包含两种值,正常值和错误值。一旦它包含错误的值,它应该显示为“红色”。但是实际的颜色应该可以从 CSS 中定义。
这有可能实现吗?
我发现了很多Styleable*
接口或类,但它们看起来可以接受任何样式。
我可以写实体,它从价值中派生出它的风格吗?
您可以使用Node.pseudoClassStateChanged
:
TextField tf = new TextField();
final PseudoClass shortText = PseudoClass.getPseudoClass("short");
final PseudoClass longText = PseudoClass.getPseudoClass("long");
tf.textProperty().addListener((observable, oldValue, newValue) -> {
tf.pseudoClassStateChanged(shortText, false);
tf.pseudoClassStateChanged(longText, false);
if (newValue!=null && !newValue.isEmpty()) {
if (newValue.length() < 5) {
tf.pseudoClassStateChanged(shortText, true);
} else {
tf.pseudoClassStateChanged(longText, true);
}
}
});
使用这样的 CSS:
.text-field:short {
-fx-background-color: #ffaaaa;
}
.text-field:long {
-fx-background-color: #aaffaa;
}
虽然说实话,我并不完全确定 Style Class 与 Pseudo Class 的优缺点是什么。
在特定属性的更改事件中,您可以更改该实体(控件或属性)的样式类以应用多种颜色。
为此,您需要在 CSS 中添加多种颜色样式,然后您可以使用以下代码更改样式类。
textfield.getStyleClass().add("red");
例如,在 TextField 的动作事件中,您可以检查用户在 TextField 中输入的值,如果输入的值是“错误的”,则获取文本字段的对象并使用上面的代码为其设置样式类名称。