如何用AttributedStrings实现类Git Diff的UI展示？

要实现类似GitHub的行内Diff样式，核心是把带标记的字符串片段拼接成单个Text元素内的富文本片段，而不是每个片段单独占一行。以下是具体实现步骤：

1. 处理单个Diff片段的样式 #

先写一个工具方法，根据前缀返回对应样式的Text片段，同时去掉多余的标记前缀：

private func styledText(for segment: String) -> Text {
    if segment.hasPrefix("+add") {
        let content = String(segment.dropFirst(4))
        return Text(content)
            .foregroundColor(.green)
            .background(Color.green.opacity(0.2))
    } else if segment.hasPrefix("-remove") { // 替换成你实际的移除前缀
        let content = String(segment.dropFirst(7))
        return Text(content)
            .foregroundColor(.red)
            .background(Color.red.opacity(0.2))
    } else {
        // 无标记的正常文本
        return Text(segment)
            .foregroundColor(.black)
    }
}

2. 拼接片段成完整行 #

情况1：所有片段属于同一行 #

如果你的diff数组是同一行的所有变更片段，直接用reduce拼接成单个Text：

VStack(alignment: .leading) {
    let fullLineText = diff.reduce(Text("")) { result, segment in
        result + styledText(for: segment)
    }
    fullLineText
}

情况2：片段按多行分组 #

如果diff数组包含多行的片段（比如每行片段用空字符串分隔），先按行分组，再逐行拼接：

// 假设用空字符串作为行分隔符，根据你的实际数据调整分组规则
let rows = diff.split(separator: "")

VStack(alignment: .leading) {
    ForEach(rows.indices, id: \.self) { index in
        let rowSegments = rows[index]
        let rowText = rowSegments.reduce(Text("")) { $0 + styledText(for: $1) }
        rowText
            .padding(.vertical, 2) // 可选：增加行间距提升可读性
    }
}

关键说明 #

• 不能在ForEach里直接用+拼接Text，因为ForEach是生成多个独立View；正确逻辑是先把同一行的所有片段合并成单个Text，再把每行的Text放到VStack中。
• 如果需要模拟Git的整行变更样式（比如整行背景色），可以给每行Text添加整体背景，同时调整片段样式即可。

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