为什么导航标题和选取器视图在滚动而不位于滚动视图内？

Question

抱歉这个奇怪的标题，我不知道如何正确解释它。

我面临的问题是导航标题和选择器视图随内容一起滚动，即使它不在滚动视图内。

我正在添加视频以获得更好的背景信息。

我无法找出解决方案，当我切换选择器视图并返回时它会得到修复。

问题视频

import SwiftUI

struct BitcoinView: View {
    @State var isBitcoin: Bool = true
    var body: some View {
        NavigationStack {
            VStack {
                Picker("Bitcoin or Lightning", selection: $isBitcoin) {
                    Text("Bitcoin").tag(true)
                    Text("Lightning").tag(false)
                }
                .pickerStyle(.segmented)
                .navigationTitle(isBitcoin ? "Bitcoin" : "Lightning")
                Spacer()
                if isBitcoin {
                    bitcoin
                } else {
                    lightning
                }
            }
            .padding()
        }
    }
    
    var bitcoin: some View {
        VStack() {
            ScrollView {
                Text("0")
                    .frame(width: 50)
                    .font(.title)
                    .padding(.top, 200)
            }
            .refreshable {
                print("hello")
            }
            Spacer()
            HStack {
                Button(action: {
                    
                }, label: {
                    ZStack {
                        Rectangle()
                            .stroke(Color.blue)
                            .frame(width: 80, height: 80)
                        Image(systemName: "arrow.up")
                    }
                })
                .padding(.trailing, 30)
                Button(action: {
                    
                }, label: {
                    ZStack {
                        Rectangle()
                            .stroke(Color.blue)
                            .frame(width: 80, height: 80)
                        Image(systemName: "arrow.down")
                    }
                })
                .padding(.leading, 30)
            }
        }
    }
    
    var lightning: some View {
        VStack {
            ScrollView {
                Text("0")
                    .font(.title)
                    .frame(width: 50)
                    .padding(.top, 200)
            }
            .refreshable {
                print("Hello")
            }
            Spacer()
            HStack {
                Button(action: {
                    
                }, label: {
                    ZStack {
                        Rectangle()
                            .stroke(Color.blue)
                            .frame(width: 80, height: 80)
                        Image(systemName: "arrow.up")
                    }
                })
                Button(action: {
                    
                }, label: {
                    ZStack {
                        Rectangle()
                            .stroke(Color.blue)
                            .frame(width: 80, height: 80)
                        Image(systemName: "arrow.down")
                    }
                })
                .padding(.horizontal, 30)
                Button(action: {
                    
                }, label: {
                    ZStack {
                        Rectangle()
                            .stroke(Color.blue)
                            .frame(width: 80, height: 80)
                        Image(systemName: "gear")
                    }
                })
            }
        }
    }
}

#Preview {
    BitcoinView()
}

Answer 1

如果更改选择器值后它按预期工作，您可以将 isBitcoin 设置为 false 作为默认值。然后添加一个 .onAppear { isBitcoin =.true } 作为一个 hacky 解决方法。但我确信我以前见过这种行为，并且导航标题喜欢粘在下面的内容上。

struct BitcoinView: View {
    @State var isBitcoin: Bool = false
    var body: some View {
        NavigationStack {
            VStack {
                Picker("Bitcoin or Lightning", selection: $isBitcoin) {
                    Text("Bitcoin").tag(true)
                    Text("Lightning").tag(false)
                }
                .pickerStyle(.segmented)
                .navigationTitle(isBitcoin ? "Bitcoin" : "Lightning")
                Spacer()
                if isBitcoin {
                    bitcoin
                } else {
                    lightning
                }
            }
            .padding()
        }
        .onAppear {
            isBitcoin = true
        }
    }
}

或者您只需创建自己的标题标签即可避免这种情况。只是取决于你到底想要什么。

struct BitcoinView: View {
    @State var isBitcoin: Bool = true
    var body: some View {
        NavigationStack {
            VStack {
                Text(isBitcoin ? "Bitcoin" : "Lightning")
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .font(.largeTitle)
                    .fontWeight(.bold)
                
                Picker("Bitcoin or Lightning", selection: $isBitcoin) {
                    Text("Bitcoin").tag(true)
                    Text("Lightning").tag(false)
                }
                .pickerStyle(.segmented)
                
                Spacer()
                if isBitcoin {
                    bitcoin
                } else {
                    lightning
                }
            }
            .padding()
        }
    }
}