如何将工具栏重置回其原始位置

Question

我正在尝试在 watchos 中设置一个工具栏，当我向下滚动视图时它会显示一个按钮。一切正常，按钮向下滚动，我可以导航到另一个页面。然而，当返回时，我希望滚动视图与应用程序加载时处于相同的位置，因此按钮不可见。

我现在的密码是：

struct ContentView: View {
    
    @State private var selectedPage: String? = nil
    
    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                ForEach(0..<100) {
                    Text("Row \([=10=])")
                }
            }
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    Button("Settings") {
                        selectedPage = "Settings"
                    }
                }
            }
            .background(
                NavigationLink(destination: SettingsView(), tag: "Settings",selection: $selectedPage) {}
                    .hidden()
            )
            .navigationTitle {
                Text("Navigation")
            }
        }
    }
}

我尝试过使用 scrollViewReader，但我认为我正在寻找错误的方向，因为它允许 scrollView 转到某个位置，但工具栏似乎不是它的一部分并且保持在视图中。当读取 scrollviews 偏移位置时（不是在代码中而是检查 gif），当按钮不可见时偏移量为 0（初始状态）。向下滚动时偏移量会增加，但是当向上滚动直到按钮可见时，滚动视图的偏移量也为 0。

struct ContentView: View {
    
    @State private var selectedPage: String? = nil
    
    var body: some View {
        ScrollView {
            ScrollViewReader { reader in
                VStack(alignment: .leading) {
                    ForEach(0..<100) { i in
                        Text("Row \(i)")
                            .id(i)
                    }
                    .toolbar {
                        ToolbarItem(placement: .primaryAction) {
                            Button("Settings") {
                                selectedPage = "Settings"
                            }
                        }
                    }
                    .background(
                        NavigationLink(destination: SettingsView(), tag: "Settings",selection: $selectedPage) {}
                            .hidden()
                    )
                    .onAppear {
                        withAnimation {
                            reader.scrollTo(0, anchor: .top)
                        }
                    }
                    .navigationTitle {
                        Text("Navigation")
                    }
                }
            }
        }
    }
}

选择1个值作为滚动到按钮的值时，将其按回顶部，并在列表ID 1中选择。

.onAppear {
    withAnimation {
    reader.scrollTo(1, anchor: .top)
    }
}

所以它可以使用 id 1 和更高版本，但是当使用 id 0 时，视图不会被重置。

那么如何将视图重置为按钮隐藏在顶部的初始状态？

Answer 1

只需添加一个 @State 属性即可解决此问题，它在加载视图时为 true，如果导航离开视图则更改为 false，然后有条件地在 .toolbar 视图修饰符中显示项目。

@State var loadedMainView = true

var body: some view {
    ScrollView {
        // .... code
    }
    .toolbar {
        ToolbarItem {
            if loadedMainView {
                Button("My Button") {
                }
            }
        }
    .onAppear {
        loadedMainView = true
    }
    .onDissappear {
        loadedMainView.toggle()      
}

如何将工具栏重置回其原始位置

How to reset the toolbar back to its original position

swiftui

watchos