如何在JavaFX中连接两个TextFlow中的垂直线节点？

你遇到的4px间隙来自TextFlow默认的上下内边距（各2px），结合VBox的布局特性，导致两条Line无法衔接。以下是几种可行的解决方法：

方法1：移除TextFlow的内边距并确保VBox无间距 #

这是最直接的方案，通过消除TextFlow的默认内边距，让两条Line完全对齐：

修改后的完整代码：

public class Test extends Application {

    @Override
    public void start(Stage primaryStage) throws IOException {
        var textFlow1 = createTextFlow();
        textFlow1.setStyle("-fx-background-color: cyan; -fx-padding: 0;"); // 移除内边距
        var textFlow2 = createTextFlow();
        textFlow2.setStyle("-fx-background-color: yellow; -fx-padding: 0;"); // 移除内边距

        VBox vbox = new VBox(0, textFlow1, textFlow2); // 显式设置VBox间距为0
        Scene scene = new Scene(vbox, 300, 100);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private TextFlow createTextFlow() {
        Text textA = new Text("ABC");
        textA.setStyle("-fx-font-family: 'monospace'; -fx-font-size: 14;");
        Line line = new Line(0, 0, 0, 20);
        line.setStrokeWidth(1); // 确保线条宽度一致，避免视觉间隙
        Text textB = new Text("DEF");
        textB.setStyle("-fx-font-family: 'monospace'; -fx-font-size: 14;");
        TextFlow textFlow = new TextFlow(textA, line, textB);
        return textFlow;
    }

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

方法2：纯代码设置内边距（替代CSS） #

如果更倾向于用Java代码而非CSS控制布局，可以直接调用setPadding移除内边距：

// 在createTextFlow方法中添加
textFlow.setPadding(Insets.EMPTY);

同时保持VBox的间距设置为0，效果和方法1完全一致。

额外优化：微调Line坐标（可选） #

若仍存在极细微的视觉间隙，可微调Line的Y坐标让上下线条完全重叠：

• 第一个TextFlow的Line终点保持(0, 20)
• 第二个TextFlow的Line起点保持(0, 0)，终点保持(0, 20)

这样即使有轻微布局误差，也不会出现明显间隙。

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