如何在JDK22的JavaFX Maven项目中实现Glassmorphism效果？

一、确认Maven依赖 #

确保pom.xml中包含JavaFX 22核心模块，版本与JDK22匹配：

<dependencies>
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-controls</artifactId>
        <version>22</version>
    </dependency>
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-fxml</artifactId>
        <version>22</version>
    </dependency>
    <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-graphics</artifactId>
        <version>22</version>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-maven-plugin</artifactId>
            <version>0.0.8</version>
            <configuration>
                <mainClass>com.example.App</mainClass>
            </configuration>
        </plugin>
    </plugins>
</build>

二、核心实现步骤 #

1. 创建Glassmorphism样式文件 #

在src/main/resources下新建style.css，写入以下样式：

/* 磨砂背景面板样式 */
.glass-bg {
    -fx-background-color: rgba(255, 255, 255, 0.2); /* 半透明白色基底 */
    -fx-background-radius: 10px; /* 圆角处理 */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 12, 0, 0, 0); /* 外层阴影增强立体感 */
}

/* 内容容器设为透明，透出底层磨砂背景 */
.content-container {
    -fx-background-color: transparent;
}

/* 可选：美化控件适配玻璃风格 */
.button {
    -fx-background-color: rgba(255, 255, 255, 0.4);
    -fx-text-fill: #333;
    -fx-background-radius: 6px;
    -fx-padding: 8px 16px;
}

.label {
    -fx-text-fill: #333;
    -fx-font-size: 18px;
}

2. 修改FXML文件 #

更新根容器的JavaFX版本为22，并添加透明样式类：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>

<VBox alignment="CENTER" spacing="20.0" xmlns="http://javafx.com/javafx/22" xmlns:fx="http://javafx.com/fxml/1" 
      fx:controller="com.example.PrimaryController" styleClass="content-container">
   <children>
      <Label text="Primary View" />
      <Button fx:id="primaryButton" text="Switch to Secondary View" onAction="#switchToSecondary"/>
   </children>
   <padding>
      <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
   </padding>
</VBox>

3. 调整App启动代码 #

修改start方法，配置透明Stage并组合磨砂背景与内容：

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.scene.effect.BlurEffect;

import java.io.IOException;

@SuppressWarnings("exports")
public class App extends Application {

    private static Scene scene;

    @Override
    public void start(Stage stage) throws IOException {
        // 加载FXML内容
        Parent content = loadFXML("primary");
        
        // 创建磨砂背景面板
        Pane glassPane = new Pane();
        glassPane.getStyleClass().add("glass-bg");
        // 添加模糊效果增强磨砂质感
        BlurEffect blurEffect = new BlurEffect();
        blurEffect.setRadius(15);
        glassPane.setEffect(blurEffect);
        
        // 用StackPane分层：背景在底层，内容在上层
        StackPane root = new StackPane();
        root.getChildren().addAll(glassPane, content);
        
        // 配置透明Scene
        scene = new Scene(root, 640, 480);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        scene.setFill(javafx.scene.paint.Color.TRANSPARENT);
        
        // 配置Stage为透明无装饰
        stage.initStyle(StageStyle.TRANSPARENT);
        stage.setScene(scene);
        stage.show();
        
        // 添加窗口拖拽功能（无标题栏时必备）
        addDragSupport(stage, root);
    }

    static void setRoot(String fxml) throws IOException {
        Parent content = loadFXML(fxml);
        StackPane root = (StackPane) scene.getRoot();
        root.getChildren().set(1, content);
    }

    private static Parent loadFXML(String fxml) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(App.class.getResource(fxml + ".fxml"));
        return fxmlLoader.load();
    }
    
    // 实现窗口拖拽逻辑
    private void addDragSupport(Stage stage, StackPane root) {
        root.setOnMousePressed(event -> {
            stage.setX(event.getScreenX() - stage.getX());
            stage.setY(event.getScreenY() - stage.getY());
        });
        root.setOnMouseDragged(event -> {
            stage.setX(event.getScreenX() - stage.getX());
            stage.setY(event.getScreenY() - stage.getY());
        });
    }

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

三、关键说明 #

1. StageStyle.TRANSPARENT：必须开启此属性，否则Stage默认背景会遮挡磨砂效果，无法透出桌面背景。
2. 层级设计：通过StackPane将磨砂背景置于底层，内容容器在上层，确保交互控件可正常操作。
3. Windows兼容性：JDK22+对Windows透明窗口支持完善，无需额外系统配置。
4. 效果调整：可通过修改CSS的rgba透明度、模糊半径、阴影参数，自定义玻璃态的视觉强度。

内容的提问来源于stack exchange，提问作者Adolfo Alejandro Arenas Ramos