Navigation Title与Picker View未在Scroll View内却随内容滚动的问题

问题现象 #

Navigation Title和分段Picker未嵌套在ScrollView中，但滚动页面内容时，这两个元素会跟着一起滚动；切换Picker选项后，该问题会暂时消失。

问题原因 #

1. navigationTitle错误修饰在Picker上，导致导航栏布局关联异常
2. 外层VStack结合内部ScrollView的布局结构，让顶部元素被卷入滚动上下文

修复方案 #

• 将navigationTitle移到外层VStack的修饰器上，确保导航栏属于NavigationStack的顶层容器
• 调整内部视图布局，移除多余空白元素，避免ScrollView滚动影响顶部固定元素

修复后的完整代码 #

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)
                
                if isBitcoin {
                    bitcoin
                } else {
                    lightning
                }
            }
            .padding()
            .navigationTitle(isBitcoin ? "Bitcoin" : "Lightning")
        }
    }
    
    var bitcoin: some View {
        VStack(spacing: 0) {
            ScrollView {
                Text("0")
                    .frame(width: 50)
                    .font(.title)
                    .padding(.top, 200)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            .refreshable {
                print("hello")
            }
            
            HStack {
                Button(action: {}) {
                    ZStack {
                        Rectangle()
                            .stroke(Color.blue)
                            .frame(width: 80, height: 80)
                        Image(systemName: "arrow.up")
                    }
                }
                .padding(.trailing, 30)
                
                Button(action: {}) {
                    ZStack {
                        Rectangle()
                            .stroke(Color.blue)
                            .frame(width: 80, height: 80)
                        Image(systemName: "arrow.down")
                    }
                }
                .padding(.leading, 30)
            }
            .padding(.vertical)
        }
    }
    
    var lightning: some View {
        VStack(spacing: 0) {
            ScrollView {
                Text("0")
                    .font(.title)
                    .frame(width: 50)
                    .padding(.top, 200)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            .refreshable {
                print("Hello")
            }
            
            HStack {
                Button(action: {}) {
                    ZStack {
                        Rectangle()
                            .stroke(Color.blue)
                            .frame(width: 80, height: 80)
                        Image(systemName: "arrow.up")
                    }
                }
                
                Button(action: {}) {
                    ZStack {
                        Rectangle()
                            .stroke(Color.blue)
                            .frame(width: 80, height: 80)
                        Image(systemName: "arrow.down")
                    }
                }
                .padding(.horizontal, 30)
                
                Button(action: {}) {
                    ZStack {
                        Rectangle()
                            .stroke(Color.blue)
                            .frame(width: 80, height: 80)
                        Image(systemName: "gear")
                    }
                }
            }
            .padding(.vertical)
        }
    }
}

#Preview {
    BitcoinView()
}

额外说明 #

• 移除原代码中多余的Spacer()，避免布局出现不确定空白
• 给ScrollView内部文本添加frame(maxWidth: .infinity, maxHeight: .infinity)，确保滚动范围正确
• 调整按钮栏内边距，优化视觉布局

内容的提问来源于stack exchange，提问作者Roy0Anonymous