如何在JavaFX/FXML中实现MediaView单独全屏？

嘿，我懂你现在的困扰——本来想让MediaView单独进入全屏模式播放视频，结果整个应用窗口都跟着全屏了，完全不是想要的效果。别着急，咱们来搞定这个问题。

问题根源 #

你之前应该是直接调用了Stage的setFullScreen(true)方法吧？这个方法是针对整个应用窗口的，所以才会导致整个窗口全屏。要实现MediaView单独全屏，咱们需要把MediaView从当前布局中临时移出来，放到一个独立的全屏Stage里，或者在当前窗口内动态调整布局让它覆盖整个屏幕。

方案一：用独立Stage承载MediaView（推荐） #

这个方法最直观，就是把MediaView放到一个新的全屏Stage中播放，退出全屏时再放回原来的布局。以下是完整的代码示例，你可以直接整合到你的项目里：

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.media.MediaView;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.geometry.Rectangle2D;
import javafx.stage.Screen;

@FXML private MediaPlayer mediaPlayer;
@FXML private MediaView mediaView;
@FXML private Label label;
@FXML private String filepath;

// 保存MediaView原来的父容器和布局约束，用于退出全屏时恢复
private Pane originalParent;
private boolean isMediaFullScreen = false;

@FXML private void toggleMediaFullScreen(ActionEvent event) {
    if (!isMediaFullScreen) {
        // 进入MediaView单独全屏
        originalParent = (Pane) mediaView.getParent();
        originalParent.getChildren().remove(mediaView);

        // 创建新的全屏Stage
        Stage fullScreenStage = new Stage();
        fullScreenStage.setFullScreen(true);
        fullScreenStage.setFullScreenExitHint("按ESC退出全屏");

        // 将MediaView放到新Stage的Scene中
        Scene fullScreenScene = new Scene(mediaView);
        fullScreenStage.setScene(fullScreenScene);

        // 监听全屏退出事件，恢复MediaView到原布局
        fullScreenStage.fullScreenProperty().addListener((obs, oldVal, newVal) -> {
            if (!newVal) {
                originalParent.getChildren().add(mediaView);
                isMediaFullScreen = false;
            }
        });

        fullScreenStage.show();
        isMediaFullScreen = true;
    }
}

方案二：在当前窗口内动态调整布局 #

如果你不想新建Stage，也可以在当前窗口内隐藏其他控件，让MediaView占满整个屏幕：

@FXML private void toggleMediaFullScreen(ActionEvent event) {
    Stage currentStage = (Stage) mediaView.getScene().getWindow();
    if (!isMediaFullScreen) {
        // 隐藏其他控件
        label.setVisible(false);
        // 让MediaView占满整个窗口
        mediaView.fitWidthProperty().bind(currentStage.widthProperty());
        mediaView.fitHeightProperty().bind(currentStage.heightProperty());
        // 窗口进入全屏
        currentStage.setFullScreen(true);
        isMediaFullScreen = true;
    } else {
        // 退出全屏，恢复控件显示和MediaView布局
        currentStage.setFullScreen(false);
        mediaView.fitWidthProperty().unbind();
        mediaView.fitHeightProperty().unbind();
        // 这里可以恢复MediaView原来的大小，比如设置固定值或者绑定原布局约束
        mediaView.setFitWidth(640);
        mediaView.setFitHeight(360);
        label.setVisible(true);
        isMediaFullScreen = false;
    }
}

注意事项 #

• 方案一中，记得在退出全屏时把MediaView放回原来的父容器，否则下次播放会出问题。
• 方案二中，如果你的MediaView是放在特定布局容器（比如AnchorPane）里的，退出全屏时可以重新绑定它的布局约束，而不是设置固定大小，这样更灵活。
• 可以给全屏按钮添加图标或者提示，让用户知道怎么操作。

内容的提问来源于stack exchange，提问作者sarra el filali