JavaFX奥运五环项目问题：界面不符预期且窗口可调整

一、窗口可调整大小的问题 #

要让窗口不可调整大小，只需在primaryStage.show()之前添加一行代码：

primaryStage.setResizable(false);

二、奥运五环显示异常的核心问题 #

你的代码里存在几个关键错误，导致显示不符合预期：

• 错误添加矩形：奥运五环只有5个空心圆环，不需要额外的矩形，直接删掉所有Rectangle相关代码即可。
• 圆环填充错误：你给椭圆设置了实心填充，而奥运五环是空心的，应该把填充色设为透明，只保留边框颜色。
• 布局容器选择错误：StackPane会把所有元素居中堆叠，导致5个椭圆全部重叠在一起，应该用Pane作为根容器，手动控制每个圆环的位置。
• 圆环位置与交叠顺序错误：奥运五环是上排3个（蓝、黑、红），下排2个（黄、绿），下排的环要穿插在上排的环之间，且元素添加顺序会影响交叠层级（后添加的元素显示在上方）。

三、修复后的完整代码 #

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Ellipse;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class OlympicRings extends Application {

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

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Olympic Rings");
        // 改用Pane作为根容器，支持手动定位元素
        Pane root = new Pane();

        // 定义圆环的统一尺寸：横向半径、纵向半径
        double ringRadiusX = 50;
        double ringRadiusY = 30;
        // 圆环间距
        double spacing = 20;

        // 创建上排三个圆环：蓝、黑、红
        Ellipse blueRing = new Ellipse(ringRadiusX, ringRadiusY);
        blueRing.setFill(Color.TRANSPARENT);
        blueRing.setStroke(Color.BLUE);
        blueRing.setStrokeWidth(4);
        blueRing.setLayoutX(ringRadiusX + spacing);
        blueRing.setLayoutY(ringRadiusY + spacing);

        Ellipse blackRing = new Ellipse(ringRadiusX, ringRadiusY);
        blackRing.setFill(Color.TRANSPARENT);
        blackRing.setStroke(Color.BLACK);
        blackRing.setStrokeWidth(4);
        blackRing.setLayoutX(ringRadiusX * 3 + spacing * 2);
        blackRing.setLayoutY(ringRadiusY + spacing);

        Ellipse redRing = new Ellipse(ringRadiusX, ringRadiusY);
        redRing.setFill(Color.TRANSPARENT);
        redRing.setStroke(Color.RED);
        redRing.setStrokeWidth(4);
        redRing.setLayoutX(ringRadiusX * 5 + spacing * 3);
        redRing.setLayoutY(ringRadiusY + spacing);

        // 创建下排两个圆环：黄、绿（后添加，实现正确交叠）
        Ellipse yellowRing = new Ellipse(ringRadiusX, ringRadiusY);
        yellowRing.setFill(Color.TRANSPARENT);
        yellowRing.setStroke(Color.YELLOW);
        yellowRing.setStrokeWidth(4);
        yellowRing.setLayoutX(ringRadiusX * 2 + spacing * 2);
        yellowRing.setLayoutY(ringRadiusY * 2 + spacing * 2);

        Ellipse greenRing = new Ellipse(ringRadiusX, ringRadiusY);
        greenRing.setFill(Color.TRANSPARENT);
        greenRing.setStroke(Color.GREEN);
        greenRing.setStrokeWidth(4);
        greenRing.setLayoutX(ringRadiusX * 4 + spacing * 3);
        greenRing.setLayoutY(ringRadiusY * 2 + spacing * 2);

        // 创建标题文本
        Text title = new Text("The Olympic Rings");
        title.setStyle("-fx-font-size: 16px;");
        // 把文本定位在五环下方
        title.setLayoutX(ringRadiusX + spacing);
        title.setLayoutY(ringRadiusY * 4 + spacing * 3);

        // 添加元素到容器（先上排后下排，保证交叠层级正确）
        root.getChildren().addAll(blueRing, blackRing, redRing, yellowRing, greenRing, title);

        Scene scene = new Scene(root, 400, 250);
        primaryStage.setScene(scene);
        // 设置窗口不可调整大小
        primaryStage.setResizable(false);
        primaryStage.show();
    }
}

关键修改说明 #

• 容器替换：用Pane替代StackPane，可以通过setLayoutX和setLayoutY精确控制每个元素的位置。
• 圆环样式修正：将填充色设为Color.TRANSPARENT，边框宽度调整为4（更接近真实五环样式），并设置正确的边框颜色。
• 位置调整：按照奥运五环的标准排列方式，计算每个圆环的坐标，上排三个水平排列，下排两个穿插在上排的间隙中。
• 交叠顺序：先添加的元素在底层，后添加的在顶层，下排的黄、绿环后添加，会覆盖上排环的部分区域，实现正确的交叠效果。
• 窗口设置：添加primaryStage.setResizable(false)禁用窗口调整。

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