SwiftUI 的 NavigationLink DetailView 在纵向和横向中的 NavigationBar 高度

Question

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

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

一切正常，只是我不知道 DetailView 中 NavigationBar 的高度。（请注意，我通过在 DetailView 上调用 .navigationBarTitleDisplayMode(.inline) 使用 .inline 版本）。

我正在尝试在 DetailView 中显示一个简单的 two-line VStack。

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

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

如何使 DetailView 的 body 在 NavBar 下方开始而不管 rotation-states ？

此处为纵向截图示例：

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() }
)

这里是整个 Detail-Screen:

（请注意 56 的 Spacer-distance 以使标题完全可见）

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。

SwiftUI 的 NavigationLink DetailView 在纵向和横向中的 NavigationBar 高度

NavigationBar height for SwiftUI's NavigationLink DetailView in Portrait and Landscape

swiftui

uinavigationbar

swiftui-navigationlink