單擊列表項時滾動到 SwiftUI 中的正確位置

Question

我有一個 SwiftUI ForEach循環，其中包含單擊時展開的視圖。 類似於下面顯示的視圖。

struct ExpandingView: View {
    
    @State var isExpanded = false
    
    var body: some View {
        VStack {
            Text("Hello!")
            if isExpanded {
                Text("World")
            }
        }
        .onTapGesture {
            withAnimation {
                isExpanded.toggle()
            }
        }
    }
}

理論上，我可以使用ScrollViewReader和scrollTo特定位置。

ScrollViewReader { view in
    ScrollView {
        ForEach(0...100, id: \.self) { id in
             ExpandingView()
                 .id(id)
                 .padding()                        
        }
    }
}

但是，實際上，我不確定如何從視圖中獲取id （因為onTapGesture在視圖中）並將其向上傳播一層。

另一種選擇是在ForEach循環中使用onTapGesture ，但是我不確定如何切換isExpanded標志以獲得正確的視圖。

Answer 1

您可以將ScrollViewProxy傳遞給行視圖，然后您現在可以滾動。

struct ExpandingView: View {
    
    @State var isExpanded = false
    var id: Int
    var proxy: ScrollViewProxy
    var body: some View {
        VStack {
            Text("Hello!")
            if isExpanded {
                Text("World")
            }
        }
        .onTapGesture {
            withAnimation {
                isExpanded.toggle()
                proxy.scrollTo(id, anchor: .center)
            }
        }
    }
}

struct TestScrollView: View {
    var body: some View {
        ScrollViewReader { view in
            ScrollView {
                ForEach(0...100, id: \.self) { id in
                    ExpandingView(id: id, proxy: view)
                        .id(id)
                        .padding()
                }
            }
        }
    }
}

Answer 2

如果我正確理解您的問題，您會問如何將“ContentView ScrollView”中的 id 傳遞到 ExpandingView。 試試這個：

import SwiftUI

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}           
struct ExpandingView: View {
    @State var worldId: Int
    @State var isExpanded = false
    
    var body: some View {
        VStack {
            Text("Hello!")
            if isExpanded { Text("World \(worldId)") }
        }.onTapGesture {
            withAnimation { isExpanded.toggle() }
        }
    }
}

struct ContentView: View {
    var body: some View {
        ScrollViewReader { view in
            ScrollView {
                ForEach(0...100, id: \.self) { id in
                    ExpandingView(worldId: id).id(id).padding()
                }
            }
        }
    }
}