SwiftUI中如何为Text视图内特定文字添加onTapGesture与下划线？

问题场景 #

需要让段落中的特定带下划线文字（示例中的"Action"）单独可点击，但当前用Text("A") + Text("B")组合文本的方式，无法给单个Text同时添加underline()和onTapGesture（会触发类型转换错误）；用HStack包裹会导致长文本排版混乱；想使用Button但担心和文本流分离。

方案1：使用AttributedString（iOS 15+，推荐） #

这是最贴合需求的优雅实现，既能给目标文本添加样式，又能精准响应点击，还完全保留段落的自然排版。

struct TextView: View {
    let labelOne: String = "Action"
    let labelTwo: String = "end of first sentence."
    let text: String = "Begining of second sentence lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
    
    var body: some View {
        Text(attributedText)
            .onTapGesture { location in
                // 定位点击位置是否在目标文本范围内
                guard let targetRange = attributedText.range(of: labelOne) else { return }
                let textLayout = TextLayout(attributedText)
                let tappedIndex = textLayout.characterIndex(at: location)
                
                if targetRange.contains(tappedIndex) {
                    print("Action pressed")
                }
            }
    }
    
    // 构建带样式的富文本
    private var attributedText: AttributedString {
        var fullContent = AttributedString("\(labelOne) \(labelTwo) \(text)")
        
        if let targetRange = fullContent.range(of: labelOne) {
            fullContent[targetRange].underlineStyle = .single // 添加下划线
            fullContent[targetRange].foregroundColor = .blue // 可选：设置高亮颜色，提升辨识度
        }
        
        return fullContent
    }
}

说明 #

• 用AttributedString统一构建段落内容，给目标文本单独设置下划线样式；
• 通过TextLayout判断点击坐标对应的字符位置，精准触发目标文本的点击事件；
• 完全支持自动换行，排版和普通文本段落一致，不会出现布局错乱。

方案2：Button嵌入文本流（兼容iOS 14及以下） #

如果需要兼容更低系统版本，可以用Button模拟可点击文本，通过调整样式让它和普通文本融为一体，同时保持正常排版。

struct TextView: View {
    let labelOne: String = "Action"
    let labelTwo: String = "end of first sentence."
    let text: String = "Begining of second sentence lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
    
    var body: some View {
        // 用VStack保持左对齐，让文本流自动换行
        VStack(alignment: .leading) {
            Button(action: {
                print("Action pressed")
            }) {
                Text(labelOne)
                    .underline()
                    .foregroundColor(.blue)
            }
            .buttonStyle(PlainButtonStyle()) // 去掉Button默认的高亮样式，让它看起来和普通文本一致
            + Text(" \(labelTwo) ")
            + Text(text)
        }
    }
}

说明 #

• 把Button作为可点击的文本元素，通过PlainButtonStyle()移除默认样式，视觉上和普通文本无差异；
• 直接和其他Text用+拼接，自动遵循文本流的换行规则，不会出现HStack的布局问题；
• 点击Button时会直接触发操作，同时保留下划线样式。

原代码报错原因 #

Text的+操作仅支持拼接Text类型的视图，而onTapGesture会将Text转换为some View，导致无法再和其他Text拼接，这就是你遇到"Cannot convert value of type 'some View' to expected argument type 'Text'"错误的原因。

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