swiftui - SwiftUI 的 NavigationLink DetailView 纵向和横向的导航栏高度

Question

使用 iOS14.5、Swift5.4、XCode12.5 和 SwiftUI，

我正在尝试构建简单的 DetailView，您可以使用 NavigationLink 导航到该 View 。

这一切都有效，只是我不知道 DetailView 内的导航栏的高度。 (请注意，我通过在 DetailView 上调用 .navigationBarTitleDisplayMode(.inline) 来使用 .inline 版本)。

我试图在 DetailView 中显示一个简单的两行 VStack。

事实证明，DetailView 的主体被导航栏覆盖，除非我将整个内容向下移动 56 个像素(通过使用 Spacer().frame(height: 56) )。

而且我什至不知道 NavigationBar 的精确高度 更糟糕的是，我不知道如何动态确定纵向和横向旋转。

无论旋转状态如何，如何使 DetailView 的主体从导航栏下方开始？

这里是肖像的屏幕截图示例:

Left side: the title is cut off !           Right side: using a Spacer makes title appear

这是我打开导航链接的方法:

NavigationLink(
    destination: DetailView(session: session).navigationBarTitleDisplayMode(.inline),
    tag: session.id ?? "",
    selection: $selectedTag,
    label: { EmptyView() }
)

这是整个详细信息屏幕:

(请注意间隔距离为 56，以使标题完全可见)

import SwiftUI

struct DetailView: View {
    
    @State var session: THSession
    
    var body: some View {
        
        VStack(alignment: .leading) {
            
            Spacer().frame(height: 56)   // !!!!!!!!!! without this the title sits behind NavBar !!!!!!!!!!!!!!!!!!!
            
            Text(session.title)
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(.white)
            
            Spacer().frame(height: 16)
            
            HStack {
                Text(session.invitationCode)
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
            }
            
            Spacer()
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
        .background(Color.red)
        .ignoresSafeArea()
    }
}

Answer 1

我假设您使用 ignoresSafeArea() 因为您希望背景延伸到安全区域。但是，放置它的位置会产生副作用，使标题延伸到导航栏区域。

相反，请将 ignoresSafeArea() 放在 background 修饰符内:

.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
.background(Color.red.ignoresSafeArea())

现在，您的标题将不会延伸到安全区域，并且您可以完全避免在 View 顶部使用 Spacer。