首页 > 解决方案 > 在 JavaFX 中以 125% 缩放更改场景时的布局问题

问题描述

当监视器缩放设置为 125% 时,我在更改场景后遇到布局问题是 JavaFX。

当缩放设置为 100% 时,一切正常。

我正在使用 JavaFX 11.0.2。

这是我的代码:

import javafx.application.Application;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Screen;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

public class App extends Application {
    private Scene firstScene;
    private Scene secondScene;

    private Rectangle2D screenBounds = Screen.getPrimary().getBounds();
    private final int backButtonSize = (int) (screenBounds.getWidth() / 50);

    private Image image = new Image("https://imgur.com/download/uDlKu6Y");

    @Override
    public void start(Stage stage) {
        Button forwardButton = new Button("Forward");
        forwardButton.setOnAction(actionEvent -> stage.setScene(secondScene));
        firstScene = new Scene(new StackPane(forwardButton));

        Button backButton = new Button("Back");
        backButton.setOnAction(actionEvent -> stage.setScene(firstScene));
        backButton.setMinWidth(backButtonSize);
        ImageView imageView = new ImageView(image);
        imageView.setFitWidth(screenBounds.getWidth() - backButtonSize);
        imageView.setFitHeight(screenBounds.getHeight());
        imageView.setPreserveRatio(true);
        secondScene = new Scene(new BorderPane(imageView, null, null, null, backButton));

        stage.setX(screenBounds.getMinX());
        stage.setY(screenBounds.getMinY());
        stage.setWidth(screenBounds.getWidth());
        stage.setHeight(screenBounds.getHeight());
        stage.initStyle(StageStyle.UNDECORATED);
        stage.setScene(firstScene);
        stage.show();
    }
}

我在舞台 (stage.setScene(firstScene)stage.setScene(secondScene)) 中设置的第一个场景看起来不错。

但是在单击按钮并更改场景(从forwardButton.setOnAction(...)或调用事件处理程序backButton.setOnAction(...))后,布局被破坏。

正常的第一个场景: 正常的第一幕

正常的第二个场景: 正常的第二个场景

第一个场景破碎: 第一个场景破碎

破碎的第二个场景: 破碎的第二幕

我将不胜感激任何帮助。

PS如果有人可以提出一种方法来ImageView占据整个垂直空间,我也将不胜感激。
但现在它被认为是一个小得多的问题。

编辑1:

我设法通过更改窗格而不是场景来解决问题。
但我仍然想知道为什么第一次尝试不成功。

这是更新的代码:

import javafx.application.Application;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.stage.Screen;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

public class App extends Application {
    private Scene scene;
    private Pane firstPane;
    private Pane secondPane;

    private Rectangle2D screenBounds = Screen.getPrimary().getBounds();
    private final int backButtonSize = (int) (screenBounds.getWidth() / 50);

    private Image image = new Image("https://imgur.com/download/uDlKu6Y");

    @Override
    public void start(Stage stage) {
        Button forwardButton = new Button("Forward");
        forwardButton.setOnAction(actionEvent -> scene.setRoot(secondPane));
        firstPane = new StackPane(forwardButton);

        Button backButton = new Button("Back");
        backButton.setOnAction(actionEvent -> scene.setRoot(firstPane));
        backButton.setMinWidth(backButtonSize);
        ImageView imageView = new ImageView(image);
        imageView.setFitWidth(screenBounds.getWidth() - backButtonSize);
        imageView.setFitHeight(screenBounds.getHeight());
        imageView.setPreserveRatio(true);
        secondPane = new BorderPane(imageView, null, null, null, backButton);

        scene = new Scene(firstPane);

        stage.setX(screenBounds.getMinX());
        stage.setY(screenBounds.getMinY());
        stage.setWidth(screenBounds.getWidth());
        stage.setHeight(screenBounds.getHeight());
        stage.initStyle(StageStyle.UNDECORATED);
        stage.setScene(scene);
        stage.show();
    }
}

标签: javafxscale

解决方案


要将您的应用程序设置为底涂全屏,请使用setFullScreen

    //stage.setX(screenBounds.getMinX());
    //stage.setY(screenBounds.getMinY());
    //stage.setWidth(screenBounds.getWidth());
    //stage.setHeight(screenBounds.getHeight());
    //stage.initStyle(StageStyle.UNDECORATED);
    stage.setFullScreen(true);

要对其进行测试,请使用问题中发布的 mre。
在 125% 的比例下,它看起来像:

在此处输入图像描述

在此处输入图像描述


推荐阅读