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

Question

我想以流布局方式显示单词列表，并能够“选择”一个单词（点击一个单词并知道点击了哪个单词）。我无法弄清楚如何以流畅的方式布局各个单词，因此我创建了一个Text视图，其中单词作为由空格分隔的字符串，但现在我不知道如何检测单词（或零）用修改器点击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=?")
            }
        }
    }

截屏：

Answer 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
                        })
                }
            }
        }

    }