Question

我想以流布局的方式显示单词列表，并能够“选择”一个单词（轻按一个单词并知道轻按了哪个单词）。我无法弄清楚如何以一种流畅的方式布置各个单词，因此我创建了一个Text视图，将单词作为一个由空格分隔的字符串，但是现在我不知道如何检测用onTapGesture修饰符敲击单词（或nil）。有办法吗？

    @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

我已经针对问题SwiftUI HStack with Wrap修改了@Asperi的答案，该问题创建了字符串数组的流布局。

编辑：实际上，点击操作效果不佳-仅第一行单词会记录点击手势，并且仅当您在单词上方点击时才会出现。无法在其他行上注册水龙头。真的很奇怪，闻起来像个虫子。

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

    }

Answer 2

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

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

2 个答案: