HStack背景颜色混合到安全区域

我试图阻止我的 HStack 后台进入我的安全区域。

There is a ZStack that is setting the background color. I am using green just to be more defined for now.

    struct AccountView: View {
    var body: some View {
        ZStack{
            Color(.green)
                .ignoresSafeArea()
            
            VStack(spacing: 32){
                HStack {
                    Image(systemName: "person")
                        .resizable()
                        .scaledToFill()
                        .frame(width: 64, height: 64)
                        .clipShape(Circle())
                        .padding(.leading)
                    VStack(alignment: .leading, spacing: 4) {
                        Text("First Last")
                            .font(.system(size: 18))
                        Text("Available")
                            .foregroundColor(.gray)
                            .font(.system(size: 14))
                    }
                    Spacer()
                        
                }
                .frame(height: 80)
                .background(Color("ItemBG"))
        
                Spacer()
            }
        }
    }
    
}

我们需要使用形状作为背景而不是纯色，这样它就不会扩散到外面。

这是简化的演示。使用 Xcode 13.2 / iOS 15.2 进行测试

var body: some View {
    VStack {
        HStack {
            Text("Hello")
        }
        .frame(maxWidth: .infinity, maxHeight: 80)
        .background(Rectangle().fill(.yellow))       // << here !!
        Spacer()
    }
    .background(Color.green.ignoresSafeArea())
}