如何移除Apple WatchOS SwiftUI应用中的顶部边距？

你遇到的顶部边距是WatchOS系统安全区域的默认行为——系统会在屏幕顶部预留安全空间，VStack默认会遵循这个安全区域约束，所以即使设置了.frame(height: .infinity, alignment: .top)，内容还是会被限制在安全区域内。

不用全局开启.ignoresSafeArea()，这里有几个更精准的解决方案：

1. 仅忽略顶部安全区域 #

只针对顶部边距处理，保留其他方向的安全区域适配（比如底部的交互区域），这是比全局忽略更合理的做法：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
            Image(systemName: "globe")
            Spacer()
        }
        .frame(height: .infinity, alignment: .top)
        .ignoresSafeArea(edges: .top) // 只忽略顶部安全区域
    }
}

2. 使用safeAreaInset自定义顶部布局 #

如果需要在顶部保留系统安全区域逻辑的同时让标题紧贴顶部，可以用safeAreaInset嵌入内容，直接覆盖顶部安全区域的预留空间：

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
            Spacer()
        }
        .frame(height: .infinity, alignment: .top)
        .safeAreaInset(edge: .top, spacing: 0) {
            Text("Hello, world!") // 该文本会紧贴屏幕顶部
        }
    }
}

为什么全局.ignoresSafeArea()不理想？ #

全局忽略会让所有内容脱离系统安全区域约束，在不同Watch机型上可能导致底部内容被交互区域遮挡，或者顶部内容被状态栏（若存在）覆盖，而针对性忽略顶部则能避免这些适配问题。

内容的提问来源于stack exchange，提问作者Luca