SwiftUI の LazyVGrid でヒント ビューを表示する

ScrollView の LazyVGrid にはたくさんのボタンがあります。クリックしたボタンのすぐ上にヒントビューを表示しようとしています(キーボードポップアップのように)。 ScrollView ボタンの位置を取得する方法がわかりません。さらに、タスクを完了するために適切なジェスチャーを選択するのにも助けが必要です。

グラフィック表現...

これが私のコードです:

struct ShowHint: View {
    
    @State var isPressed: Bool = false
    var columns: [GridItem] = Array(repeating: .init(.flexible()), count: 5)
    
    var body: some View {
    
        ZStack{
            
            if isPressed {
                ShowOnTopOfButton().zIndex(1)
            }
            
            ScrollView(showsIndicators: false) {
                LazyVGrid(columns: columns, spacing: 30) {
                    ForEach(0..<500) { i in
                        Text("\(i)")
                            .padding(.vertical, 10)
                            .frame(maxWidth: .infinity)
                            .background(Color.red.opacity( isPressed ? 0.5 : 0.9))
                            .gesture(TapGesture()
                                        //.onStart { _ in isPressed = true } //but there is no property like this!
                                        .onEnded { _ in isPressed = !isPressed }
                            )
                    }
                }
            }
            .padding(.top, 50)
            .padding(.horizontal, 10)
        }
    }
}


struct ShowOnTopOfButton: View {
    
    var theS: String = "A"
    var body: some View {
        VStack {
            Text("\(theS)")
                .padding(20)
                .background(Color.blue)
        }
    }
}

考えられる解決策は次のとおりです。アイデアは、タップされた要素のオーバーレイとしてヒント ビューを表示することです。

Xcode 12 / iOS 14 でテスト済み

struct ShowHint: View {

    @State var pressed: Int = -1
    var columns: [GridItem] = Array(repeating: .init(.flexible()), count: 5)

    var body: some View {

        ZStack{

            ScrollView(showsIndicators: false) {
                LazyVGrid(columns: columns, spacing: 30) {
                    ForEach(0..<500) { i in
                        Text("\(i)")
                            .padding(.vertical, 10)
                            .frame(maxWidth: .infinity)
                            .background(Color.red.opacity( pressed == i ? 0.5 : 0.9))
                            .gesture(TapGesture()
                                .onEnded { _ in pressed = pressed == i ? -1 : i }
                            )
                            .overlay(Group {
                                if pressed == i {
                                    ShowOnTopOfButton()
                                        .allowsHitTesting(false)
                                }}
                            )
                    }
                }
            }
            .padding(.top, 50)
            .padding(.horizontal, 10)
        }
    }
}

2

良い仕事ができましたが、1 つ調整がありました。実際には、タップ開始時にヒントビューを表示し、タップ終了時にヒントビューを表示したいと考えています。しかし、TapGesture には onStarted イベントがないので残念です!

2020 年 9 月 5 日 5:27

それは別の質問ですが、そのためには、stackoverflow.com/a/62221523/12299030 のように DragGesture を使用し、onChanged でヒントをアクティブ化し、o で非アクティブ化する必要があります。n終了。

2020 年 9 月 5 日 6:01