JavaFX与CSS文件融合失败求助：多问题待排查

文件路径 #

• JavaFX 文件：src/main/java/com/circles
• CSS 文件：src/main/resources/styleSheet.css（注：原路径src/main/java/resources应为笔误，标准Maven资源目录为src/main/resources）

预期效果 #

创建带黑色边框的JavaFX界面，包含四个圆形：

• 前两个圆形为白色填充+黑色描边
• 后两个圆形分别为红色、绿色填充
• 第一个圆形的左右两侧各有一条黑色竖线

当前问题 #

界面仅显示三个黑色圆形，第一个圆形缺失；两条竖线显示极小，完全不符合预期。问题出在代码实现，与IDE无关。

原始代码 #

Java代码 #

package com.example.circles;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class circles extends Application {

    @Override
    public void start(Stage primaryStage) {

        // Pane to hold the shapes
        Pane pane = new Pane();

        // Rectangle Black stroke with transparent fill
        Rectangle rectangle = new Rectangle(50, 50, 700, 400);
        rectangle.getStyleClass().add("border");

        // Circle 1: White fill, black stroke
        Circle circle1 = new Circle(100, 150, 50);
        circle1.setId("white-circle");

        // Circle 2: White fill, black stroke
        Circle circle2 = new Circle(250, 150, 50);
        circle2.setId("white-circle");

        // Circle 3: Red fill
        Circle circle3 = new Circle(400, 150, 50);
        circle3.getStyleClass().add("red-circle");

        // Circle 4: Green fill
        Circle circle4 = new Circle(550, 150, 50);
        circle4.getStyleClass().add("green-circle");

        // Vertical line to the left of Circle 1
        Line leftLine = new Line(50, 100, 50, 200); // x = 50, y1 = 100, y2 = 200
        leftLine.setStrokeWidth(2);
        leftLine.setStyle("-fx-stroke: black;");

        // Vertical line to the right of Circle 1
        Line rightLine = new Line(150, 100, 150, 200); // x = 150, y1 = 100, y2 = 200
        rightLine.setStrokeWidth(2);
        rightLine.setStyle("-fx-stroke: black;");

        // Add all shapes to the pane
        pane.getChildren().addAll(leftLine, rightLine, circle1, circle2, circle3, circle4);

        // Create the scene and link the CSS file
        Scene scene = new Scene(pane, 500, 400);
        scene.getStylesheets().add("styleSheet.css");

        // Set up the stage
        primaryStage.setTitle("Circles");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

CSS代码 #

/* Rectangle border style */
#border-rectangle {
    -fx-fill: transparent;
    -fx-stroke: black;
    -fx-stroke-width: 2;
}

/* First circle style */
#circle1 {
    -fx-fill: white;
    -fx-stroke: black;
    -fx-stroke-width: 2;
}

/* Second circle style */
#circle2 {
    -fx-fill: white;
    -fx-stroke: black;
    -fx-stroke-width: 2;
}

/* Third circle style */
#circle3 {
    -fx-fill: red;
}

/* Fourth circle style */
#circle4 {
    -fx-fill: green;
}

/* Vertical line style */
#vertical-line {
    -fx-stroke: black;
    -fx-stroke-width: 2;
}

问题排查与修复 #

1. CSS文件加载失败 #

原始代码中直接使用文件名加载CSS，无法正确定位资源文件，应使用类资源路径加载：

// 替换原有加载代码
scene.getStylesheets().add(getClass().getResource("/styleSheet.css").toExternalForm());

2. CSS选择器与Java组件标识完全不匹配 #

3. 组件超出场景范围 #

Scene宽度设为500，但第四个圆形x坐标为550，超出场景导致无法显示，需调整Scene宽度：

// 扩大场景宽度以容纳所有组件
Scene scene = new Scene(pane, 800, 400);

修复后的完整代码 #

Java代码 #

package com.example.circles;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class circles extends Application {

    @Override
    public void start(Stage primaryStage) {
        Pane pane = new Pane();

        // 矩形边框：加入Pane并绑定样式类
        Rectangle rectangle = new Rectangle(50, 50, 700, 400);
        rectangle.getStyleClass().add("border");
        pane.getChildren().add(rectangle);

        // 白色圆形：使用样式类（避免重复ID）
        Circle circle1 = new Circle(100, 150, 50);
        circle1.getStyleClass().add("white-circle");

        Circle circle2 = new Circle(250, 150, 50);
        circle2.getStyleClass().add("white-circle");

        // 红/绿圆形：绑定对应样式类
        Circle circle3 = new Circle(400, 150, 50);
        circle3.getStyleClass().add("red-circle");

        Circle circle4 = new Circle(550, 150, 50);
        circle4.getStyleClass().add("green-circle");

        // 竖线：绑定样式类
        Line leftLine = new Line(50, 100, 50, 200);
        leftLine.getStyleClass().add("vertical-line");

        Line rightLine = new Line(150, 100, 150, 200);
        rightLine.getStyleClass().add("vertical-line");

        // 添加所有组件到Pane
        pane.getChildren().addAll(leftLine, rightLine, circle1, circle2, circle3, circle4);

        // 正确加载CSS资源
        Scene scene = new Scene(pane, 800, 400);
        scene.getStylesheets().add(getClass().getResource("/styleSheet.css").toExternalForm());

        primaryStage.setTitle("Circles");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

CSS代码 #

/* 矩形边框样式 */
.border {
    -fx-fill: transparent;
    -fx-stroke: black;
    -fx-stroke-width: 2;
}

/* 白色圆形样式 */
.white-circle {
    -fx-fill: white;
    -fx-stroke: black;
    -fx-stroke-width: 2;
}

/* 红色圆形样式 */
.red-circle {
    -fx-fill: red;
}

/* 绿色圆形样式 */
.green-circle {
    -fx-fill: green;
}

/* 竖线样式 */
.vertical-line {
    -fx-stroke: black;
    -fx-stroke-width: 2;
}

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