如何确定在 SwiftUI 中的多词文本视图中点击的词

Posted 2023-02-24

【中文标题】如何确定在 SwiftUI 中的多词文本视图中点击的词

【英文标题】：How to determine word tapped in a multi-word Text view in SwiftUI

【发布时间】：2020-04-27 15:01:05

【问题描述】：

我想以流布局的方式显示单词列表并能够“选择”一个单词（点击一个单词并知道点击了哪个单词）。我无法弄清楚如何以流畅的方式排列单个单词，所以我创建了一个 Text 视图，其中单词作为字符串以空格分隔，但现在我不知道如何检测单词（或 nil) 使用 onTapGesture 修饰符点击。有什么办法吗？

    @State var words : String = ["causticily", "sophora", "promiscuously", "lambaste", "pouring", "wagging", "tailblock", "coquette", "permeability", "rich", "enfilade", "centiloquy", "circumforaneous", "deturbation", "gecko", "nitro-chloroform", "migraine", "spellken", "convergence", "maggotish", "pester", "unprudent", "tenosynovitis", "yellowfish", "lionel", "turbinoid", "leased", "antitropous", "apportion", "metempsychosis", "ecchymosis", "beflower", "harns", "planetarium", "succinyl", "cremocarp", "catechisation", "capacify", "inburnt", "cabotage", "earing", "evestigate", "effectually", "balaniferous", "plowed", "angiospermatous", "acadian", "newfangly", "goblinize", "endotheca", "mesencephalon", "rose-colored", "talapoin", "academe", "cleanser", "escript", "vicine", "crossed"].joined(separator: " ")

    var body : some View 
        ZStack 
            Text(self.words)
                .lineLimit(nil)
                .onTapGesture  // (word:String?) in
                    print("word=?")
            
        
    

截图：

【问题讨论】：

这听起来和我在SwiftUI HStack with Wrap中解决的类似

@Asperi 很适合我。

【参考方案1】：

我已经改编了@Asperi 对这个问题SwiftUI HStack with Wrap 的回答，它创建了一个字符串数组的流布局。

编辑：实际上点击效果不佳——只有第一行的单词会注册一个点击手势，并且只有当你点击单词的正上方时。无法注册对其他行的点击。真的很奇怪，而且闻起来像虫子。

    @State var words : [String] = ["causticily", "sophora", "promiscuously", "lambaste", "pouring", "wagging", "tailblock", "coquette", "permeability", "rich", "enfilade", "centiloquy", "circumforaneous", "deturbation", "gecko", "nitro-chloroform", "migraine", "spellken", "convergence", "maggotish", "pester", "unprudent", "tenosynovitis", "yellowfish", "lionel", "turbinoid", "leased", "antitropous", "apportion", "metempsychosis", "ecchymosis", "beflower", "harns", "planetarium", "succinyl", "cremocarp", "catechisation", "capacify", "inburnt", "cabotage", "earing", "evestigate", "effectually", "balaniferous", "plowed", "angiospermatous", "acadian", "newfangly", "goblinize", "endotheca", "mesencephalon", "rose-colored", "talapoin", "academe", "cleanser", "escript", "vicine", "crossed"]

    var body : some View 
        var width = CGFloat.zero
        var height = CGFloat.zero

        return GeometryReader  g in
            ZStack(alignment: .topLeading) 
                ForEach(0..<self.words.count, id: \.self)  i in
                    Text(self.words[i])
                        .padding([.horizontal, .vertical], 4)
                        .onTapGesture 
                            print("word tapped=\(self.words[i])")
                    
                        .alignmentGuide(.leading, computeValue:  d in
                            if (abs(width - d.width) > g.size.width)
                            
                                width = 0
                                height -= d.height
                            
                            let result = width
                            if i < self.words.count-1 
                                width -= d.width
                             else 
                                width = 0 //last item
                            
                            return result
                        )
                        .alignmentGuide(.top, computeValue: d in
                            let result = height
                            if i >= self.words.count-1 
                                height = 0 // last item
                            
                            return result
                        )
                
            
        

    

【讨论】：

这是一个应该通用的布局。

【参考方案2】：

我的解决方案是使用 WKWebView 来选择点击的单词。这里是an example in SwiftUI。