如何在FXML的TextFlow中保留Text元素的横向间距

1. 使用XML非断空格实体替代空白Text元素 #

FXML解析时会忽略节点间的普通空格，但可以用 （非断空格实体）直接给Text元素设置空格内容，比单独创建空白Text元素更简洁：

<TextFlow>
    <Text text="用户名" style="-fx-fill: #333; -fx-font-weight: bold;"/>
    <Text text="&#160;"/>
    <Text text="张三" style="-fx-fill: #666;"/>
</TextFlow>

2. 给单个Text元素设置CSS内边距 #

之前你说-fx-padding无效，大概率是加到了TextFlow容器上而非单个Text元素。给需要间距的Text设置左右内边距，就能实现和相邻元素的间隔：

.text-gap-right {
    -fx-padding: 0 8px 0 0; /* 给右侧留8px间距 */
}

FXML中给目标Text添加样式类：

<TextFlow>
    <Text text="邮箱" style="-fx-fill: #333;" styleClass="text-gap-right"/>
    <Text text="zhangsan@example.com" style="-fx-fill: #0066cc;"/>
</TextFlow>

3. 用Java代码批量添加间距（适合大量Text元素场景） #

如果FXML里有很多Text需要加间距，手动写太麻烦，可以在Controller里写个工具方法批量处理：

@FXML
private TextFlow styledTextFlow;

@Override
public void initialize() {
    addSpacingBetweenTextNodes(styledTextFlow);
}

private void addSpacingBetweenTextNodes(TextFlow flow) {
    List<Node> originalChildren = new ArrayList<>(flow.getChildren());
    flow.getChildren().clear();
    
    for (int i = 0; i < originalChildren.size(); i++) {
        flow.getChildren().add(originalChildren.get(i));
        // 给除最后一个外的所有元素后加空格
        if (i != originalChildren.size() - 1) {
            flow.getChildren().add(new Text(" "));
        }
    }
}

这样只需要在FXML里正常写Text元素，代码会自动帮你插入空白节点。

补充：为什么xml:space="preserve"会报错？ #

JavaFX的FXML解析器并不支持xml:space属性，它会默认忽略XML节点之间的空白字符，所以即使你写了这个属性也会触发解析错误，这个方法行不通。

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