当我按下工具栏按钮时，UI 冻结

Question

为什么在我的主页中，当我按几次菜单按钮之一后，UI 就会冻结。 我家没什么特别的，很简单，找不到什么问题。

有时按一次后有时按几次后但一段时间后用户界面就会冻结，只需简单地按菜单按钮即可。

import SwiftUI
import SwiftData

enum stateMode  {
    case deleteMode
    case updateMode
    case normalMode
}

struct Home: View {
    @ObservedObject var netManager: NetworkingManager
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    var columns: [GridItem] {
        if horizontalSizeClass == .regular {
            return [
                GridItem(.flexible(), spacing: 10, alignment: .center),
                GridItem(.flexible(), spacing: 10, alignment: .center),
                GridItem(.flexible(), spacing: 10, alignment: .center)
            ]
        } else {
            return [
                GridItem(.flexible(), spacing: 10, alignment: .center),
                GridItem(.flexible(), spacing: 10, alignment: .center)
            ]
        }
    }
    @State var openAddPlayList = false
    @Query var playListBackground : [PlayListModel] = []
    
    @State private var mode: stateMode = .normalMode
    
    
    var body: some View {
        GeometryReader { reader in
            NavigationStack {
                ZStack {
                    LinearGradient(colors: [.color1, .color2, .color3], startPoint: .bottom, endPoint: .topTrailing)
                        .ignoresSafeArea()
                    if playListBackground.isEmpty {
                        Spacer()
                        ContentUnavailableView("Please Insert a new Playlist", systemImage: "display.and.arrow.down")
                            .foregroundStyle(.white)
                        Spacer()
                    }
                    else {
                        ScrollView {
                            LazyVGrid(columns: columns, spacing: 20) {
                                ForEach(playListBackground) { playlist in
                                    PlaylistItemView(playlist: playlist, columns: columns, readerWidth: reader.size.width, mode: mode)
                                    
                                }
                            }
                        }
                    }
                }
                .navigationTitle("Playlists")
//                .navigationBarTitleTextColor(.white)
                .navigationBarBackButtonHidden(true)
                .toolbar {
                    ToolbarItemGroup {
                        Menu {
                            Button(action: {
                                withAnimation {
                                    mode = .deleteMode
                                }
                            }) {
                                Label("Delete Mode", systemImage: "trash.circle.fill")
                            }
                            Button(action: {
                                withAnimation {
                                    mode = .updateMode
                                }
                            }) {
                                Label("Update Mode", systemImage: "arrow.clockwise.circle.fill")
                            }
                        } label: {
                            Image(systemName: "ellipsis.circle")
                                .foregroundColor(.white)
                        }
                    }
                }
            }
        }
    }
}


// Define the PlaylistItemView
struct PlaylistItemView: View {
    let playlist: PlayListModel
    let columns: [GridItem]
    let readerWidth: CGFloat
    let mode: stateMode
    
    var body: some View {
        
        switch mode {
        case .normalMode:
            VStack {
                Image(systemName: "tv")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 50, height: 50)
                    .padding()
                Text(playlist.playlistName)
                    .foregroundColor(.white)
            }
            .frame(width: readerWidth / CGFloat(columns.count) - 20, height: 150)
            .background(Color.black.opacity(0.2))
            .cornerRadius(10)
            
        case .deleteMode:
            VStack {
                Image(systemName: "trash.circle.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 50, height: 50)
                    .padding()
                Text(playlist.playlistName)
                    .foregroundColor(.white)
            }
            .frame(width: readerWidth / CGFloat(columns.count) - 20, height: 150)
            .background(Color.black.opacity(0.2))
            .cornerRadius(10)
            
        case .updateMode:
            VStack {
                Image(systemName: "arrow.clockwise.circle.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 50, height: 50)
                    .padding()
                Text(playlist.playlistName)
                    .foregroundColor(.white)
            }
            .frame(width: readerWidth / CGFloat(columns.count) - 20, height: 150)
            .background(Color.black.opacity(0.2))
            .cornerRadius(10)
        }
       
    }
}

Answer 1

我相信这个问题是由体内的重新渲染和繁重计算引起的。

struct PlaylistItemView: View {
    let playlist: PlayListModel
    let columns: [GridItem]
    let readerWidth: CGFloat
    let mode: stateMode

    var body: some View {
        VStack {
            if mode ==.normalMode {
                Image(systemName: "tv")
            } else if mode ==.deleteMode {
                Image(systemName: "trash.circle.fill")
            } else {
                Image(systemName: "arrow.clockwise.circle.fill")
            }
           .resizable()
           .aspectRatio(contentMode:.fit)
           .frame(width: 50, height: 50)
           .padding()
            Text(playlist.playlistName)
               .foregroundColor(.white)
        }
       .frame(width: readerWidth / CGFloat(columns.count) - 20, height: 150)
       .background(Color.black.opacity(0.2))
       .cornerRadius(10)
    }
}

不要进行递归调用，而是尝试在单个 vstack 中进行，这应该可以解决您的问题。