JavaFxDemo 20250407 面试题：JavaFx的双向绑定和MVVM例子

JavaFx是JavaFX的一部分，它提供了丰富的图形用户界面（GUI）功能。在面试中，面试官可能会问到JavaFx的双向绑定和MVVM（Model-View-ViewModel）模式的例子。

双向绑定是指视图（UI元素）与模型（数据）之间的双向关联。当模型发生变化时，视图会自动更新以反映这些变化。这有助于实现响应式界面，使用户能够与应用程序进行交互。

MVVM是一种设计模式，它将视图、模型和视图模型分离开来。视图负责呈现数据，而模型负责存储数据。视图模型则充当两者之间的桥梁，负责处理视图和模型之间的通信。这种模式有助于提高代码的可维护性和可扩展性。

以下是一个JavaFx的双向绑定和MVVM例子：

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.VBox;

import javafx.stage.Stage;

import javafx.beans.value.ChangeListener;

import javafx.beans.value.ObservableValue;



public class JavaFxDemo extends Application {



    @Override

    public void start(Stage primaryStage) {

        Button button = new Button("点击我");

        button.setOnAction(event -> {

            String text = "Hello, World!";

            text += event.getSource().toString();

            button.setText(text);

        });



        VBox vbox = new VBox(10, button);

        Scene scene = new Scene(vbox, 300, 200);

        primaryStage.setScene(scene);

        primaryStage.show();

    }



    public static void main(String[] args) {

        launch(args);

    }

}

在这个例子中，我们创建了一个按钮，并为其添加了一个点击事件监听器。当按钮被点击时，会触发一个方法，该方法将按钮的文本设置为当前时间加上按钮的名称。这样，当按钮被点击时，视图会自动更新以反映这些变化。这就是JavaFx的双向绑定。

此外，我们还使用了MVVM模式。视图（按钮）和模型（按钮的文本）之间存在双向绑定关系。同时，视图（按钮）和视图模型（按钮的文本）之间也存在单向绑定关系。视图模型负责处理视图和模型之间的通信，例如在本例中，我们将按钮的文本设置为当前时间加上按钮的名称。