SwiftUI文本内URL蓝色着色与点击跳转功能实现问题求助

错误原因 #

你遇到的'Value of type 'URL' has no member 'startIndex'错误，是因为错误地尝试访问URL类型的startIndex属性——URL本身没有字符串索引，你需要的是链接在原文本中的位置范围，也就是NSTextCheckingResult对象的range属性。

正确实现方式 #

下面是一个符合需求的struct实现，支持检测文本中所有嵌套链接，链接显示为蓝色，点击可跳转，其余文本使用默认配色：

import SwiftUI
import UIKit

struct LinkText: View {
    let text: String
    
    var body: some View {
        Text(attributedText)
            .onTapGesture { location in
                guard let url = urlAtLocation(location) else { return }
                if UIApplication.shared.canOpenURL(url) {
                    UIApplication.shared.open(url)
                }
            }
    }
    
    // 构建带样式的富文本
    private var attributedText: AttributedString {
        var attributedString = AttributedString(text)
        
        guard let detector = try? NSDataDetector(types: NSTextCheckingResult.CheckingType.link.rawValue) else {
            return attributedString
        }
        
        let matches = detector.matches(
            in: text,
            options: [],
            range: NSRange(location: 0, length: text.utf16.count)
        )
        
        for match in matches {
            guard let range = Range(match.range, in: text),
                  let url = match.url else { continue }
            
            // 设置链接文本为蓝色
            attributedString[range].foregroundColor = .blue
            // 可选：添加下划线增强链接识别性
            attributedString[range].underlineStyle = .single
        }
        
        return attributedString
    }
    
    // 根据点击位置获取对应的URL
    private func urlAtLocation(_ location: CGPoint) -> URL? {
        guard let detector = try? NSDataDetector(types: NSTextCheckingResult.CheckingType.link.rawValue) else {
            return nil
        }
        
        let matches = detector.matches(
            in: text,
            options: [],
            range: NSRange(location: 0, length: text.utf16.count)
        )
        
        // 通过UITextView布局管理器判断点击位置对应的文本范围
        let textView = UITextView()
        textView.attributedText = NSAttributedString(attributedText)
        let layoutManager = textView.layoutManager
        let index = layoutManager.characterIndex(
            for: location,
            in: textView.textContainer,
            fractionOfDistanceBetweenInsertionPoints: nil
        )
        
        for match in matches {
            if NSLocationInRange(index, match.range) {
                return match.url
            }
        }
        
        return nil
    }
}

// 使用示例
struct LinkText_Previews: PreviewProvider {
    static var previews: some View {
        LinkText(text: "欢迎访问https://example.com，还有另一个链接https://apple.com")
    }
}

关键改进点 #

• 使用AttributedString统一处理文本样式，直接给链接对应的文本范围设置蓝色
• 支持检测文本中所有链接（原代码仅处理第一个匹配项）
• 通过UITextView布局管理器精准判断点击位置对应的链接，实现局部点击跳转
• 移除冗余的VStack包装，直接返回轻量化的Text组件

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