ScrollView的scrollBounceBehavior异常及视图拆分建议咨询

一、修复ScrollView不必要的弹跳问题 #

你的核心问题是NavigationStack的Toolbar干扰了ScrollView的高度计算，导致系统误判内容需要滚动。以下是两种可行的修复方案：

方案1：移除ZStack，改用Overlay加载视图 #

ZStack会让ScrollView默认占满整个屏幕（包括Toolbar区域），导致内容高度判断偏差。将LoadingView移到ScrollView的overlay中，让ScrollView直接作为NavigationStack的子视图，系统会自动计算扣除Toolbar后的可用高度：

NavigationStack {
    ScrollView {
        VStack(spacing: 25) {
            VStack(spacing: 0) {
                Text("Add a Pet")
                    .poppinsBold(size: 20)
                
                RoundedTextField("What is your pets name?", text: $name)
                    .focused($focusedField)
            }
            
            VStack(spacing: 20) {
                Text("Which type of pet do you have?")
                    .padding(.horizontal)
                
                HStack(spacing: 20) {
                    ForEach(Species.allCases, id: \.rawValue) { species in
                        AnimalType(species: species, selectedSpecies: $petSpecies)
                    }
                }
            }
            
            VStack {
                Text("What is your pets gender?")
                HStack {
                    ForEach(Gender.allCases, id: \.rawValue) { gender in
                        GenderCard(gender: gender, selectedGender: $gender)
                    }
                }
                .padding(.horizontal)
            }
            
            RoundedTextField("What is your pets breed?", text: $breed)
                .focused($focusedField)
            
            Button("Save") {
                loadingState = .loading
                Task {
                    if let petSpecies = petSpecies, let gender = gender {
                        try await vm.createPet(id: UUID().uuidString, name: name, species: petSpecies, gender: gender, breed: breed)
                    }
                    loadingState = .idle
                    dismiss()
                }
            }
            .buttonStyle(ConfirmButtonStyle())
            .padding(.horizontal)
            .disabled(!formIsValid || loadingState == .loading)
            
            Spacer()
                .frame(height: 50)
        }
        .padding(.top, 35)
    }
    .scrollBounceBehavior(.basedOnSize)
    .scrollIndicators(.hidden)
    .overlay {
        if loadingState == .loading {
            LoadingView(text: "Saving...", fullScreen: false)
        }
    }
    .onTapGesture {
        focusedField = false
    }
    .toolbar {
        ToolbarItem(placement: .topBarLeading) {
            Button {
                focusedField = false
                dismiss()
            } label: {
                Image(systemName: "xmark")
                    .font(.title2)
                    .bold()
            }
            .buttonStyle(.plain)
        }
    }
}

方案2：用GeometryReader明确设置内容高度 #

如果必须保留ZStack，通过GeometryReader获取屏幕可用高度，手动限制ScrollView内容的最大高度，确保系统能准确判断内容是否超出：

NavigationStack {
    GeometryReader { geo in
        ZStack {
            ScrollView {
                VStack(spacing: 25) {
                    // 原有表单内容不变
                }
                .padding(.top, 35)
                // 计算可用高度：屏幕高度 - 顶部安全区 - 导航栏预估高度(44) - 底部安全区
                .frame(maxHeight: geo.size.height - geo.safeAreaInsets.top - 44 - geo.safeAreaInsets.bottom)
            }
            .scrollBounceBehavior(.basedOnSize)
            .scrollIndicators(.hidden)
            
            if loadingState == .loading {
                LoadingView(text: "Saving...", fullScreen: false)
            }
        }
    }
    .onTapGesture {
        focusedField = false
    }
    .toolbar {
        // 原有Toolbar内容不变
    }
}

二、组件拆分建议 #

建议拆分为独立组件（比如SpeciesSelectorView、GenderSelectorView），原因如下：

• 复用性：物种、性别选择逻辑很可能在编辑宠物信息等其他页面复用，拆分后无需重复写代码。
• 可读性：主视图会更简洁，一眼就能看清表单的模块结构，降低维护成本。
• 可维护性：后续修改选择器的样式或交互时，直接修改对应组件即可，不会影响主视图的其他逻辑。

拆分后主视图示例：

NavigationStack {
    ScrollView {
        VStack(spacing:25) {
            VStack(spacing:0) {
                Text("Add a Pet").poppinsBold(size:20)
                RoundedTextField("What is your pets name?", text: $name)
                    .focused($focusedField)
            }
            
            SpeciesSelectorView(selectedSpecies: $petSpecies)
            GenderSelectorView(selectedGender: $gender)
            
            RoundedTextField("What is your pets breed?", text: $breed)
                .focused($focusedField)
            
            // 保存按钮等内容
        }
        .padding(.top,35)
    }
    // 其他修饰器和Toolbar
}

如果当前项目极小且确定组件不会复用，也可以暂时不拆分，但从长期开发角度，拆分是更优选择。

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