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

Question

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

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

根据我的研究，我发现这对于标签的文本值绝对是可能的（由 James_D 此处解释：），但我很难弄清楚语法是什么用 "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);
    }
}

我了解如何从控制器设置 "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();

    }
}

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

Bind CSS Style Property to Node in JavaFX

css

styles

bind

javafx

properties

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

Bind CSS Style Property to Node in JavaFX

css

styles

bind

javafx

properties

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