javafx 控件监听窗口大小改变

原创

mob649e81664bd9 2024-10-10 05:10:18 ©著作权

文章标签 窗口大小 JavaFX UI 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mob649e81664bd9的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaFX 控件监听窗口大小改变

在桌面应用程序中，监听窗口的大小改变是一个常见且重要的需求。在 JavaFX 中，处理窗口尺寸变化并相应地调整 UI 组件，可以极大地提升用户体验。本文将详细讲解如何在 JavaFX 应用程序中实现这一功能，并配以代码示例。

1. JavaFX 概述

JavaFX 是一个用于构建富客户端应用程序的框架，具有丰富的 UI 控件、图形及媒体功能。JavaFX 是继承自 Java Swing 的新一代 UI 技术，能让开发者创建更具表现力的用户界面。

2. 为什么需要监听窗口大小变化？

当用户调整窗口大小时，可能需要及时更新界面内容，例如：

调整图像、控件的大小和布局
重新排列组件位置
动态响应用户的操作和内容

通过监听窗口大小变化，开发者可以让应用程序更具响应性和适应性。

3. JavaFX窗口大小改变的基本代码示例

下面我们将创建一个简单的 JavaFX 应用程序，展示如何监听窗口大小变化，并根据当前窗口大小调整一个文本字段的内容。

代码示例

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class WindowResizeExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        Label label = new Label("当前窗口大小: ");
        BorderPane root = new BorderPane();
        root.setCenter(label);

        // 创建场景
        Scene scene = new Scene(root, 400, 300);

        // 监听窗口大小变化
        primaryStage.widthProperty().addListener((obs, oldVal, newVal) -> {
            label.setText("当前窗口宽度: " + newVal);
        });

        primaryStage.heightProperty().addListener((obs, oldVal, newVal) -> {
            label.setText("当前窗口高度: " + newVal);
        });

        // 设置窗口属性
        primaryStage.setTitle("JavaFX 窗口大小变化监听");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

代码解读

创建 Label：我们使用 Label 控件在窗口中显示当前的宽度和高度。
监听器：通过 widthProperty() 和 heightProperty() 方法，为窗口的宽度和高度添加监听器，以更新 Label 的内容。
演示效果：用户可以通过调整窗口的大小，看到实时更新的宽度和高度。

4. 状态图

在我们的应用程序中，可以通过状态图表示窗口变化的状态。以下是使用 Mermaid 表示的状态图：

stateDiagram
    [*] --> 初始状态
    初始状态 --> 宽度变化
    初始状态 --> 高度变化
    宽度变化 --> 更新标签
    高度变化 --> 更新标签
    更新标签 --> 宽度变化
    更新标签 --> 高度变化

此状态图展示了应用程序的初始状态，以及在窗口大小改变时，如何更新 Label。

5. 更复杂的UI变化

在实际应用中，单纯改变文本可能不足以实现优秀的用户体验。我们可以结合布局管理器实现更复杂的 UI 变化。例如，当窗口变小或变大时，我们可能需要调整多个控件的排列方式。

代码示例：调整布局

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class ResizeLayoutExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        GridPane gridPane = new GridPane();
        Button button = new Button("按钮1");
        Label label = new Label("当前窗口大小: ");
        gridPane.add(label, 0, 0);
        gridPane.add(button, 0, 1);

        Scene scene = new Scene(gridPane, 400, 300);
        
        primaryStage.widthProperty().addListener((obs, oldVal, newVal) -> {
            double width = newVal.doubleValue();
            if (width < 300) {
                gridPane.setStyle("-fx-background-color: lightcoral;");
            } else {
                gridPane.setStyle("-fx-background-color: lightgreen;");
            }
            label.setText("宽度: " + newVal);
        });

        primaryStage.heightProperty().addListener((obs, oldVal, newVal) -> {
            label.setText("高度: " + newVal);
        });

        primaryStage.setTitle("JavaFX 复杂UI变化监听");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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