css - 将 CSS 样式属性绑定(bind)到 JavaFX 中的节点

Question

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

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

根据我的研究，我发现这对于标签的文本值来说绝对是可能的(由 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);
    }
}

我明白如何从 Controller 设置“影子”值，但我不明白的是如何绑定(bind)另一个 Controller 的节点来监听该更改。

假设节点类似于:

@FXML AnchorPane appBar

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

Answer 1

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

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

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

PS:我是在移动设备上进行的，因此不能保证不会出现拼写错误

编辑:您还可以将一个对象的属性绑定(bind)到另一个对象的属性。使用 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();

    }
}