滚动视图混淆了选项卡之间内容的大小

Question

我有一个滚动视图，其中有两个按钮可以切换滚动视图的内容。第一个选项卡的内容非常大，而第二个选项卡的内容与第一个选项卡相比非常小。该错误不是很一致并且很难重现，但最好的重现方法是在选择内容较大的选项卡时滚动，然后点击中途停止滚动并切换到另一个选项卡。然后只有背景显示没有项目被加载，直到你滚动一点并且滚动视图修复了它的内容大小。当错误发生时，滚动指示器仍然很小，即使我们已经移动到没有那么多内容的选项卡，它通常的滚动指示器要大得多

编辑：我现在尝试使用基于 https://www.youtube.com/watch?v=h0SgafWwoh8 的 .id(UUID())，并且我还尝试使用 ScrollViewReader 在内容更改时滚动到每个部分的顶部（使用 .onChange(of内容））。这两个都不起作用。

struct ContentView: View {
    
    enum Content: String {
        case one
        case two
    }
    
    @State private var contentSelection: Content = .one
    
    var body: some View {
        ZStack {
            Color.red
            GeometryReader { proxy in
                ScrollView {
                    ZStack {
                        LazyVStack(pinnedViews: .sectionHeaders) {
                            Text("There is some other content here")
                                .frame(height: proxy.size.height/2)
                                .background(Color.orange)
                            Section(header:
                                HStack {
                                    Spacer()
                                    Button(action: { contentSelection = .one }) {
                                        Text("One")
                                            .foregroundColor(contentSelection == .one ? .black : .gray)
                                    }
                                    Button(action: { contentSelection = .two }) {
                                        Text("two")
                                            .foregroundColor(contentSelection == .two ? .black : .gray)
                                    }
                                    Spacer()
                                }
                                .padding()
                                .background(Color.yellow)
                            ) {
                                switch contentSelection {
                                case .one:
                                    LazyVStack {
                                        ForEach((1...500), id: \.self) { item in
                                            ZStack {
                                                Text("This is item number \(item)")
                                            }
                                            .frame(height: 80)
                                        }
                                    }
                                case .two:
                                    LazyVStack {
                                        ForEach((1...50), id: \.self) { item in
                                            ZStack {
                                                Text("This is item number \(item)")
                                            }
                                            .frame(height: 80)
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .background(Color.green)
                }
            }
        }
    }
}

Answer 1

struct ContentView: View {
    
    enum Content: String {
        case one
        case two
    }
    
    @State private var contentSelection: Content = .one
    
    var body: some View {
        ZStack {
            Color.red
            GeometryReader { proxy in
                ScrollView {
                    ZStack {
                        LazyVStack(pinnedViews: .sectionHeaders) {
                            Text("There is some other content here")
                                .frame(height: proxy.size.height/2)
                                .background(Color.orange)
                            Section(header: headerView
                            ) {
                                switch contentSelection {
                                case .one:
                                    content1
                                case .two:
                                    content2
                                }
                            }
                        }
                    }
                    .background(Color.green)
                }
            }
        }
    }
    
    var content1: some View {
        LazyVStack {
            ForEach((1...500), id: \.self) { item in
                ZStack {
                    Text("This is item number \(item)")
                }
                .frame(height: 80)
            }
        }
    }
    
    var content2: some View {
        LazyVStack {
            ForEach((1...500), id: \.self) { item in
                ZStack {
                    Text("This is item number \(item)")
                }
                .frame(height: 80)
            }
        }
    }
    
    var headerView: some View {
        HStack {
            Spacer()
            Button(action: { contentSelection = .one }) {
                Text("One")
                    .foregroundColor(contentSelection == .one ? .black : .gray)
            }
            Button(action: { contentSelection = .two }) {
                Text("two")
                    .foregroundColor(contentSelection == .two ? .black : .gray)
            }
            Spacer()
        }
        .padding()
        .background(Color.yellow)
    }
}

滚动视图混淆了选项卡之间内容的大小

Scroll view confuses size of content between tabs

ios

xcode

swiftui

tabs

scrollview