将 CSS 样式属性绑定到 JavaFX 中的节点

Question

我想为我的项目设置一个模型，以便我的控制器可以相互通信。我希望它有一个 setter 和 getter，以便轻松访问任一类的某些节点的样式。

我的问题：是否可以将样式属性（例如“-fx-background-color: blue”）绑定到节点？

根据我的研究，我发现这对于标签的文本值绝对是可能的（由 James_D 在这里解释：JavaFX - How to use a method in a controller from another controller?），但我很难弄清楚用“setStyle”做类似事情的语法是什么" 会。

我目前拥有的模型：

 public class Model {

    private final StringProperty shadow = new SimpleStringProperty("-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.24), 10,0,0,0)");

    public StringProperty shadowProperty() {
        return shadow;
    }

    public final String getShadow() {
        return shadowProperty().get();
    }

    public final void setShadow(String shadow) {
        shadowProperty().set(shadow);
    }
}

我知道如何从控制器设置“影子”值，但我不明白如何绑定另一个控制器的节点以监听该更改。

假设节点是这样的：

@FXML AnchorPane appBar

我希望“appBar”承担对模型中“shadow”所做的任何更改。那会是什么样子？

Answer 1

您需要向 shadowProperty 添加一个监听器来监听它的变化。

something.shadowProperty() .addListener( (observable, oldValue, newValue) -> {
    //do something with appBar 
}) ;

我不完全确定您想要实现什么，但这应该可以回答您关于如何收听属性更改的问题。

PS：我是手机，所以不保证错别字

编辑：您还可以将一个对象的属性绑定到另一个对象的属性。为此使用bind()。

编辑：这是一个例子：

import javafx.application.Application;
import javafx.beans.property.Property;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.scene.Scene;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Main extends Application {

    Property<Background> backgroundProperty;
    StringProperty styleProperty;

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

    @Override
    public void start(Stage primaryStage) throws Exception {

        VBox root = new VBox(10);

        backgroundProperty = new SimpleObjectProperty<>();
        styleProperty = new SimpleStringProperty();

        // Pane that changes background by listener
        Pane pane1 = new Pane();
        pane1.setMinHeight(40);
        backgroundProperty.addListener( (observable, oldValue, newValue) -> {
            pane1.setBackground(backgroundProperty.getValue());
        });

        // Pane that changes background by property binding
        Pane pane2 = new Pane();
        pane2.setMinHeight(40);
        pane2.backgroundProperty().bind(backgroundProperty);

        // Pane that binds the style property
        Pane pane3 = new Pane();
        pane3.setMinHeight(40);
        pane3.styleProperty().bind(styleProperty);

        backgroundProperty.setValue(new Background(new BackgroundFill(Color.RED, null, null)));
        styleProperty.setValue("-fx-background-color: black");

        root.getChildren().add(pane1);
        root.getChildren().add(pane2);
        root.getChildren().add(pane3);

        Scene scene = new Scene(root, 200, 400);
        primaryStage.setScene(scene);
        primaryStage.show();

    }
}