SwiftUI首页点击菜单按钮后UI冻结问题求助

问题描述 #

在SwiftUI开发的Home视图中，点击菜单按钮几次后会出现UI冻结现象。视图结构简单无特殊逻辑，但无论点击次数多少，最终都会因点击菜单按钮导致UI冻结。

可能的原因 #

• GeometryReader与NavigationStack嵌套冲突：GeometryReader作为最外层容器，结合horizontalSizeClass动态生成Grid列数时，状态切换触发的布局更新可能引发主线程循环计算，导致阻塞。
• Grid列数重复计算：columns作为计算属性，每次状态变更（如mode切换）都会重新生成，触发LazyVGrid内所有PlaylistItemView的重绘，累积后拖慢UI。
• 不必要的动画开销：菜单按钮action中用withAnimation包裹状态变更，而此处仅需切换图标，动画会触发额外的视图层级重绘，加剧性能问题。

解决方案 #

1. 优化视图层级与布局计算 #

移除不必要的GeometryReader，改用SwiftUI原生自适应布局；缓存Grid列数避免重复计算。

2. 简化PlaylistItemView逻辑 #

提取图标名称逻辑，移除对外部布局参数的依赖，让视图自动适配父容器尺寸。

3. 移除冗余动画 #

状态切换无需动画时直接修改状态，减少不必要的性能消耗。

修改后的代码 #

Home视图 #

import SwiftUI
import SwiftData

enum stateMode {
    case deleteMode
    case updateMode
    case normalMode
}

struct Home: View {
    @ObservedObject var netManager: NetworkingManager
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    
    // iOS 17+用@Memoized缓存列数，低版本可改用@State结合onChange监听sizeClass变化
    @Memoized private var columns: [GridItem] {
        horizontalSizeClass == .regular ?
        Array(repeating: GridItem(.flexible(), spacing: 10), count: 3) :
        Array(repeating: GridItem(.flexible(), spacing: 10), count: 2)
    }
    
    @State var openAddPlayList = false
    @Query var playListBackground: [PlayListModel] = []
    @State private var mode: stateMode = .normalMode
    
    var body: some View {
        NavigationStack {
            ZStack {
                LinearGradient(colors: [.color1, .color2, .color3], startPoint: .bottom, endPoint: .topTrailing)
                    .ignoresSafeArea()
                
                if playListBackground.isEmpty {
                    ContentUnavailableView("Please Insert a new Playlist", systemImage: "display.and.arrow.down")
                        .foregroundStyle(.white)
                } else {
                    ScrollView {
                        LazyVGrid(columns: columns, spacing: 20) {
                            ForEach(playListBackground) { playlist in
                                PlaylistItemView(playlist: playlist, mode: mode)
                                    .frame(height: 150)
                            }
                        }
                        .padding(.horizontal)
                    }
                }
            }
            .navigationTitle("Playlists")
            .navigationBarBackButtonHidden(true)
            .toolbar {
                ToolbarItemGroup {
                    Menu {
                        Button(action: {
                            mode = .deleteMode
                        }) {
                            Label("Delete Mode", systemImage: "trash.circle.fill")
                        }
                        Button(action: {
                            mode = .updateMode
                        }) {
                            Label("Update Mode", systemImage: "arrow.clockwise.circle.fill")
                        }
                    } label: {
                        Image(systemName: "ellipsis.circle")
                            .foregroundColor(.white)
                    }
                }
            }
        }
    }
}

PlaylistItemView #

struct PlaylistItemView: View {
    let playlist: PlayListModel
    let mode: stateMode
    
    private var systemImageName: String {
        switch mode {
        case .normalMode: return "tv"
        case .deleteMode: return "trash.circle.fill"
        case .updateMode: return "arrow.clockwise.circle.fill"
        }
    }
    
    var body: some View {
        VStack {
            Image(systemName: systemImageName)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 50, height: 50)
                .padding()
            Text(playlist.playlistName)
                .foregroundColor(.white)
        }
        .frame(maxWidth: .infinity)
        .background(Color.black.opacity(0.2))
        .cornerRadius(10)
    }
}

额外排查建议 #

• 使用Xcode的Time Profiler工具检测主线程阻塞点，确认是否有长时间运行的任务占用主线程。
• 检查PlayListModel是否符合SwiftData要求，确保属性不会触发不必要的视图更新。
• 临时移除@Query测试是否仍出现冻结，排除SwiftData查询导致的更新问题。

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