SwiftUI ScrollView点击状态栏滚动到顶部时出现卡顿闪烁问题

使用SwiftUI 3.0的ScrollView组件时，点击状态栏触发滚动到顶部操作，会出现滚动动画卡顿、闪烁的问题，慢放效果如下：

• 错误使用负顶部边距调整ScrollView位置，导致系统计算滚动偏移量时出现异常
• navigationBarTitle修饰符挂载位置错误，导致导航栏和ScrollView滚动状态不同步
• Header视图尺寸未固定，滚动到顶部时触发视图重绘导致闪烁

按以下步骤修改代码即可修复问题：

• 移除ScrollView的.padding(.top, -1.0)修饰符，改用ignoresSafeArea处理顶部适配
• 将navigationBarTitle修饰符移动到NavigationView内部的ScrollView上
• 给FruitsHeaderView添加固定垂直尺寸的修饰符，避免动态重绘

修改后的FruitDetailsView代码 #

import SwiftUI

struct FruitDetailsView: View {
    
    var fruit: Fruit
    
    var body: some View {
        
        NavigationView {
            ScrollView(.vertical, showsIndicators: true) {
                VStack(alignment: .center, spacing: 20) {
                    VStack(alignment: .leading, spacing: 20) {
                        
                        FruitsHeaderView(fruit: fruit)
                            .aspectRatio(1, contentMode: .fit)
                            .cornerRadius(16)
                            .fixedSize(horizontal: false, vertical: true) // 新增：固定垂直尺寸，避免重绘
                        
                        Text(fruit.title)
                            .font(.largeTitle)
                            .fontWeight(.heavy)
                            .foregroundColor(fruit.gradientColors[1])
                        
                        Text(fruit.headline)
                            .font(.headline)
                            .multilineTextAlignment(.leading)
                        
                        Text("Learn more about \(fruit.title)".uppercased())
                            .fontWeight(.bold)
                            .foregroundColor(fruit.gradientColors[1])
                        
                        Text(fruit.description)
                            .multilineTextAlignment(.leading)
                    }
                    .padding(.horizontal, 20)
                    .frame(maxWidth: 640, alignment: .center)
                }
            }
            .ignoresSafeArea(edges: .top) // 替换原来的负顶部padding，适配导航栏
            .navigationBarTitle(fruit.title, displayMode: .automatic) // 修饰符移动到NavigationView内部子视图
        }
    }
}

struct FruitDetailsView_Previews: PreviewProvider {
    static var previews: some View {
        FruitDetailsView(fruit: fruitsData[0])
    }
}

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