iPad端SwiftUI添加StackNavigationViewStyle后视图异常关闭并报内核错误

问题现象 #

为取消iPad端分屏显示，给NavigationView添加.navigationViewStyle(StackNavigationViewStyle())后，出现以下异常：

• 从视图A通过NavigationLink跳转至用户资料视图（视图C）时，视图C打开后立即自动关闭
• 控制台输出错误日志：

Failed to create 0x88 image slot (alpha=1 wide=0) (client=0xxxxxx)
[0x5 (os/kern) failure]
移除该样式后，异常消失，但iPad端会恢复分屏视图。

相关代码 #

视图A

NavigationView{
    //DISPLAY USERS
    ScrollView{
        ForEach ((vm.allUsers), id:\.id ) { user in
            // localizedCaseInsensitiveContains(searchText)
            if user.name.localizedCaseInsensitiveContains(userSearch) || user.gender.contains(userSearch) || user.weight.contains(userSearch) || user.height.contains(userSearch) {
                FollowingListRow(userUID: user.uid ,userName: user.name,userBio: user.userBio ,userProfileImage: user.profilePictureURL, userExercisePreferences: userExercisePreferences, userSocialLink: user.userSocialLink)
                 
            }
        }
    }

    .padding(.top, 15) // << add separation from list and search bar
    .navigationBarTitle("Search")

    //SEARCH
    .searchable(text: $userSearch ,placement: .navigationBarDrawer(displayMode: .always), prompt: "Search by gender, height or weight") // << always display search bar
    .disableAutocorrection(true) // << disable autocorrect
}
.navigationViewStyle(StackNavigationViewStyle()) // << for ipad styling

}

}

视图B

NavigationLink(destination: UserProfileView(userUID: userUID, name: userName, userBio: userBio, userProfilePicture: userProfileImage, journalCount: jm.userJournalCountNonUser, rm: rm, jm: jm, userSocialLink: userSocialLink, exercisePreferences: userExercisePreferences).padding(.top, -65) ){
    VStack{
        VStack{
            HStack{
                    WebImage(url: URL(string: userProfileImage))
                        .placeholder(Image("profileDefaultPicture"))
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width:60, height: 60)
                        .clipShape(Circle())
                        .padding(.leading, 20)
                        .padding(.trailing, 25)

              
                VStack{
                    HStack{
                        Text("TestName)
                            .font(.title)
                            
                        Spacer()
                    }
                 }

用户资料视图（视图C）

var body: some View {
    GeometryReader { Geo in
        VStack{
            WebImage(url: URL(string: userProfilePicture))
                .placeholder(Image("profileDefaultPicture").resizable())
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width:150, height: 150)
                    .clipShape(Circle())
                   
            HStack{
                Text(name ?? "" ).bold()
                    .font(.title2)
                    .padding(.bottom, 2)
            }
          }

修复方案 #

1. 调整负padding的位置 #

视图B中直接给NavigationLink的destination添加负padding会导致布局异常，触发导航栈状态错误。将负padding移至视图C内部：

• 修改视图B的NavigationLink：

NavigationLink(destination: UserProfileView(
    userUID: userUID, 
    name: userName, 
    userBio: userBio, 
    userProfilePicture: userProfileImage, 
    journalCount: jm.userJournalCountNonUser, 
    rm: rm, 
    jm: jm, 
    userSocialLink: userSocialLink, 
    exercisePreferences: userExercisePreferences
)) {
    // 原VStack内容
}

• 在视图C中添加padding：

var body: some View {
    GeometryReader { Geo in
        VStack{
            // 原视图内容
        }
        .padding(.top, -65) // 将负padding移至此处
    }
}

2. 修正WebImage占位符写法 #

占位符的resizable()调用位置错误，可能导致图像渲染异常，调整如下：

• 视图B中的WebImage：

WebImage(url: URL(string: userProfileImage))
    .placeholder {
        Image("profileDefaultPicture")
            .resizable()
    }
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width:60, height: 60)
    .clipShape(Circle())
    .padding(.leading, 20)
    .padding(.trailing, 25)

• 视图C中的WebImage同理调整占位符部分。

3. 提前过滤ForEach数据 #

视图A中在ForEach内部做过滤会频繁触发视图重建，影响导航稳定性，提前过滤数据：

NavigationView{
    let filteredUsers = vm.allUsers.filter { user in
        user.name.localizedCaseInsensitiveContains(userSearch) ||
        user.gender.contains(userSearch) ||
        user.weight.contains(userSearch) ||
        user.height.contains(userSearch)
    }
    
    ScrollView{
        ForEach(filteredUsers, id:\.id ) { user in
            FollowingListRow(
                userUID: user.uid,
                userName: user.name,
                userBio: user.userBio,
                userProfileImage: user.profilePictureURL,
                userExercisePreferences: userExercisePreferences,
                userSocialLink: user.userSocialLink
            )
        }
    }
    // 原修饰符保留
}
.navigationViewStyle(StackNavigationViewStyle())

4. 检查导航视图嵌套 #

确保视图C内部没有额外的NavigationView，导航栈由最外层的视图A统一管理，避免多层嵌套导致状态混乱。

原理说明 #

该异常本质是布局异常（如负padding导致视图尺寸异常）触发系统级图像渲染错误，进而导致导航栈状态异常，最终出现视图自动关闭的问题。通过调整布局层级、优化视图初始化逻辑，可以避免触发该系统bug。

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