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/