带有 -fx-background-color 的 JavaFX setStyle 仅绘制 TextArea 的边缘答案

【问题标题】：JavaFX setStyle with -fx-background-color paints only the edges of a TextArea带有 -fx-background-color 的 JavaFX setStyle 仅绘制 TextArea 的边缘
【发布时间】：2016-06-17 08:59:30
【问题描述】：

所以，我有一个动态创建的TextArea 列表，我想根据我选择的CheckBox 来绘制它们。目前，它只为边框着色，而不是TextArea 的内部。

这是我的代码：

if (cb.isSelected()) {
  ta.setStyle("-fx-background-color:#38ee00;");
}
if (cb2.isSelected()) {
  ta.setStyle("-fx-background-color:orangered;");
}
if (!cb2.isSelected() && !cb.isSelected()) {
  ta.setStyle("-fx-background-color:white;");
}

这是它带来的结果：

如果您需要任何其他信息，请随时告诉我。

【问题讨论】：

标签： java css javafx

【解决方案1】：

您实际上需要设置.content 区域的样式，该区域是TextArea (see CSS Reference: TextArea - Substructure) 的子区域。

您可以使用lookup 获取该节点，但只能在应用皮肤之后，这在布局之前不会发生。然后，您可以执行以下操作：

Region content = (Region) ta.lookup(".content");
content.setStyle("-fx-background-color:orangered;");

另一种方法是使用 CSS 样式表并更改 TextArea 的类（前提是只使用有限数量的颜色）：

.text-area.color-orangered .content {
     -fx-background-color: orangered;
}

.text-area.color-white .content {
     -fx-background-color: white;
}

.text-area.color-green .content {
    ...

// remove old class for coloring
ta.getStyleClass().removeIf(s -> s.startsWith("color-"));

// add new class
ta.getStyleClass().add("color-orangered");

【讨论】：

【解决方案2】：

您要查找的 CSS 样式类是 .text-area .content。您有多种选择来影响此样式类，一种可能是使用PseudoClass，这使您能够使用 CSS 选择器。

Main.java

public class Main extends Application {


    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = new BorderPane();
            root.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            // Add the CSS style class
            TextArea ta = new TextArea();
            ta.getStyleClass().add("my-text-area");


            ChoiceBox<String> cb = new ChoiceBox<String>(FXCollections.observableArrayList("green", "orangered"));
            cb.valueProperty().addListener(new ChangeListener<String>() {

                @Override
                public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
                // On selection, change the pseudo class of the TextArea
                ta.pseudoClassStateChanged(PseudoClass.getPseudoClass(newValue), true);
                }
            });

            root.setCenter(ta);
            root.setBottom(cb);

            Scene scene = new Scene(root,400,400);

            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

application.css

.my-text-area:orangered .content {  
   -fx-background-color: orangered ;  
}  

.my-text-area:green .content {  
   -fx-background-color: green ;  
}

【讨论】：