SwiftUI实现段落内单个可点击下划线文字（禁用.onOpenURL）

问题背景 #

需求：在通过UIHostingController嵌入UIKit应用的SwiftUI视图中，实现段落内特定文字可点击且带有下划线效果。

已尝试的方案及遇到的问题：

• .onOpenURL/自定义URL方案：在UIKit侧产生副作用，传递UIKit ViewController定义的函数时触发unrecognized selector sent to instance....错误，无法使用。
• 临时方案：给包裹文本的HStack添加onTapGesture，但只能让整段文字可点击，不符合“特定文字点击”的需求。
• 组合多段Text视图：不同长度/组合的文字会导致段落格式不统一；给单段Text添加.onTapGesture时会报错：Cannot convert value of type 'some View' to expected argument type 'Text'（因为onTapGesture返回的是View类型，无法和Text用+拼接）。

疑问：

1. 有没有不依赖.onOpenURL的纯SwiftUI方案，能实现段落内单个文字的点击？
2. 能否结合AttributedString和.onTapGesture来调用自定义函数？

测试代码：

private struct Paragraph: View {
    let actionLabel: String = "Action" // <- 需要带下划线且可点击的文字

    let actionLabelSecondary: String = "end of first sentence."

    let textBody: String = "Beginning of second sentence lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
    
    var body: some View {
        HStack {
            Text(actionLabel)
                .underline()
                .onTapGesture { // <- 报错：Cannot convert value of type 'some View' to expected argument type 'Text'
                    action()
                }
            + Text(" \(actionLabelSecondary) ")
            + Text(textBody)
        }
    }
    
    func action() {
        print("Word tapped")
    }
}

可行解决方案 #

方案1：透明 overlay 实现可点击区域（最简单高效） #

核心思路是给目标Text叠加一层透明的可点击Text，既保留原文字的格式，又不破坏Text的拼接逻辑：

private struct Paragraph: View {
    let actionLabel: String = "Action"
    let actionLabelSecondary: String = "end of first sentence."
    let textBody: String = "Beginning of second sentence lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
    
    var body: some View {
        // 原文字保留样式
        Text(actionLabel)
            .underline()
            // 叠加透明可点击层
            .overlay(
                Text(actionLabel)
                    .foregroundColor(.clear)
                    .onTapGesture {
                        action()
                    }
            )
        // 正常拼接其他文本
        + Text(" \(actionLabelSecondary) ")
        + Text(textBody)
    }
    
    func action() {
        print("Word tapped")
    }
}

这个方案完全基于SwiftUI原生API，段落会自动统一换行，格式不受文本长度影响，也不会和UIKit产生冲突。

方案2：AttributedString + 点击位置检测（适合复杂富文本） #

如果需要更复杂的富文本样式（比如不同颜色、字体），可以用AttributedString定义样式，再通过检测点击位置判断是否命中目标文字：

private struct Paragraph: View {
    let actionLabel: String = "Action"
    let actionLabelSecondary: String = "end of first sentence."
    let textBody: String = "Beginning of second sentence lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
    
    // 构建带样式的AttributedString
    private var fullAttributedText: AttributedString {
        let fullText = "\(actionLabel) \(actionLabelSecondary) \(textBody)"
        var attributedText = AttributedString(fullText)
        
        // 给目标文字添加下划线
        if let targetRange = attributedText.range(of: actionLabel) {
            attributedText[targetRange].underlineStyle = .single
            attributedText[targetRange].foregroundColor = .blue // 可选：添加点击态颜色
        }
        
        return attributedText
    }
    
    var body: some View {
        Text(fullAttributedText)
            .onTapGesture { location in
                guard let textView = getUnderlyingTextView(at: location) else { return }
                
                // 把点击位置转换为文字索引
                let charIndex = textView.layoutManager.characterIndex(
                    for: location,
                    in: textView.textContainer,
                    fractionOfDistanceBetweenInsertionPoints: nil
                )
                
                let fullText = String(fullAttributedText)
                // 判断点击位置是否在目标文字范围内
                if let targetRange = fullText.range(of: actionLabel),
                   charIndex >= fullText.distance(from: fullText.startIndex, to: targetRange.lowerBound),
                   charIndex <= fullText.distance(from: fullText.startIndex, to: targetRange.upperBound) {
                    action()
                }
            }
    }
    
    func action() {
        print("Word tapped")
    }
    
    // 获取SwiftUI Text底层的UITextView
    private func getUnderlyingTextView(at location: CGPoint) -> UITextView? {
        guard let keyWindow = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else { return nil }
        let hitView = keyWindow.hitTest(location, with: nil)
        return hitView as? UITextView ?? hitView?.superview?.subviews.compactMap { $0 as? UITextView }.first
    }
}

这个方案适合需要统一管理多段富文本样式的场景，缺点是需要依赖底层的UITextView做位置检测，但依然是纯SwiftUI层面的实现，不会影响UIKit侧逻辑。

方案3：自定义URL + OpenURLAction拦截（无UIKit副作用） #

如果之前的URL方案是因为传递到UIKit侧产生问题，可以用OpenURLAction在SwiftUI内部拦截自定义URL，避免副作用：

private struct Paragraph: View {
    let actionLabel: String = "Action"
    let actionLabelSecondary: String = "end of first sentence."
    let textBody: String = "Beginning of second sentence lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
    
    var body: some View {
        HStack {
            // 用Link包裹目标文字
            Link(actionLabel, destination: URL(string: "internal://tap-action")!)
                .underline()
            + Text(" \(actionLabelSecondary) ")
            + Text(textBody)
        }
        // 拦截URL请求，在内部处理点击逻辑
        .environment(\.openURL, OpenURLAction { url in
            if url.scheme == "internal" && url.host == "tap-action" {
                action()
                return .handled // 标记为已处理，不会传递到UIKit侧
            }
            return .discarded
        })
    }
    
    func action() {
        print("Word tapped")
    }
}

这个方案利用SwiftUI的环境变量拦截URL，不会触发UIKit侧的URL处理逻辑，避免了之前的副作用，同时实现了点击效果。

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