Why is the Navigation Title and Picker View is scrolling without it being inside a Scroll View?

Question

Sorry for the weird title, I'm not sure how to explain it properly.

I'm facing an issue where the Navigation Title and Picker View is scrolling with the content, even though it is not inside the Scroll View.

I'm adding a video for better context.

I'm not able to figure out the solution, and it gets fixed when I switch the Picker View and back.

Video of the issue

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

If it works as expected after changing picker value, you could set isBitcoin to false as a default. Then add an .onAppear { isBitcoin =.true } as a hacky work around. But I'm sure I've seen this behavior before and the navigation titles like to stick to the content below.

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
        }
    }
}

Or you just create your own title label to avoid this. Just depends on what exactly you're after.

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()
        }
    }
}