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

Question

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

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

根据我的研究，我发现这对于标签的文本值来说绝对是可能的（由 James_D 在这里解释：JavaFX - 如何在另一个控制器的控制器中使用方法？），但我很难弄清楚语法是什么用“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();

    }
}