SwiftUI中如何动态组合带onTapGesture的多个Text视图

1. 带onTapGesture的Text能否组合？ #

不行。Text添加onTapGesture修饰符后，返回的类型不再是Text，而是ModifiedContent<Text, _TapGestureModifier>，无法通过as! Text强制转换，运行时会直接崩溃——你原代码里的强制转换正是问题核心。

SwiftUI的Text的+操作符仅支持组合纯Text实例，一旦添加手势、悬停这类修饰符，类型就会改变，无法再参与+组合。

2. macOS平台能否添加onHover修饰符？ #

同样，直接给单个Text加onHover后也无法用+组合，原因和上述一致——类型不再是Text。但可以通过其他方式实现每个单词的悬停效果。

可行的实现方案 #

方案一：使用AttributedString（推荐，iOS 15+/macOS 12+） #

通过AttributedString给每个单词标记自定义属性，再给整体文本添加手势识别点击位置对应的单词；macOS下也可通过类似逻辑处理悬停：

import SwiftUI

struct ContentView: View {
    let sentence = "Combining text views like this is as close as we get to attributed strings in SwiftUI – there is no support for using NSAttributedString at this time."
    
    var body: some View {
        ScrollView {
            if #available(iOS 15.0, macOS 12.0, *) {
                Text(attributedSentence)
                    .font(.largeTitle)
                    .onTapGesture { location in
                        guard let textView = NSApp.keyWindow?.firstResponder as? NSTextView else { return }
                        let layoutManager = textView.layoutManager
                        let characterIndex = layoutManager.characterIndex(for: location, in: textView.textContainer, fractionOfDistanceBetweenInsertionPoints: nil)
                        if characterIndex < attributedSentence.characters.count {
                            let wordRange = attributedSentence.rangeOfWord(at: characterIndex)
                            if let word = attributedSentence[wordRange].string.trimmingCharacters(in: .punctuationCharacters) {
                                print(word)
                            }
                        }
                    }
                    .onHover { isHovering in
                        // 可复用点击逻辑识别悬停单词，添加样式变化
                    }
            } else {
                Text(sentence)
            }
        }
    }
    
    @available(iOS 15.0, macOS 12.0, *)
    private var attributedSentence: AttributedString {
        var attributedString = AttributedString(sentence)
        let words = sentence.split(separator: " ")
        var currentIndex = 0
        for word in words {
            let wordString = String(word)
            if let range = attributedString.range(of: wordString, range: currentIndex..<attributedString.endIndex) {
                attributedString[range].customWord = wordString
                currentIndex = range.upperBound.utf16Offset(in: attributedString)
            }
        }
        return attributedString
    }
}

// 自定义AttributedString属性
extension AttributeScopes {
    struct CustomAttributes: AttributeScope {
        let customWord: CustomWordAttribute
    }
}

extension AttributeDynamicLookup {
    subscript<T: AttributeKey>(dynamicMember keyPath: KeyPath<AttributeScopes.CustomAttributes, T>) -> T {
        self[T.self]
    }
}

struct CustomWordAttribute: AttributeKey {
    typealias Value = String
}

extension AttributedString {
    func rangeOfWord(at index: Int) -> Range<AttributedString.Index> {
        let startIndex = self.index(self.startIndex, offsetBy: index)
        var wordStart = startIndex
        var wordEnd = startIndex
        
        while wordStart > self.startIndex && !self[wordStart].isWhitespace && !self[wordStart].isPunctuation {
            wordStart = self.index(before: wordStart)
        }
        if self[wordStart].isWhitespace || self[wordStart].isPunctuation {
            wordStart = self.index(after: wordStart)
        }
        
        while wordEnd < self.endIndex && !self[wordEnd].isWhitespace && !self[wordEnd].isPunctuation {
            wordEnd = self.index(after: wordEnd)
        }
        
        return wordStart..<wordEnd
    }
}

方案二：使用可换行的HStack布局（兼容旧系统） #

自定义自动换行的布局容器，将每个单词作为独立Text添加手势和悬停修饰符：

import SwiftUI

struct WrapHStack<Content: View>: View {
    let spacing: CGFloat
    let content: [Content]
    
    init(spacing: CGFloat = 8, @ViewBuilder content: () -> [Content]) {
        self.spacing = spacing
        self.content = content()
    }
    
    var body: some View {
        GeometryReader { geometry in
            self.generateContent(in: geometry)
        }
    }
    
    private func generateContent(in geometry: GeometryProxy) -> some View {
        var width = CGFloat.zero
        var height = CGFloat.zero
        
        return ZStack(alignment: .topLeading) {
            ForEach(0..<content.count) { index in
                content[index]
                    .padding([.horizontal, .vertical], 4)
                    .alignmentGuide(.leading) { d in
                        if abs(width - d.width) > geometry.size.width {
                            width = 0
                            height -= d.height
                        }
                        let result = width
                        if index == content.count - 1 {
                            width = 0
                        } else {
                            width -= d.width + spacing
                        }
                        return result
                    }
                    .alignmentGuide(.top) { d in
                        let result = height
                        if index == content.count - 1 {
                            height = 0
                        }
                        return result
                    }
            }
        }
    }
}

struct ContentView: View {
    let sentence = "Combining text views like this is as close as we get to attributed strings in SwiftUI – there is no support for using NSAttributedString at this time."
    
    var body: some View {
        ScrollView {
            WrapHStack(spacing: 4) {
                sentence.split(separator: " ").map { word in
                    Text(word)
                        .font(.largeTitle)
                        .onTapGesture {
                            print(word)
                        }
                        .onHover { isHovering in
                            if isHovering {
                                print("Hovering over: \(word)")
                            }
                        }
                }
            }
            .padding()
        }
    }
}

这样每个单词可独立响应点击和悬停，同时文本会自动换行。

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