SwiftUI点击导航返回按钮后Toolbar自定义元素被裁剪如何解决？

问题原因 #

该异常是SwiftUI导航体系的常见布局bug，由修饰符挂载位置错误触发：当前navigationTitle、toolbar这类导航相关修饰符被放在了NavigationLink内部的子视图上，而非NavigationView的根内容层级，导航栈在页面pop返回时无法正确识别Toolbar元素的布局上下文，就会出现自动裁剪的问题。

修复方案 #

• 调整修饰符挂载位置：将导航相关修饰符移到NavigationView的直接内容层级，不要嵌套在NavigationLink内部
• 明确Toolbar元素配置：如果需要在Toolbar内放置大尺寸自定义元素，可明确指定ToolbarItem的位置，必要时添加fixedSize()修饰符避免被默认容器裁剪
• （可选）高版本系统适配：最低支持iOS 16及以上的项目，建议替换为已取代NavigationView的NavigationStack API，导航层级管理的稳定性更高

修复后完整代码 #

ContentView.swift #

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: View2()) {
                Text("Hello, world!")
                    .padding()
            }
            .navigationTitle("View 1")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Circle()
                        .fill(Color.red)
                        .frame(width: 150, height: 150, alignment: .center)
                        .fixedSize()
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

View2.swift（无需修改） #

import SwiftUI

struct View2: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct View2_Previews: PreviewProvider {
    static var previews: some View {
        View2()
    }
}

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