Apple Watch中SwiftUI第三级视图导航标题不更新及渲染异常原因排查

问题描述 #

我编写了一个包含三级视图的SwiftUI示例代码，在Apple Watch上运行时遇到两个问题：

• 导航到第三级视图时，导航标题未更新为"Third"，仍显示上一级的"Second"
• 下拉第二级列表时，出现视图渲染异常（列表内容显示错位）

示例代码 #

struct Element: Identifiable {
    let id = UUID()
    let text: String
    init(text: String) {
        self.text = text
    }
}

struct FirstView: View {
    @State var elements = [Element(text: "a"), Element(text: "b")]
    var body: some View {
        NavigationView {
            List(elements) { element in
                NavigationLink {
                    SecondView()
                } label: {
                    VStack(alignment: .leading, spacing: 3, content: {
                        Text(element.text)
                            .font(.system(size: 12))
                            .foregroundColor(.white)
                    })
                }
            }
            .navigationTitle("First")
        }
    }
}

struct SecondView: View {
    @State var elements = [Element(text: "1"), Element(text: "2")]
    var body: some View {
        NavigationView {
            List(elements) { element in
                NavigationLink {
                    ThirdView()
                } label: {
                    VStack(alignment: .leading, spacing: 3, content: {
                        Text(element.text)
                            .font(.system(size: 12))
                            .foregroundColor(.white)
                    })
                }
            }
            .navigationTitle("Second")
        }
    }
}

struct ThirdView: View {
    @State var elements = [Element(text: "+"), Element(text: "-")]
    var body: some View {
        NavigationView {
            List(elements) { element in
                NavigationLink {
                    SecondView()
                } label: {
                    VStack(alignment: .leading, spacing: 3, content: {
                        Text(element.text)
                            .font(.system(size: 12))
                            .foregroundColor(.white)
                    })
                }
            }
            .navigationTitle("Third")
        }
    }
}

问题原因 #

核心错误是每个视图都重复嵌套了NavigationView。在Apple Watch的SwiftUI导航体系中，应该遵循以下规则：

• 仅在根视图（这里是FirstView）中添加一个NavigationView作为导航容器
• 所有子视图（SecondView、ThirdView）无需再包裹NavigationView，直接通过NavigationLink跳转即可

重复嵌套NavigationView会导致导航栈层级混乱，系统无法正确识别当前视图的导航标题，同时会干扰列表的布局计算，引发下拉时的渲染异常。

修正后的代码 #

struct Element: Identifiable {
    let id = UUID()
    let text: String
    init(text: String) {
        self.text = text
    }
}

struct FirstView: View {
    @State var elements = [Element(text: "a"), Element(text: "b")]
    var body: some View {
        NavigationView {
            List(elements) { element in
                NavigationLink {
                    SecondView()
                } label: {
                    VStack(alignment: .leading, spacing: 3) {
                        Text(element.text)
                            .font(.system(size: 12))
                            .foregroundColor(.white)
                    }
                }
            }
            .navigationTitle("First")
        }
    }
}

struct SecondView: View {
    @State var elements = [Element(text: "1"), Element(text: "2")]
    var body: some View {
        List(elements) { element in
            NavigationLink {
                ThirdView()
            } label: {
                VStack(alignment: .leading, spacing: 3) {
                    Text(element.text)
                        .font(.system(size: 12))
                        .foregroundColor(.white)
                }
            }
        }
        .navigationTitle("Second")
    }
}

struct ThirdView: View {
    @State var elements = [Element(text: "+"), Element(text: "-")]
    var body: some View {
        List(elements) { element in
            NavigationLink {
                SecondView()
            } label: {
                VStack(alignment: .leading, spacing: 3) {
                    Text(element.text)
                        .font(.system(size: 12))
                        .foregroundColor(.white)
                }
            }
        }
        .navigationTitle("Third")
    }
}

修正效果 #

• 第三级视图的导航标题会正确显示为"Third"
• 下拉第二级列表时，视图渲染恢复正常，不会出现错位问题

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