SwiftUI实现拼接段落文本中单个元素独立点击功能的问题

直接拼接成Text后无法识别单个元素的点击，是因为整个文本是一个不可分割的块。要实现段落排版+单个元素可点击，我们可以利用带链接属性的AttributedString，给每个原数组元素绑定自定义URL，再通过onOpenURL识别点击的元素。

完整实现代码 #

import SwiftUI

struct ContentView: View {
    let dummyStrings = [
        "1Lorem ipsum dolor sit amet",
        "2consectetur adipiscing elit",
        "3sed do eiusmod tempor incididunt",
        "4ut labore et dolore magna aliqua",
        "5Ut enim ad minim veniam",
        "6quis nostrud exercitation ullamco",
        "7laboris nisi ut aliquip ex ea commodo consequat",
        "8Duis aute irure dolor in reprehenderit",
        "9in voluptate velit esse cillum dolore",
        "10 eu fugiat nulla pariatur"
    ]
    
    // 生成带自定义链接的AttributedString
    private func attributedString(for text: String, index: Int) -> AttributedString {
        var attrString = AttributedString(text)
        // 用自定义URL标记每个元素的索引
        attrString.link = URL(string: "custom://item/\(index)")
        attrString.foregroundColor = .blue // 保持原文本颜色
        return attrString
    }
    
    var body: some View {
        // 拼接所有带链接的AttributedString，中间加空格
        let attributedText = dummyStrings.enumerated().reduce(AttributedString()) { result, pair in
            let (index, text) = pair
            let attrStr = attributedString(for: text, index: index)
            return result.isEmpty ? attrStr : result + " " + attrStr
        }
        
        return ScrollView {
            Text(attributedText)
                .font(.body)
                .lineSpacing(5)
                .onOpenURL { url in
                    // 解析URL获取点击的元素索引
                    guard let indexString = url.pathComponents.last, 
                          let index = Int(indexString),
                          index < dummyStrings.count else { return }
                    
                    let tappedContent = dummyStrings[index]
                    print("点击了元素：\(tappedContent)")
                    // 这里可添加详情展示逻辑，比如弹出Sheet、导航到详情页等
                }
                .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

核心逻辑说明 #

1. 自定义URL标记：给每个数组元素生成的AttributedString绑定custom://item/索引格式的URL，用来唯一标识每个可点击片段。
2. 段落拼接：通过reduce将所有带链接的片段拼接成完整的段落文本，保留空格分隔。
3. 点击识别：利用onOpenURL回调解析点击的URL，提取索引后对应当前数组元素，进而处理详情展示逻辑。

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