如何实现带图标的ImageView全屏且子ImageView位置固定？

我来帮你解决这个困扰！你现在的问题是想让主背景ImageView全屏铺满，同时上面的子图标位置保持不变，但目前切换全屏后背景图还是原大小对吧？咱们先拆解问题根源，再一步步改：

问题出在哪？ #

1. Pane的尺寸被锁死了：你的Pane设置了maxHeight="-Infinity"和maxWidth="-Infinity"，这相当于给Pane定死了最大尺寸不能超过prefHeight和prefWidth，哪怕窗口全屏，Pane还是缩在原来的大小里，背景图自然也跟着不变。
2. 主ImageView固定了尺寸：你给主ImageView设了固定的fitHeight和fitWidth，还开了preserveRatio="true"，这让它只能保持固定大小，不会跟着父容器缩放。

具体修改方案 #

第一步：换用AnchorPane（更适合全屏布局） #

把原来的Pane换成AnchorPane，这个布局容器可以通过锚点轻松让子元素铺满整个容器，同时不影响其他子元素的绝对位置。

第二步：调整主ImageView的约束 #

给主ImageView加上四个锚点约束，让它的四边紧贴AnchorPane的边缘，这样它就会自动跟着容器缩放。同时去掉固定的fitHeight和fitWidth，根据需求调整preserveRatio：

• 设为true：保持图片比例，可能会有黑边
• 设为false：拉伸图片铺满全屏

第三步：修正AnchorPane的尺寸限制 #

把AnchorPane的maxHeight和maxWidth改成Infinity，允许它扩展到全屏大小。

修改后的完整FXML代码 #

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="anchorPane" maxHeight="Infinity" maxWidth="Infinity"
            prefHeight="537.0" prefWidth="713.0" style="-fx-background-color: white;"
            xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1"
            fx:controller="studiprojekt.Studi_Controller">
    <children>
        <!-- 主背景ImageView：铺满整个AnchorPane -->
        <ImageView fx:id="bildAuto" pickOnBounds="true" preserveRatio="false"
                   AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0"
                   AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
            <image>
                <Image url="file:/C:/Users/buerv/Documents/NetBeansProjects/StudiProjekt/Skyline.JPG" />
            </image>
        </ImageView>
        
        <!-- 子图标和按钮：保持原有绝对位置不变 -->
        <Button fx:id="buttonBuch" layoutX="200.0" layoutY="88.0" mnemonicParsing="false"
                onAction="#pressButton" prefHeight="60.0" prefWidth="61.0" />
        <ImageView id="bildAuto" fitHeight="50.0" fitWidth="43.0" layoutX="210.0" layoutY="97.0"
                   pickOnBounds="true" preserveRatio="true">
            <image>
                <Image url="file:/C:/Users/buerv/Documents/NetBeansProjects/StudiProjekt/Icons/contacts-book.png" />
            </image>
        </ImageView>
        <ImageView fitHeight="50.0" fitWidth="50.0" layoutX="534.0" layoutY="86.0"
                   pickOnBounds="true" preserveRatio="true">
            <image>
                <Image url="file:/C:/Users/buerv/Documents/NetBeansProjects/StudiProjekt/Icons/earth-and-laptop.png" />
            </image>
        </ImageView>
        <ImageView fitHeight="60.0" fitWidth="73.0" layoutX="379.0" layoutY="344.0"
                   pickOnBounds="true" preserveRatio="true">
            <image>
                <Image url="file:/C:/Users/buerv/Documents/NetBeansProjects/StudiProjekt/Icons/sedan-car-model.png" />
            </image>
        </ImageView>
        <ImageView fitHeight="50.0" fitWidth="50.0" layoutX="111.0" layoutY="294.0"
                   pickOnBounds="true" preserveRatio="true">
            <image>
                <Image url="file:/C:/Users/buerv/Documents/NetBeansProjects/StudiProjekt/Icons/code-signs-on-laptop-screen.png" />
            </image>
        </ImageView>
        <ImageView fitHeight="50.0" fitWidth="50.0" layoutX="383.0" layoutY="250.0"
                   pickOnBounds="true" preserveRatio="true">
            <image>
                <Image url="file:/C:/Users/buerv/Documents/NetBeansProjects/StudiProjekt/Icons/rectangular-closed-padlock-lock-interface-symbol.png" />
            </image>
        </ImageView>
        <ImageView fitHeight="50.0" fitWidth="50.0" layoutX="545.0" layoutY="310.0"
                   pickOnBounds="true" preserveRatio="true">
            <image>
                <Image url="file:/C:/Users/buerv/Documents/NetBeansProjects/StudiProjekt/Icons/car-chassis.png" />
            </image>
        </ImageView>
    </children>
</AnchorPane>

第四步：添加全屏切换的控制器代码 #

如果你的控制器还没实现全屏逻辑，把这段代码加进去：

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.stage.Stage;

public class Studi_Controller {
    @FXML
    private Button buttonBuch;

    @FXML
    private void pressButton(ActionEvent event) {
        // 获取当前窗口并切换全屏状态
        Stage stage = (Stage) buttonBuch.getScene().getWindow();
        stage.setFullScreen(!stage.isFullScreen());
    }
}

效果说明 #

修改完成后，点击按钮切换全屏时，主背景ImageView会自动铺满整个窗口，而所有子图标和按钮都会保持原来的绝对位置，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Victor