SwiftUI中HStack背景无法完全覆盖区域的技术问题

在SwiftUI开发中使用HStack时，发现其上方存在一块未被背景色覆盖的小区域（红色背景上方的白色区域）。无论设置何种背景色，该区域颜色均保持不变；深色模式下该区域与背景色一致，肉眼不可见，但在调试视图中可检测到。

相关代码 #

var body: some View {
    NavigationView {
        VStack {
            Form {
                ForEach(sections) { section in
                    Section {
                        PricesFilterMenuSectionView(items: section.items)
                    } header: {
                        Text(section.translation)
                            .font(.title3.weight(.bold))
                            .foregroundColor(.primary)
                            .textCase(nil)
                    } footer: {
                        if section != sections.last {
                            VStack(spacing: 0) {
                                Divider().padding(.top, Layout.dividerTopPadding)
                            }
                        }
                    }
                }
            }
            .navigationBarTitle(Text(title), displayMode: .inline)
            .navigationBarItems(leading: Button(action: dismissAction, label: { Image(systemName: "xmark").foregroundColor(.primary) }))

            // 出现问题的HStack
            HStack {
                Button(action: {
                    sections.forEach { section in
                        section.items.forEach { item in
                            item.isSelected = false
                        }
                    }
                }, label: {
                    Text("clear_filters".localized).foregroundColor(ThemeManager.current.secondaryColor.color)
                })

                Spacer()

                Button {
                    let tags = sections.flatMap { section in
                        section.items.compactMap { item -> Int? in
                            item.isSelected ? item.id : nil
                        }
                    }

                    showAction(tags)
                } label: {
                    Text("show_results".localized)
                }
                .buttonStyle(PrimaryButtonStyle())
            }
            .padding(.horizontal, Layout.ctaStackHorizontalPadding)
            .padding(.top)
            .background((colorScheme == .dark ? Color(UIColor.red) : Color.red).ignoresSafeArea())
            .compositingGroup()
            // .shadow(color: colorScheme == .dark ? .black : .gray, radius: 15, x: 0, y: 0)
        }
    }
}

问题截图 #

解决方案 #

方法1：消除Form的底部默认内边距 #

Form默认底部存在隐藏内边距，导致与下方HStack之间出现空隙，可通过负padding消除：

Form {
    // ... 原有代码
}
.padding(.bottom, -8) // 数值可根据实际显示效果微调

方法2：将背景色应用到外层VStack #

单独给HStack设置背景时，Form与HStack之间的空隙会显示父视图的默认背景色。把背景色移到外层VStack上，即可覆盖整个区域：

NavigationView {
    VStack {
        // Form代码
        // HStack代码
    }
    .background((colorScheme == .dark ? Color(UIColor.red) : Color.red).ignoresSafeArea())
}

方法3：切换Form的ListStyle #

部分ListStyle会自带额外布局间距，尝试切换样式来消除空隙：

Form {
    // ... 原有代码
}
.listStyle(.insetGrouped) // 或尝试.plain等其他样式

方法4：调整HStack的顶部padding #

检查HStack的.padding(.top)是否放大了空隙，可尝试减小该值或直接移除，同时确认Form没有额外的布局边距。

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