How to determine word tapped in a multi-word Text view in SwiftUI

Question

I want to display a list of words in a flow layout manner and be able to "select" a word (tap on a word and know what word was tapped on). I was not able to figure out how to lay out individual words in a flowing manner, so I created a single Text view with the words as a string separated by space, but now I don't know how to detect the word (or nil) tapped on with a onTapGesture modifier. Is there a way?

    @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=?")
            }
        }
    }

Screenshot:

Axenic

This sounds similar to which I solved in SwiftUI HStack with Wrap – Petersen

@Petersen Works well for me. – Axenic

Answer 1

I have adapted @Asperi's answer to this question SwiftUI HStack with Wrap which creates a flow layout of an array of strings.

EDIT: Actually the tapping is not working well -- only the first row words register a tap gesture, and only if you tap right above the word. Not able to register a tap on other rows. Really weird, and smells like a bug.

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

    }

Axenic

This is a layout that should be made generic. – Axenic

This was very useful! Thank you. – Discussion