SwiftUI 按下后退按钮时工具栏项目被剪裁

Question

我在 SwiftUI 中遇到了一个我似乎无法解决的奇怪行为。

鉴于以下简单的示例应用程序，我遇到了这种行为：工具栏项目在初始运行时正确呈现，但导航离开并返回它会被剪裁。

重新创建此代码的示例代码：

ContentView.swift

import SwiftUI

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

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

查看2.swift

import SwiftUI

struct View2: View {
    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
    }
}

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

Answer 1

它被导航栏裁剪，如下面的视图调试所示，所以它只是渲染问题（应该始终被裁剪）：

一种可能的解决方案是在NavigationView上方使用该小部件（在本例中为 Circle）并将其与工具栏项对齐。

这是主要部分：

.toolbar {
    Color.clear
        .frame(width: 150)
        .overlay(GeometryReader {
            Color.clear.preference(key: ViewPointKey.self,
                                 value: [$0.frame(in: .global).center])
        })
}

//...

Circle().fill(Color.red)
    .frame(width: 150, height: 150)
    .position(x: pos.x, y: pos.y)     // << here !!

//...

.onPreferenceChange(ViewPointKey.self) {
    pos = $0.first ?? .zero
}

完整的调查结果和代码在这里

Answer 2

子视图应该小于父视图。 请仔细阅读本指南。 https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/