当 windowStyle 为 HiddenTitleBarWindowStyle 时，添加圆角半径会在顶部添加额外的空间

Question

我正在使用

NavigationSplitView

，在详细视图中，当我添加角半径时，它会在标题栏的位置添加额外的空间。

下面是当我添加圆角半径时在顶部添加额外空间的代码：

并且无需圆角半径即可完美工作：

NavigationSplitView(
    sidebar: { Text("sidebar") },
    detail: {
        Text("detail")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.red)
            .cornerRadius(6)
        }
    )
.navigationSplitViewStyle(.balanced)

@main 中的窗口样式也是

HiddenTitleBarWindowStyle

WindowGroup {
    ContentView()
}
.windowStyle(HiddenTitleBarWindowStyle())

有谁知道为什么当窗口样式为

HiddenTitleBarWindowStyle

时，圆角半径不能按预期工作。

Answer 1

标题栏通常占据的区域被排除在窗口的“安全区域”之外。通常，窗口的内容不会进入该区域，除非忽略安全区域边缘。

当使用修改器background(_:ignoresSafeAreaEdges:)应用背景时，默认情况下会忽略安全区域边缘。

• 在没有圆角的版本中，安全区域边缘被忽略，红色背景延伸到窗口顶部。

• 通过设置角半径，您实际上是在应用剪辑形状。由于这是在背景之后应用的，因此它将红色背景剪裁回常规框架。这就是为什么背景只填充安全区域。

要修复，请使用 background(alignment:content:) 应用背景，并将圆角添加到该背景。默认情况下，这不会忽略安全区域边缘，因此添加

.ignoresSafeArea()

来实现这一点。

顺便说一句，

.cornerRadius

已被弃用，因此最好使用

.clipShape

代替。这也清楚地表明视图正在被剪切。

detail: {
    Text("detail")
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background {
            Color.red
                .clipShape(RoundedRectangle(cornerRadius: 6))
                .ignoresSafeArea()
        }
}

或者，如果您希望详细视图的主要内容也忽略安全区域边缘，只需在剪辑形状之后将

.ignoresSafeArea()

添加到整个视图：

detail: {
    Text("detail")
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.red)
        .clipShape(RoundedRectangle(cornerRadius: 6))
        .ignoresSafeArea()
}

结果并不完全相同 - 您会注意到“侧边栏”和“详细信息”的文本不再垂直对齐。这是因为，详细视图现在延伸到窗口的顶部，因此它的垂直中部比侧边栏中部稍高。在上面的先前版本中，只有背景延伸到顶部，实际内容仍然尊重安全区域边缘。