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

Question

我正在使用导航分割视图，在详细视图中，当我添加角半径时，它会添加额外的空间来代替标题栏。

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

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

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