我怎样才能在 SwiftUI 中滚动到顶部

Question

我正在学习 SwiftUI，但我遇到了一个问题...当 SegmentedControl 值更改时，如何在 ScrollView 中滚动到顶部？

这是主视图显示数据的代码：

var body: some View {
    NavigationView {
        SegmentedControl(selection: $selected) {
            Text("Food").tag(0)
            Text("Drinks").tag(1)
            Text("Wines").tag(2)
            }
            .padding()
        ScrollView {
            VStack(alignment: .center) {
                if selected == 0 {
                    ForEach (persons) {
                        AnyCell(person: [=10=], animal: nil, wine: nil)
                    }
                } else if selected == 1 {
                    ForEach (animals) {
                        AnyCell(person: nil, animal: [=10=], wine: nil)
                    }
                } else {
                    ForEach (wines) {
                        AnyCell(person: nil, animal: nil, wine: [=10=])
                    }
                }
            }
            }
            .navigationBarTitle(Text("Food list"), displayMode: .inline)
    }
}

谢谢

Answer 1

在 SwiftUI 中，如果您更改变量的值，将重新计算依赖于它的任何 body 属性。在您的情况下，仅更改选择将完全重置 ScrollView。

我不得不填补一堆缺失的部分（请在以后包括所有相关代码），但这是我所拥有的：

import SwiftUI

let people = ["John", "Sarah", "Cathy"]
let animals = ["Cat", "Dog", "Rabbit", "Bird", "Lion", "Snake", "Cat", "Dog", "Rabbit", "Bird", "Lion", "Snake"]
let wines = ["Sauvignon Blanc", "Syrah", "Pinot Noir", "Champagne", "Sauvignon Blanc", "Syrah", "Pinot Noir", "Champagne", "Sauvignon Blanc", "Syrah", "Pinot Noir", "Champagne", "Sauvignon Blanc", "Syrah", "Pinot Noir", "Champagne"]

struct ContentView : View {
    @State var selected: Int = 0

    var body: some View {
        NavigationView {
            VStack {
                SegmentedControl(selection: $selected) {
                    Text("Food").tag(0)
                    Text("Drinks").tag(1)
                    Text("Wines").tag(2)
                    }
                    .padding()

                    if selected == 0 {
                        ScrollView {
                            VStack(alignment: .center) {
                                ForEach (people.identified(by: \.self)) {
                                    CellView(title: [=10=])
                                }
                            }
                        }
                    } else if selected == 1 {
                        ScrollView {
                            VStack(alignment: .center) {
                                ForEach (animals.identified(by: \.self)) {
                                    CellView(title: [=10=])
                                }
                            }
                        }
                    } else {
                        ScrollView {
                            VStack(alignment: .center) {
                                ForEach (wines.identified(by: \.self)) {
                                    CellView(title: [=10=])
                                }
                            }
                        }
                    }
                }.navigationBarTitle(Text("Food list"), displayMode: .inline)
        }
    }
}

struct CellView : View {
    let title: String

    var body: some View {
        Text(title).font(.largeTitle).frame(height: 100).background(Color.green)
    }
}

当您更改 selected 时，将重新创建 ScrollView，这会将其滚动条留在顶部。要对其进行测试，请点击 "Wines"，向下滚动一点，然后点击其他任何一个。

我怎样才能在 SwiftUI 中滚动到顶部

How can I scrollToTop in SwiftUI

ios

swift

swiftui