SwiftUI中打开Sheet时如何保持背景颜色一致？

这个问题是因为Sheet弹出时系统会临时调整父视图的安全区域边距，导致原背景视图跟随布局变化发生位移。可以通过以下两种方式修复：

方式一：将背景设为全局视图修饰符 #

把原来ZStack内的背景子视图，改为给整个ZStack添加.background修饰符，让背景固定覆盖整个屏幕，不受Sheet弹出影响：

ZStack {
    HStack {
        Button(action: {
            self.showSheet = true
        }) {
            Text("Add exercise")
                .frame(maxWidth: .infinity)
                .frame(height: 10)
                .foregroundColor(CustomColor.darkBlue)
                .padding()
                .background(CustomColor.cyan)
        }
        .clipShape(Capsule())
        .sheet(isPresented: $showSheet) {
            AddWorkoutSheet()
        }
    }
    .padding(.bottom)
}
.background(setBackgroundColor.darkBlue.ignoresSafeArea(.all)) // 移至此处作为全局背景

方式二：强化背景视图的布局独立性 #

如果坚持用ZStack嵌套背景，需确保背景完全忽略安全区域，且处于ZStack最底层，避免被其他布局干扰：

ZStack {
    setBackgroundColor.darkBlue
        .edgesIgnoringSafeArea(.all) // 强制忽略所有安全区域（低版本SwiftUI用此写法）
        // 若用高版本SwiftUI，可替换为：.ignoresSafeArea(.all)

    HStack {
        Button(action: {
            self.showSheet = true
        }) {
            Text("Add exercise")
                .frame(maxWidth: .infinity)
                .frame(height: 10)
                .foregroundColor(CustomColor.darkBlue)
                .padding()
                .background(CustomColor.cyan)
        }
        .clipShape(Capsule())
        .sheet(isPresented: $showSheet) {
            AddWorkoutSheet()
        }
    }
    .padding(.bottom)
}

原理说明 #

用.background修饰符添加的背景，是直接绘制在视图底层的独立层，不会跟随父视图的安全区域变化而位移；而ZStack内的背景子视图，会受Sheet弹出时的父视图布局调整影响，从而出现下移露出白色区域的问题。

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