JavaFX TextField的-fx-text-fill样式失效问题求助

场景描述 #

Scene 包含一个 VBox，VBox 内有一个 HBox，HBox 包含3个子节点。每个子节点都是继承自 StackPane 的自定义类 S1，内部包含一个 TextField。HBox 通过 setStyle 设置样式为 -fx-background-color:magenta;，所有 TextField 都通过 setStyle 设置 -fx-text-fill:yellow;-fx-background-color:pink;。第一个 S1 的样式为空，第二个 S1 设置 -fx-background-color:green;，第三个 S1 设置 -fx-font-size:20;。

代码实现 #

public class Test extends Application {  
  static public void main(String[] args) { Application.launch(args); }
  public Test(){ } 
  public class S1 extends StackPane {
    public S1(String style, String text) {
      TextField textField = new TextField(text);
      textField.setEditable(false);
      textField.setStyle("-fx-text-fill:yellow;-fx-background-color:pink;");
      getChildren().setAll(textField);
      setStyle(style);
    }
  }
  @Override
  public void start(Stage stage) {
    VBox vb = new VBox();
    stage.setScene(new Scene(vb, 600, 100));
    stage.show();
    vb.requestFocus();
    HBox hb1 = new HBox(new S1("", "AA "), new S1("-fx-background-color:green;", "BB"), new S1("-fx-font-size:20;", "CC"));
    hb1.setStyle("-fx-background-color:magenta;");
    vb.getChildren().add(hb1);
  }
  @Override
  public void stop() { }
}

预期与实际结果 #

• 预期结果：3个 TextField 的文本均为黄色
• 实际结果：第一个 TextField 文本为黄色，后两个为黑色

提问背景 #

本人是退休汇编程序员，自学 Java 与面向对象编程，无法定位问题原因，想请教这是代码疏漏还是 BUG？

环境信息 #

Windows 11、Java jdk-17.0.4.1、javafx-sdk-20.0.2、Eclipse Version: 2021-12 (4.22.0)

问题原因与解决方案 #

这不是BUG，是代码中对JavaFX TextField样式属性的误用导致的。

JavaFX里，TextField的输入文本颜色不由-fx-text-fill控制，而是由-fx-text-inner-color属性决定。你给TextField设置的-fx-text-fill在第一个实例中生效，只是因为父节点S1没有样式时的意外继承效果；当S1设置了样式后，这种意外继承被打破，TextField就会显示默认的黑色文本。

解决方法很直接，把TextField样式里的-fx-text-fill:yellow替换成-fx-text-inner-color:yellow即可，修改后的S1构造函数代码如下：

public S1(String style, String text) {
  TextField textField = new TextField(text);
  textField.setEditable(false);
  // 替换文本颜色属性
  textField.setStyle("-fx-text-inner-color:yellow;-fx-background-color:pink;");
  getChildren().setAll(textField);
  setStyle(style);
}

修改后三个TextField的文本都会显示为黄色，符合预期。

补充说明：-fx-text-fill一般用于设置Label这类节点本身的文本颜色，而TextField、PasswordField这类带输入区域的控件，输入文本的颜色需要用专门的-fx-text-inner-color属性，这是JavaFX控件样式的常规规则。

内容的提问来源于stack exchange，提问作者GreySloth