ios - 一个 SwiftUI View 中的多个垂直 ScrollView

Question

我正在尝试实现一个包含三种不同数据类型的选项卡布局 LazyVGrid。为此，我采用了 Single scrollView 并创建了多个 LazyVGrid 来容纳此数据。

我面临的问题是，无论何时滚动选项卡 1 中的列表，选项卡中的列表都会以相同的偏移量滚动。

我已经尝试过两种不同的解决方案 -

1. 将 LazyVGrid 创建为变量 - 我无法这样做，因为它将拥有的数据属于 ViewModel，而且 LazyVGrid 在实际示例中是一个单独的 View 。
2. 每次都使用 ScrollView - 我尝试这样做，但每次当前选择的类型发生变化时，SwiftUI 都会强制 LazyVGrid 重新填充并从偏移量 0 开始显示。

下面是我的代码，如果有人能帮助我了解如何解决这个问题，那就太好了。

请找到我的代码和当前输出。我希望当我切换选项卡并返回时，ScrollView 偏移量保持在我离开它的位置。

import SwiftUI

enum SearchType: String, CaseIterable {
    case movie = "Movies"
    case tv = "TV Shows"
    case people = "People"
}

struct SearchContainerView: View {
@ObservedObject var viewModel = SearchViewModel()
@State var currentSelectedSearchType: SearchType = .movie

let array: [String] = ["The", "above", "works", "great", "when", "you", "know", "where", "in", "the", "array", "the", "value" ,"is", "that", "is", "when" ,"you", "know", "its", "index", "value", "As", "the", "index", "values", "begin", "at" ,"0", "the" ,"second", "entry", "will", "be", "at", "index", "1"]
var body: some View {
    NavigationView {

        VStack {
            HStack {
                ForEach(SearchType.allCases, id: \.self) { type in
                    HStack {
                        Spacer()
                        Text(type.rawValue)
                            .font(.title3)
                            .onTapGesture {
                                self.currentSelectedSearchType = type
                            }
                        Spacer()
                    }
                    .padding(5)
                    .background(currentSelectedSearchType == type ? Color.gray : Color.clear)
                    .cornerRadius(10)
                }
                .background(Color.gray.opacity(0.5))
                .cornerRadius(10)
                .padding(.horizontal)
            }


            ScrollView {
                switch currentSelectedSearchType {
                case .movie:
                    LazyVGrid(columns: [
                        GridItem(.flexible()),
                        GridItem(.flexible()),
                        GridItem(.flexible())
                    ], content: {
                        ForEach(array, id: \.self) {
                            Text($0).font(.largeTitle).bold().frame(width: UIScreen.main.bounds.width / 3, height: 100, alignment: .center)
                        }
                    })
                case .tv:
                    LazyVGrid(columns: [
                        GridItem(.flexible()),
                        GridItem(.flexible()),
                        GridItem(.flexible())
                    ], content: {
                        ForEach(array, id: \.self) {
                            Text($0).font(.largeTitle).bold().frame(width: UIScreen.main.bounds.width / 3, height: 100, alignment: .center)
                        }
                    })
                case .people:
                    LazyVGrid(columns: [
                        GridItem(.flexible()),
                        GridItem(.flexible()),
                        GridItem(.flexible())
                    ], content: {
                        ForEach(array, id: \.self) {
                            Text($0).font(.largeTitle).bold().frame(width: UIScreen.main.bounds.width / 3, height: 100, alignment: .center)
                        }
                    })
                }
            }

        }
    }
}

当前输出 -

<img src="https://i.imgur.com/TgkIXYo.mp4" alt="this slowpoke moves"  width="250" />

Answer 1

我知道您想在不同的 GridView 之间切换，但它们应该保持各自的滚动位置。

要实现这一点，所有 3 个 ScollView 都必须保留在 View 层次结构中，否则 - 如您所说 - 它们将被重建并失去它们的位置。

例如，您可以通过将所有内容放入 ZStack 并根据选择控制不透明度(和事件)来做到这一点:

struct ContentView: View {
    //@ObservedObject var viewModel = SearchViewModel()
    @State var currentSelectedSearchType: SearchType = .movie
    
    var body: some View {
        NavigationView {
            VStack {
                HStack {
                    ForEach(SearchType.allCases, id: \.self) { type in
                        HStack {
                            Spacer()
                            Text(type.rawValue)
                                .font(.title3)
                                .onTapGesture {
                                    self.currentSelectedSearchType = type
                                }
                            Spacer()
                        }
                        .padding(5)
                        .background(currentSelectedSearchType == type ? Color.gray : Color.gray.opacity(0.5))
                        .cornerRadius(10)
                    }
                    .padding(.horizontal)
                }
                
                ZStack { // here
                    SearchResults(type: "Movie")
                        .opacity(currentSelectedSearchType == .movie ? 1 : 0)
                    
                    SearchResults(type: "Show")
                        .opacity(currentSelectedSearchType == .tv ? 1 : 0)

                    SearchResults(type: "Actor")
                        .opacity(currentSelectedSearchType == .people ? 1 : 0)

                }
            }
        }
    }
}

struct SearchResults: View {
    let type: String
    var body: some View {
        ScrollView {
            LazyVGrid(columns: [
                GridItem(.flexible()),
                GridItem(.flexible()),
                GridItem(.flexible())
            ], content: {
                ForEach(0..<30) {
                    Text("\(type) \($0)")
                        .font(.title).bold()
                        .frame(height: 100, alignment: .center)
                }
            })
        }
    }
}